Firebase Hosting Flutter Web

以前、NetlifyにFlutter Webアプリをデプロイするという記事を書きました。

NetlifyにFlutter Webアプリをデプロイする

Flutterで開発した webアプリを公開する方法には、いくつかあります。公式サイトでは以下の3つが挙げられています。 Firebaseホスティング GitHubPages Google CloudHosti…

アプリ内でテンポラリのファイルを使う必要ができてしまったので、仕方なくFirebaseに乗り換えることとしました。Firebaseは、Hostingだけでなく、認証はファイルストレージ、データベースなどを利用可能なプラットフォームです。

Firebaseは、2014年にGoogle傘下となっていますので、Flutterとの相性は良いはずです。しかしながら、機能が多すぎるのと、Google Cloud Platformとの関係もよくわからなかったので、敬遠しておりました。

とりあえず、FirebaseのHosting機能を使ってみます。

最初は、Firebaseのコンソールの指示に従ってやってみました。このほかにもコマンドラインから実施する方法もあります。Flutterを利用する場合には、”FlutterFire_cli”コマンドを使うと非常に便利です。こちらも参考にしてください。

Firebaseプロジェクトの作成

事前準備

アカウントを登録して、Firebaseコンソールにログインできるようにしておきます。

Flutterでアプリをクリエイトしておきます。

以降の操作は、Firebaseコンソールで指示される通りに実行します。

Firebaseプロジェクトの追加

Firebaseコンソールからプロジェクトの追加を実行します。

プロジェクト名を入力します。

Googleアナリティクスを使用しない場合には、設定をオフにします。

アプリを追加します。今回は、webアプリアイコン(</>)をクリックします。

WebアプリにFirebaseを追加

アプリのニックネームを決めます。

Hostingの設定にチェックします。そのままでも良いですが、せっかくなので、サイト名をつけます。

新しいサイトを作成を選択して、サイト名をつける。

Firebase SDKの追加

<script>タグを使用するを選択します。

flutterプロジェクト直下のweb/index.htmlを開いて、bodyタグ直下に以下のコードを挿入します。このコードは、Firebaseコンソールに表示されるので、そのまま使えます。

<script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.2/firebase-app.js";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration
  const firebaseConfig = {
    apiKey: "<Your API Key>",
    authDomain: "<Youre Domain>",
    projectId: "<Your Project id>",
    storageBucket: "<Your StrageBucket>",
    messagingSenderId: "<Your messagingSenderId>",
    appId: "<Your appID>"
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
</script>

Firebase CLI のインストール

Firebase Hostingへのデプロイ

firebase.jsonファイルの"public"を"build/web"に変更します。

{
  "hosting": {
    "site": "nagomi-tec-firebase",
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

以上で、Firebase Hosting機能を使ったWebアプリが完成します。結局、画面の指示に従っただけで、できてしまいました。特にわかりにくい事はなかったです。