Zenn
🪬

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

2021/05/12に公開
GitHub
Rails
GitHub Actions
Firebase Hosting
tech

概要

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

https://firebase.google.com/docs/hosting/github-integration?hl=ja

手順

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 プロジェクトを選択します: (矢印キーを使用)

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

【4】

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

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

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

【5】

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

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

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

【6】

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

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

=>「y」を入力する。

【7】

? 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

【8】

? 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>.

【9】

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

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

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

【10】

? 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

【11】

? 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 からアクセスして確認する

プルリクを作成して確認

最後に変更されたことがわかるように何か修正して、プルリクを作成した時にデプロイされてプレビューを確認してみる。

参考記事

https://zenn.dev/watarukun/articles/8f3e318bacf97cabf879

Discussion