GitHubのプルリクで、ReactアプリをFirebase Hostingへデプロイしてプレビューを確認する

概要

2020年の10月にGitHub ActionsとFirebase Hostingの統合でGitHubのPRに対して、プレビューをデプロイして確認できるようになりました。

Deploy to live & preview channels via GitHub pull requests | Firebase

手順

Firebaseでプロジェクトを作成する

Firebaseへログインしてプロジェクトを作成する
Analyticsの設定はどちらでもいいがONとした

Firebase Hostingにデプロイする

メニューからHosting を選択し、「始める」をクリックし、手順に沿って進めていく
- 「Firebase JavaScript SDK をウェブアプリに追加する手順も表示する」についてはOFFとした
firebase initコマンドを実行して設定を進める

【1】

Which Firebase CLI features do you want to set up for this folder?
Press Space to select features, then Enter to confirm your choices.
(Press <space> to select, <a> to toggle all, <i> to invert selection)

========== 翻訳 ==========
このフォルダにどのFirebaseCLI機能を設定しますか？スペースキーを押して機能を選択し、Enterキーを押して選択を確認します。（<space>を押して選択し、<a>を押してすべてを切り替え、<i>を押して選択を反転します）

=> スペースキーでHostingを選んでエンターで決定します

【2】

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

❯ 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プロジェクトに関連付けましょう。 firebase use –addを実行すると、複数のプロジェクトエイリアスを作成できますが、ここではデフォルトのプロジェクトを設定するだけです。

❯ 既存のプロジェクトを使用する新しいプロジェクトを作成する Firebaseを既存のGoogleCloudPlatformプロジェクトに追加しますデフォルトのプロジェクトを設定しないでください

=> 先ほどプロジェクトを作成したので、「既存のプロジェクトを使用する」を選択

【3】

? Select a default Firebase project for this directory: (Use arrow keys)

========== 翻訳 ==========
このディレクトリのデフォルトのFirebaseプロジェクトを選択します:(矢印キーを使用）

=> 先ほど作成したプロジェクトを選択する

【3】

? What do you want to use as your public directory? （public）

========== 翻訳 ==========
パブリックディレクトリとして何を使用しますか？

=> 公開用のディレクトリを選択します。create-react-appはbuildしたらbuild というディレクトリに静的ファイルが生成されるので build と入力する。

【4】

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

========== 翻訳 ==========
シングルページアプリとして構成しますか（すべてのURLを/index.htmlに書き換えます）？

=> SPAなので「y」を入力

【4】

? Set up automatic builds and deploys with GitHub? (y/N)

========== 翻訳 ==========
GitHubで自動ビルドとデプロイを設定しますか？

=> 「y」を入力

【5】

? File public/index.html already exists. Overwrite? (y/N)

========== 翻訳 ==========
ファイルpublic / index.htmlはすでに存在します。上書きしますか？

=> 「N」を入力。FirebaseCLIを介してGitHubにログインします。ブラウザにリダイレクトされて成功したことが確認できたらターミナルへ戻ります。

i  Skipping write of public/index.html

i  Detected a .git folder at "プロジェクトpath"
i  Authorizing with GitHub to upload your service account
	 to a GitHub repository's secrets store.

Visit this URL on this device to log in:
<https://github.com/login/oauth/authorize?client_id=>....

Waiting for authentication...

✔︎  Success! Logged into GitHub as yukimasa

【6】

? For which GitHub repository would you like to set up a GitHub workflow? 
(format: user/repository) (ユーザー名/リポジトリ名)

=> 表示されているリポジトリが正しければエンターを押し、サービスアカウントの設定ができるのを待つ

✔︎  Created service account github-action-355110659 with Firebase Hosting admin permissions.
✔︎  Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_PROJECT.
i  You can manage your secrets at <https://github.com/ユーザー名/リポジトリ名/settings/secrets>.

【7】

? Set up the workflow to run a build script before every deploy? (y/N)

========== 翻訳 ==========
すべてのデプロイの前にビルドスクリプトを実行するようにワークフローを設定しますか？

=> 事前にビルドが必要になるので「y」を入力する。

【7】

? What script should be run before every deploy? (y/N)

========== 翻訳 ==========
すべてのデプロイの前にどのスクリプトを実行する必要がありますか？

=> yarn install && yarn build を入力する

✔︎  Created workflow file ディレクトリpath/.github/workflows/firebase-hosting-pull-request.yml

【8】

? Set up automatic deployment to your site's live channel when a PR is merged? (Y/n)

========== 翻訳 ==========
PRがマージされたときに、サイトのライブチャネルへの自動展開を設定しますか？

=> 今回は設定しないので「N」を入力。

i  Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
<https://github.com/settings/connections/applications/1111111>
i  Action required: Push any new workflow file(s) to your repo

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔︎  Firebase initialization complete!

設定が終わると以下のファイルが作成されていることが確認できる
- .firebaserc
- .github/workflows/firebase-hosting-pull-request.yml
- firebase.json
firebase deployでデプロイする
- デプロイが完了したら表示されているURLからアクセスして確認する