Firebase Hostingとは？
Googleが提供しているBaaS「Firebase」内で提供されている静的ウェブホストティングサービスです。
コマンド1つでデプロイする事ができて、非常に手軽に扱えます。
Firebaseプロジェクトの作成
Firebase Hostingを使うにあたってまずFirebaseプロジェクトを作成しましょう。
以下のサイトにアクセスして、コンソール画面に移動します。
「プロジェクトを追加」から新しいプロジェクトを作成します。
その後、Firebaseから案内される手順通りに答えていきます。
-
プロジェクト名
-
このプロジェクトでGoogleAnalyticsを有効にするか否か。
-
Analyticsを有効にする場合はそのアカウントを指定。
-
プロジェクトを作成中なので待ちます。
-
プロジェクトが完成！
Firebase Hostingサービスの起動
Firebaseプロジェクトを作成したら今度はFirebase Hostingのサービスを起動します
Firebaseプロジェクトのトップ画面左から「Hosting」を選択します
Hostingの画面で「始める」を選択し、設定手順に進みます
設定手順では、以下の３つの手順が案内されます
- Firebase CLIのインストール
- Firebaseの初期化
- Hostingへのデプロイ
Firebase CLIのインストール
Firebase関連のサービスを使用するのに使う「Firebase CLI」をnpmを使ってインストールします。
$ npm install -g firebase-tools
プロジェクトとFirebaseプロジェクトを紐付け
インストール出来たらfirebase loginコマンドでログインし、アプリのルートディレクトリでfirebase initコマンドを実行し、初期化します。
firebase initを実行すると下記アプリに対するFirebase設定が案内されます。
-
どのFirebaseサービスを使うのか？
-
既存のFirebaseプロジェクトか新規のプロジェクトを使うのか？
-
どのFirebaseプロジェクトを使うのか？
-
どのディレクトリがデプロイ対象か？
-
SPAとしてデプロイするか？
-
Github Actionsを使った自動デプロイをするか？
-
index.htmlが既に存在するので削除するか？
上記設定を完了するとアプリのルートディレクトリに.firebasercとfirebase.jsonという設定ファイルが生成されます。
今回は以下の通り選択していきます。
- どのFirebaseサービスを使うのか？ -->
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys - 既存のFirebaseプロジェクトか新規のプロジェクトを使うのか？ -->
Use an existing project - どのFirebaseプロジェクトを使うのか？ -->
先ほど作成したFirebaseプロジェクト - どのディレクトリがデプロイ対象か？ -->
build/web - SPAとしてデプロイするか？ -->
Yes - Github Actionsを使った自動デプロイをするか？ -->
No - index.htmlが既に存在するので削除するか？ -->
No
「Firebase initialization complete!」の文字が表示されれば、アプリに対しFirebaseの初期化完了です。
Firebase Hostingへデプロイ
最後にデプロイについてです。
Webアプリをビルド
デプロイの前に下記コマンドをルートディレクトリで実行しアプリをデプロイ用にビルドします。
$ flutter build web
コマンドを実行するとbuild/webディレクトリにビルドされたアプリが配置されます。
ビルドしたアプリをデプロイ
あとは下記コマンドを実行すればbuild/webにあるwebアプリがFirebase Hosting上にデプロイされます。
$ firebase deploy
firebaseの設定は初期化時に設定しているので、このコマンドだけでデプロイが完了します
非常にシンプルですね！
デプロイ完了！！
最後にFirebase Hostingのコンソールを開いて、デプロイが確認されれば完了です！！
補足：プロジェクトの切り替え
サンプルリポジトリをクローンした段階では、.firebasercにサンプル用のfirebaseプロジェクトが設定されているので、デプロイできないようになっています。
以下の手順で、ご自身で作成したFirebaseプロジェクトに切り替えることができます。
- firebaesのプロジェクト一覧を取得
% firebase projects:list
✔ Preparing the list of your Firebase projects
┌──────────────────────────────┬──────────────────────────────┬────────────────┬──────────────────────┐
│ Project Display Name │ Project ID │ Project Number │ Resource Location ID │
├──────────────────────────────┼──────────────────────────────┼────────────────┼──────────────────────┤
│ xxxxxxx-xxxxxxx │ xxxxxxx-5f21d │ 111111111111 │ asia-northeast1 │
├──────────────────────────────┼──────────────────────────────┼────────────────┼──────────────────────┤
│ yyyyyyy-yyyyyyyyyy │ yyyyyyy-production │ 2222222222 │ asia-northeast1 │
├──────────────────────────────┼──────────────────────────────┼────────────────┼──────────────────────┤
│ zzzzzzz-zzzz │ zzzzzzzzzzzz-c9964 │ 333333333333 │ asia-northeast1 │
...
- デプロイする
Project IDに対して以下のコマンドで切り替え
firebase use <Project ID>
補足2: .envでLiffIdを渡す際の注意点
Hostingへのデプロイ時、デフォルトでは接頭辞がドット(.)のファイルはignoreされる様に設定されている為、.envファイルが読み込まれずエラーとなってしまいます。
その為、.envファイルから環境変数を渡す場合はfirebase.jsonを下記の通り、変更する必要があります。
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
- "**/.*",
+ "**/.* !**/.env",
"**/node_modules/**"
]
}