Firebase Hosting を使ってFlutter のWebアプリをホスティングする
以前、NetlifyにFlutter Webアプリをデプロイするという記事を書きました。
アプリ内でファイルストレージや、認証を使う必要ができてしまったので、これを機会にFirebaseに乗り換えることとしました。
Firebaseにはアプリのバックエンドとして必要な機能が一通り揃っています。この記事では、Hosting機能を使ってみます。
Firebaseプロジェクトの作成
事前準備
アカウントを登録して、Firebaseコンソールにログインできるようにしておきます。
Hostするwebアプリをビルドして動作確認しておきます。
flutter build web
以降の操作は、Firebaseコンソールで指示される通りに実行します。
Firebaseプロジェクトの追加
Firebaseコンソールからプロジェクトの追加を実行します。
次にプロジェクトにアプリを追加します。今回は、webアプリアイコン(</>)をクリックします。
![](https://nagomi-informal.net/wp-content/uploads/2022/08/6db7c10cef24546f7d1bfc44576ee9ca-1024x549.png)
WebアプリにFirebaseを追加
![](https://nagomi-informal.net/wp-content/uploads/2022/08/65f7688fe2300b593dfd15c14251e212-1024x872.png)
アプリのニックネームを決めます。
Hostingの設定にチェックし、新しいサイトを作成を選択して、サイト名を入力します。
Firebase SDKの追加
![](https://nagomi-informal.net/wp-content/uploads/2022/08/179bc99cfa1c6e5849ad2cce61b88994-1024x205.png)
<script>タグを使用するを選択します。
flutterプロジェクトの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 のインストール
![](https://nagomi-informal.net/wp-content/uploads/2022/08/54e751e5ecfcf9c01d0d5e7693438384-1024x279.png)
Firebase Hostingへのデプロイ
![](https://nagomi-informal.net/wp-content/uploads/2022/08/2928af085a34e5156141b3b2170ffb92-987x1024.png)
![](https://nagomi-informal.net/wp-content/uploads/2022/08/0e163e073d5166441401a76079375d38-1024x358.png)
コンソールの指示通りに、以下のコマンドを実行します。実行はflutterプロジェクトのルートディレクトリで行います。
firebase login
firebase init
firebase.jsonファイルの"public"を"build/web"に変更します。
{
"hosting": {
"site": <Your site>,
"public": "build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
最後に、コンソールに表示されたデプロイコマンドをコピーして実行します。
firebase deploy --only hosting:<Your site>
以上で、Firebase Hosting機能を使ったWebアプリが完成します。結局、画面の指示に従っただけで、できてしまいました。特にわかりにくい事はなかったです。