🐯

Flutter WebアプリケーションをFirebase Hostingにデプロイする方法

2024/07/04に公開

Firebase

Flutter

Firebase Hosting

tech

Flutter WebアプリケーションをビルドしてFirebase Hostingにデプロイする方法について説明します。以下のセクションでは、Firebase Hostingの設定、カスタムドメインの設定方法、デプロイ後の管理と更新方法について詳しく説明します。

Firebaseプロジェクトの設定

Firebase CLIのインストール:
Firebase CLIがインストールされていない場合は、以下のコマンドでインストールします。

npm install -g firebase-tools

Firebaseプロジェクトの作成:
Firebaseコンソールにアクセスして新しいプロジェクトを作成します。
Firebaseプロジェクトにリンク:
ターミナルで以下のコマンドを実行してFirebaseプロジェクトにリンクします。

firebase login

このコマンドを実行すると、ブラウザが開き、Googleアカウントでログインを求められます。Firebaseプロジェクトに使用するGoogleアカウントでログインしてください。

次に、プロジェクトを初期化します。

firebase init

firebase init コマンドを実行すると、以下のような選択肢が表示されます。

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.
◯ Firestore: Configure a security rules file for Cloud Firestore and (optionally) provision default indexes
◯ Functions: Configure a Cloud Functions directory and its files
◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
◯ Storage: Configure a security rules file for Cloud Storage

Hosting を選択し、Enterキーを押します。

プロジェクトの選択:
次に、Firebase CLIがあなたのGoogleアカウントにリンクされているプロジェクトの一覧を表示し、使用するプロジェクトを選択するよう求めます。リストから適切なプロジェクトを選択し、Enterキーを押します。
ディレクトリの設定:
firebase init コマンドを実行すると、Firebase CLIはデプロイするファイルを含むディレクトリを指定するように求めます。デフォルトでは public ディレクトリが提案されますが、Flutter Webアプリケーションの場合は build/web ディレクトリを指定する必要があります。

以下のプロンプトが表示されたら:

? What do you want to use as your public directory? (public)

public と表示されていますが、これを build/web に変更します。つまり、プロンプトが表示されたらキーボードで build/web と入力してEnterキーを押します。

? What do you want to use as your public directory? (public) build/web

? What do you want to use as your public directory? (public) build/web

6.シングルページアプリケーションの設定:
次に、シングルページアプリケーションとして設定するかどうかを尋ねられます。Flutter Webアプリケーションは通常シングルページアプリケーションなので、Yes と答えます。これにより、すべてのURLが index.html にリダイレクトされるように設定されます。

プロンプトが表示されたら:

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

y と入力してEnterキーを押します。

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y

この設定により、Flutter Webアプリケーションのビルド出力が適切にFirebase Hostingにデプロイされ、すべてのルートが index.html にリダイレクトされるようになります。

アプリケーションのビルド

Firebaseにデプロイする前に、Flutter Webアプリケーションをビルドする必要があります。以下のコマンドを使用して、最適化されたビルドを作成します。

flutter build web --release

このコマンドにより、build/web ディレクトリに最適化されたWebアプリケーションが生成されます。

デプロイ手順

デプロイ:
ビルドが完了し、Firebase設定が済んだら、以下のコマンドでデプロイします。

firebase deploy

カスタムドメインの設定方法

カスタムドメインの購入:
カスタムドメインの購入はこちらの記事を参考にしてください。
Firebase Hostingでカスタムドメインを追加:
FirebaseコンソールのHostingセクションに移動し、「カスタムドメインを追加」を選択します。
1. Firebaseコンソールにアクセス:
  Firebaseコンソールにアクセスし、対象のプロジェクトを選択します。
2. Hostingセクションに移動:
  プロジェクトの概要ページから、左側のナビゲーションメニューで「Hosting」をクリックします。
3. カスタムドメインの追加:
  Hostingページの右上にある「カスタムドメインを追加」ボタンをクリックします。
4. ドメインの入力:
  表示されるダイアログに購入したカスタムドメイン（例: yourdomain.com）を入力し、「続行」をクリックします。
5. ドメインの所有権確認:
  Firebaseがドメインの所有権を確認するための手順が表示されます。指定されたTXTレコードをドメインレジストラのDNS設定に追加します。
6. DNS設定の更新:
  ドメインレジストラ（ドメインを取得したページ）の管理画面にアクセスし、提供されたTXTレコードを追加して保存します。
7. 確認の完了:
  Firebaseコンソールに戻り、「所有権を確認」をクリックします。所有権が確認されると、ドメインがFirebase Hostingにリンクされます。
8. DNS Aレコードの追加:
  最後に、Firebaseが提供するAレコードをドメインレジストラのDNS設定に追加し、ドメインをFirebase Hostingにポイントします。
この設定により、カスタムドメインがFirebase Hostingに追加され、Flutter Webアプリケーションがカスタムドメインでアクセスできるようになります。
ドメインの所有権を確認:
提供された手順に従って、DNS設定を更新し、ドメインの所有権を確認します。この確認には1日程度時間がかかる場合があります。
DNS設定の更新:
ドメインレジストラの管理画面で、Firebaseが提供するDNSレコードを追加し、ドメインをFirebase Hostingにポイントします。

デプロイ後の管理と更新方法

アプリケーションの更新:
アプリケーションに変更を加えた後、再度ビルドしてデプロイする必要があります。変更を加えたら以下の手順でデプロイします。

flutter build web --release
firebase deploy

Firebaseコンソールの利用:
Firebaseコンソールからホスティングのステータス、トラフィック、エラーレポートを監視します。
自動デプロイの設定:
CI/CDパイプライン（例: GitHub Actions, GitLab CI）を設定して、コードがプッシュされるたびに自動でデプロイされるようにします。
バックアップとロールバック:
Firebase Hostingは以前のデプロイバージョンを保持しています。問題が発生した場合は、Firebaseコンソールから以前のバージョンにロールバックできます。

これらの手順に従うことで、Flutter WebアプリケーションをFirebase Hostingにデプロイし、カスタムドメインで公開することができます。また、定期的な更新や管理も容易に行うことが可能です。