Chapter 11

【デプロイ】Firebase Hostingへのデプロイ

tokku5552
tokku5552
2022.11.26に更新

Firebase Hostingとは?

Googleが提供しているBaaS「Firebase」内で提供されている静的ウェブホストティングサービスです。

コマンド1つでデプロイする事ができて、非常に手軽に扱えます。

Firebaseプロジェクトの作成

Firebase Hostingを使うにあたってまずFirebaseプロジェクトを作成しましょう。

以下のサイトにアクセスして、コンソール画面に移動します。

https://firebase.google.com/

「プロジェクトを追加」から新しいプロジェクトを作成します。

その後、Firebaseから案内される手順通りに答えていきます。

  1. プロジェクト名

  2. このプロジェクトでGoogleAnalyticsを有効にするか否か。

  3. Analyticsを有効にする場合はそのアカウントを指定。

  4. プロジェクトを作成中なので待ちます。

  5. プロジェクトが完成!

Firebase Hostingサービスの起動

Firebaseプロジェクトを作成したら今度はFirebase Hostingのサービスを起動します

Firebaseプロジェクトのトップ画面左から「Hosting」を選択します

Hostingの画面で「始める」を選択し、設定手順に進みます

設定手順では、以下の3つの手順が案内されます

  1. Firebase CLIのインストール
  2. Firebaseの初期化
  3. 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が既に存在するので削除するか?

上記設定を完了するとアプリのルートディレクトリに.firebasercfirebase.jsonという設定ファイルが生成されます。

今回は以下の通り選択していきます。

  1. どのFirebaseサービスを使うのか? --> Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
  2. 既存のFirebaseプロジェクトか新規のプロジェクトを使うのか? --> Use an existing project
  3. どのFirebaseプロジェクトを使うのか? --> 先ほど作成したFirebaseプロジェクト
  4. どのディレクトリがデプロイ対象か? --> build/web
  5. SPAとしてデプロイするか? --> Yes
  6. Github Actionsを使った自動デプロイをするか? --> No
  7. index.htmlが既に存在するので削除するか? --> No

「Firebase initialization complete!」の文字が表示されれば、アプリに対しFirebaseの初期化完了です。

Firebase Hostingへデプロイ

最後にデプロイについてです。

Webアプリをビルド

デプロイの前に下記コマンドをルートディレクトリで実行しアプリをデプロイ用にビルドします。

$ flutter build web

コマンドを実行するとbuild/webディレクトリにビルドされたアプリが配置されます。

ビルドしたアプリをデプロイ

あとは下記コマンドを実行すればbuild/webにあるwebアプリがFirebase Hosting上にデプロイされます。

$ firebase deploy

CleanShot 2022-11-23 at 15 20 16@2x

firebaseの設定は初期化時に設定しているので、このコマンドだけでデプロイが完了します

非常にシンプルですね!

デプロイ完了!!

最後にFirebase Hostingのコンソールを開いて、デプロイが確認されれば完了です!!

CleanShot 2022-11-23 at 15 21 32@2x

補足:プロジェクトの切り替え

サンプルリポジトリをクローンした段階では、.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/**"
  ]
}