はじめに
Reactで開発したSPAをFirebase Hostingにデプロイする手順をまとめます。
基本的にはFirabaseの手順に沿って行うだけなんですが、細かいところで躓いたので備忘録として残します。
前提条件
Firebaseでアプリをデプロイする前の前提条件と準備です。本記事はMac環境を前提に手順を解説していきます。WindowsやLinuxでは一部のコマンドが異なる場合があります。
事前準備
アプリをデプロイする前に以下2つを準備してください。
- デプロイするアプリ
- Firebaseのアカウント
Firebaseにプロジェクトとアプリを作成
プロジェクトの作成
まずはFirebaseにログインしてプロジェクトを作成します。
「新しいFirebaseプロジェクトを作成」をクリックすると以下の画面に遷移するのでプロジェクト名を入力してください。プロジェクト名は後から変更可能です。
プロジェクト名を決めると自動でID名も付与されます。
ID名は「プロジェクト名-〇〇」の形式になっているようです。ID名は後から変更が出来ないので注意しましょう。
プロジェクト名を入力して「続行」をクリックするとFirebaseでGeminiを有効化するかを確認されます。有効化するとFirebaseのコンソールの画面でGeminiが使えるようになります。どちらにするかは任意ですが今回は有効化して続行します。
次はGoogleアナリティクスの有効化をするか確認されます。こちらも任意ですが、アナリティクスを有効化するとアナリティクスのアカウントを持っている場合は選択、持っていない場合はアナリティクスのアカウントの作成が必要になります。今回はアナリティクスを有効化してプロジェクトを作成します。
「プロジェクトを作成」をクリックするとローディング画面に遷移して、少し待つと以下の画面になります。
「続行」をクリックするとコンソールの画面へ遷移します。これでプロジェクトの作成は完了です。
プロジェクトにアプリを追加
続いてアプリの追加です。
Firebaseのコンソールの画面の「アプリを追加」をクリックします。
プラットフォームの選択が表示されるので「ウェブ」を選択します。
アプリの設定画面へ遷移するので順番に設定していきましょう。
「①アプリの登録」の「アプリのニックネーム」はコンソールで表示されるだけで外部には公開されないので自由な名前で問題ないです。ニックネームを入力したらその下にある「このアプリの Firebase Hosting も設定します。」にチェックを入れます。
Firebase HostingはFirebaseのホスティングサービスで、Webサイトやアプリを公開するサーバーです。SSL証明書や専用のCLIツールが無料で利用出来ます。
「アプリを登録」をクリックすると「②Firebase SDKの追加」に進みます。
ここからは先はCLIの導入やHosthingの設定でコマンドを使用していくのでエディタでReactアプリを開いていることを前提に進めていきます。
Firebase CLIのインストール
ここまでの進捗でFirebaseのコンソール画面に「②Firebase SDKの追加」が表示されていますが、Firebase SDKはFirestoreなどのバックエンドを利用する場合に必要なものです。今回はSPAをFirebase Hostingデプロイするのが目的なのでFirebase SDKの追加は不要です。
Firebase CLIを導入
Firebase CLIをインストールしてコマンドからFirebaseを操作出来るようにしましょう。
Reactアプリ内で次のコマンドを実行してください。
npm install -g firebase-tools
インストールが完了したら次のコマンドを実行してfirebaseコマンドが実行出来るか確認しましょう。バージョンが返ってこれば問題ないです。
firebase --version
Firebase Hostingへデプロイ
いよいよアプリのデプロイです！
Firebase Hostingへデプロイするための準備
まずはコマンドからFirebaseへログインします。
firebase login
Firebaseの使用が初めての場合はGoogleのアカウント認証が必要になります。
ログインに成功するとコマンドに次の表示とブラウザにタブが開かれて以下の画像が出ます。
✔ Success! Logged in as XXX@gmail.com
続いてプロジェクトを開始します。
firebase init hosting
コマンドを実行すると以下が返ってきます。
== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
? Please select an option:
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
翻訳すると、「デプロイするアプリのディレクトリとFirebaseのプロジェクトを紐付ける必要があります」となります。
次の4つの選択肢からオプションを選択しましょう。
| オプション | 翻訳 |
|---|---|
| Use an existing project | 既存のプロジェクトを使用する |
| Create a new project | 新しいプロジェクトを使用する |
| Add Firebase to an existing Google Cloud Platform project | 既存のGoogle Cloud PlatformプロジェクトにFirebaseを追加する |
| Don't set up a default project | デフォルトのプロジェクトを設定しないでください |
既にプロジェクトは作成しているのでUse an existing projectを選択します。
次にアプリのデプロイ先となるFirebaseのプロジェクトを選択します。
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
✔ Please select an option: Use an existing project
? Select a default Firebase project for this directory:
❯ プロジェクトのid名 (プロジェクト名)
プロジェクトを選択すると、公開ディレクトリを確認されます。
What do you want to use as your public directory? (public)
SPAはビルドするとdistディレクトリが生成されるのでdistと入力します。
公開ディレクトリを入力したら次はデプロイするアプリがSPAか確認されます。
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
今回はSPAをデプロイしたいのでyを入力します。
次にGitHubと連携するかを確認されます。
Set up automatic builds and deploys with GitHub? (y/N)
GitHubと連携させることでgit pushするとFirebaseに自動でデプロイが出来るようになります。別途GitHub Actionsの設定が必要となり、長くなるので今回はnを選択します。
次はAgent Skillsのインストールを確認されます。
こちらも今回は不要なのでnを選択します。
Would you like to install agent skills for Firebase? (y/N)
ここでようやくデプロイの準備が完了です。
以下の表示とアプリのルートディレクトリにfirebase.jsonと.firebasercが作成されます。
✔ Firebase initialization complete!
firebase.jsonと.firebasercには以下の役割があります。
| ファイル名 | 説明 |
|---|---|
| firebase.json | Firebaseのプロジェクトの設定や各サービスの動作設定を定義するファイル |
| .firebaserc | Firebase プロジェクトの構成やエイリアス、デプロイターゲットの設定を保存する隠し JSON ファイル |
Firebase Hostingへデプロイ
まずはアプリのビルドを実行してdistフォルダを生成します。
npm run dev
ビルドしてdistディレクトリが確認できたら次のコマンドでFirebase Hostingにデプロイします。
firebase deploy
以下の表示にあるHosting URLを確認し、アプリが正常に表示されていればデプロイ完了です。
=== Deploying to 'project-id'...
i deploying hosting
i hosting[project-id]: beginning deploy...
i hosting[project-id]: found 1 files in dist
✔ hosting[project-id]: file upload complete
i hosting[project-id]: finalizing version...
✔ hosting[project-id]: version finalized
i hosting[project-id]: releasing new version...
✔ hosting[project-id]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/project-id/overview
Hosting URL: https://project-id.web.app
Makeコマンドによるデプロイの自動化
ビルドやコンパイルなどのタスクを自動化するMakefileを作成してnpm run devとfirebase deployを同時に実行できるようにしましょう。
Makefileを作成して以下の記述をします。
deploy:
npm run build
firebase deploy
注意点として、各コマンドのインデントはスペースではなくTabで入力しましょう。
これはMakefelileの仕様のようで、スペースでインデントを入れるとコマンドを入力してもエラーで実行できなくなります。
Makefileの作成が完了したら、アプリのどこかを変更してみてmake deployコマンドでビルドとデプロイが実行出来るか確認しましょう。
デプロイが完了し、アプリの変更が反映されていればMakefaileの設定が反映されています。
おわりに
初めてFirebase Hostingへデプロイだったので各ステップを調べながら行っていたら結構時間がかかりました。Firebase側が分かりやすく手順を紹介してくれますが、分からないところは流さず各ステップで何をしているのかは理解しておいた方が良いと思います。
参考