GitHub Actionsを使ってfirebase hostingにdeployをしたい
この記事は最終更新日から1年以上が経過しています。
firebaseにデプロイする時に毎回ローカルでコマンドを叩いていたのですが、
さすがに面倒だと思い、業務でよく使っているGitHub Actionsを使用してデプロイすることにいたしました。
まずは既存のfirebaseホスティングプロジェクトに設定をしていきます。
$ firebase init hosting:github
上記のコマンドを叩くとローカルサーバーが立ち上がり「Firebase CLI」ページが立ち上がりGitHubにloginできたと表示されます。
その後ターミナルに戻ると色々質問をされていきます。
後に編集できるのでenterを連打で進めていきます。
? For which GitHub repository would you like to set up a GitHub workflow? (forma
t: user/repository) hoge/hoge
？どのGitHubリポジトリにGitHubワークフローを設定しますか？ （forma
t：ユーザー/リポジトリ）hoge/hoge
✔ Created service account github-action-XXXXXX with Firebase Hosting admin permissions.
✔ Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_XXXXXXXX.
i You can manage your secrets at https://github.com/xxxxx/xxxxx/settings/secrets.
? Set up the workflow to run a build script before every deploy? Yes
? What script should be run before every deploy? hoge（実行するスクリプト）
？すべてのデプロイの前にビルドスクリプトを実行するようにワークフローを設定しますか？はい
？すべてのデプロイの前にどのスクリプトを実行する必要がありますか？ hoge（実行するスクリプト）
✔ Created workflow file /XXX/XXXX/XXXXX/.github/workflows/firebase-hosting-pull-request.yml
? Set up automatic deployment to your site's live channel when a PR is merged? Yes
✔作成されたワークフローファイル/XXX/XXXX/XXXXX/.github/workflows/firebase-hosting-pull-request.yml
？ PRがマージされたときに、サイトのライブチャネルへの自動展開を設定しますか？ Yes
? What is the name of the GitHub branch associated with your site's live channel
? master
？サイトのライブチャネルに関連付けられているGitHubブランチの名前は何ですか
? master
✔ Created workflow file /XXX/XXXX/XXXXX/.github/workflows/firebase-hosting-merge.yml
✔作成されたワークフローファイル/XXX/XXXX/XXXXX/.github/workflows/firebase-hosting-merge.yml
i Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/XXXXXXXX
i 必要なアクション：Firebase CLI GitHub OAuthアプリの認証を取り消すには、次のURLにアクセスしてください。
https://github.com/settings/connections/applications/XXXXXXXX
i Action required: Push any new workflow file(s) to your repo
i 必要なアクション：新しいワークフローファイルをリポジトリにプッシュします
i Writing configuration info to firebase.json...
i firebase.jsonに構成情報を書き込んでいます...
i Writing project information to .firebaserc...
i プロジェクト情報を.firebasercに書き込む...
✔ Firebase initialization complete!
✔ Firebaseの初期化が完了しました！初期設定が完了すると2点ファイルが造られていました。
.github/workflows/firebase-hosting-merge.yml はプルリクがマージされた時に実行されるアクションで
.github/workflows/firebase-hosting-pull-request.yml はプルリクが作られた時に実行されるアクションです。
では最初に「firebase-hosting-pull-request.yml」を編集していきます。
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
build_and_preview:
if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: 'hoge（実行するスクリプト）'
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_XXXXXXXX }}'
projectId: XXXXXX
↑は初期状態でデプロイ時に実行したいActionを- run:の項目に記載していきます。
npm install とnpm run buildをデプロイ時に実行したいので- run:の項目を下記のように編集します。
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
build_and_preview:
if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: npm ci && npm run build
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_XXXXXXXX }}'
projectId: XXXXXXではdevelopへ修正した内容をpushしdevelopからmasterにプルリクエストを作成します。
すると自動でGitHub Actionsが起動しますがエラーになりました。
エラーの内容はデータベースに認証エラーで接続できないといった内容でした。なのでGitHub Actionsに環境変数を渡さないといけません。
GitHubのリポジトリの「settings」ページの「secrets」に環境変数を登録しなくてはなりません。環境変数の登録はadminユーザーじゃないとできませんでした。
環境変数のキーとバリューをそれぞれ入れていきます。
私の場合は下記のようになりました。
では「firebase-hosting-pull-request.yml」を編集していきます。
env:に環境変数を追加していきます。
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
build_and_preview:
if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: npm ci && npm run build
env:
FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
FIREBASE_PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}
FIREBASE_AUTH_DOMAIN: ${{ secrets.FIREBASE_AUTH_DOMAIN }}
FIREBASE_STORAGE_BUCKET: ${{ secrets.FIREBASE_STORAGE_BUCKET }}
FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.FIREBASE_MESSAGING_SENDER_ID }}
FIREBASE_APP_ID: ${{ secrets.FIREBASE_APP_ID }}
FIREBASE_MEASUREMENT_ID: ${{ secrets.FIREBASE_MEASUREMENT_ID }}
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_XXXXXXXX }}'
projectId: XXXXX
変更点をコミットしpushしました。
再びGitHub Actionsが起動しました。3分ほどでbuildが終わりなんと下のようにfirebaseのプレビュー チャネル(ベータ版)も作成されておりマージ前に動作確認ができます。
「firebase-hosting-merge.yml 」も同様に修正します。
name: Deploy to Firebase Hosting on merge
'on':
push:
branches:
- master
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: npm ci && npm run build
env:
FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
FIREBASE_PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}
FIREBASE_AUTH_DOMAIN: ${{ secrets.FIREBASE_AUTH_DOMAIN }}
FIREBASE_STORAGE_BUCKET: ${{ secrets.FIREBASE_STORAGE_BUCKET }}
FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.FIREBASE_MESSAGING_SENDER_ID }}
FIREBASE_APP_ID: ${{ secrets.FIREBASE_APP_ID }}
FIREBASE_MEASUREMENT_ID: ${{ secrets.FIREBASE_MEASUREMENT_ID }}
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_XXXXX }}'
channelId: live
projectId: XXXXXはいこれで完了です。
変更点をコミットしpushしました。
再度GitHub Actionsが起動しbuildが終わるのを待ちます。
マージボタンが緑になったのでmasterにマージをします。
再度GitHub Actionsが起動し無事にdeploy完了していました。
成功するとfirebaseのhostingの画面で下のようになっております。
以上、GitHub Actionsを使ってfirebase hostingにdeployをする過程をご紹介しました。
お読みいただきありがとうございました。