【GitHub Actions】Next.js + Firebase Hosting をビルド&デプロイする

GitHub Actions は、最高に便利である。
今回は、Next.js で作った HP を Firebase Hosting に自動デプロイする GitHub Actions を紹介する。

GitHub Actions の構成
workflowの新規作成
GCPの設定
Firebaseの設定
Slack Appの設定
処理実行
まとめ

GitHub Actions の構成

今回、Actions のトリガーは以下の2つを想定している。

main ブランチに push された場合
Contentful で、記事が更新された場合（repository_dispatch：GitHubのWebhookイベントを使用する）

そして、処理の流れは以下の通りである。

リポジトリをチェックアウトする
node環境のセットアップ
yarn install
Google Cloud SDKをセットアップする
envファイルをダウンロードする
yarn build & yarn export（SSG）
Firebase Hosting にデプロイする
Slackにデプロイ完了を通知する

workflowの新規作成

GitHub 上でも、Actions のタブから workflow の template を選択して、新規作成することができる。（とてもわかりやすくて、便利。）ただ、私はローカルのエディタで作成して、GitHub に push を行った。

1.　root ディレクトリに、.github/workflowsフォルダを作成する。（←フォルダ名が「workflow」の場合、Actionsとして認識されないので、注意。私は一度フォルダ名を間違えて、末尾のsを抜かしてしまい、やらかしたw）

$ sudo mkdir -p .github/workflows

2.　任意の名前で設定ファイル(.yml)を作成する。今回は、Firebaseへのデプロイ用だったため、firebase.ymlとした。

$ sudo touch firebase.yml

name: Deploy to Firebase Hosting

on:
  push:
    branches:
      - main
  repository_dispatch:

jobs:
  deploy:
    name: Build & Deploy
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - name: Check out code
        uses: actions/checkout@v2.0.0
      - name: Set up Node
        uses: actions/setup-node@v2.1.2
        with:
          node-version: ${{ matrix.node-version }}
      - name: Get yarn cache
        id: yarn-cache
        run: echo "::set-output name=dir::$(yarn cache dir)"
      - uses: actions/cache@v2
        with:
          path: ${{ steps.yarn-cache.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-
      - name: yarn install
        if: steps.yarn-cache.outputs.cache-hit != 'true'
        run: yarn install --frozen-lockfile
      - name: Set up gcloud CLI
        uses: google-github-actions/setup-gcloud@master
        with:
          version: 'latest'
          service_account_email: ${{ secrets.GCP_SA_EMAIL }}
          service_account_key: ${{ secrets.GCP_SA_KEY }}
          export_default_credentials: true
      - name: Download local environment variables
        run: |
          gsutil cp gs://<---storage path---> .env
      - name: yarn build & export
        run: yarn export
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
      - name: Notification to Slack
        env:
          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
        uses: pullreminders/slack-action@master
        with:
          args: ‘{\”channel\”:\”<--channelId-->\",\"text\”:\”Firebaseへのデプロイが完了しました\”}’

特筆しておくべきところは特にないが、actions/cache を使って、キャッシュを再利用することでビルドを効率的にしている。

依存関係をキャッシュしてワークフローのスピードを上げる参照

また、設定ファイルの中に出てくる${{ secrets.XXXX }} はGitHubのSettings > Secrets の Repository secrets に登録しておく必要がある。

GCP_SA_EMAIL
GCP_SA_KEY
FIREBASE_TOKEN
SLACK_BOT_TOKEN

以降で、設定する項目の取得方法を紹介する。

GCPの設定

setup-gcloud GitHub Action 参照

1. GitHubActions用のサービスアカウントを発行する

基本的には、上記のリンク先の操作方法を参照して欲しい。ただ、ロール設定に関しては、今回 Cloud Storageの読み取りができればいいので、その権限のみを付与する。

f:id:serip39:20201219203624p:plain

2. サービスアカウントのキーを発行する

以下のようなjsonファイルがダウンロードされる。

{
  "type": "service_account",
  "project_id": "project-id",
  "private_key_id": "key-id",
  "private_key": "-----BEGIN PRIVATE KEY-----\nprivate-key\n-----END PRIVATE KEY-----\n",
  "client_email": "service-account-email",
  "client_id": "client-id",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://accounts.google.com/o/oauth2/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/service-account-email"
}

3. GitHub の Secrets に登録する

GCP_SA_EMAIL は、上記のclient_emailを GitHub の Secrets にコピーするだけでいい。

GCP_SA_KEY は、ダウンロードしたサービスアカウントキーを base64 エンコードした文字列をいれる必要があるので、以下のコマンドを実行する。

$ cat service-account-key.json | base64 | pbcopy

上記コマンドを実行することで、クリップボードにエンコードされた文字列が保存されるので、あとは GitHub の Secrets に貼り付けるだけでいい。

Firebaseの設定

GitHub Action for Firebase を参照

GCP_SA_KEY を取得しているので、サービスアカウントの権限を追加することで、FIREBASE_TOKEN は不要であるが、今回Cloud Storageの権限しか付与しなかったので、FIREBASE_TOKEN を取得するようにした。

ローカルで、以下のコマンドを実行する。

$ firebase login:ci

✔  Success! Use this token to login on a CI server:
1//****
Example: firebase deploy --token "$FIREBASE_TOKEN"

ブラウザが開き、ログインすることで、トークンが発行される。この FIREBASE_TOKEN を GitHub の Secrets に登録する。

Slack Appの設定

Post Slack messages 参照

1. ワークスペースで利用するボットの作成

2. GitHub の Secrets に登録する

Slack App の OAuth & Permissions にある OAuth Tokens for Your Team の Bot User OAuth Access Token の値をコピーして、GitHub の Secrets に登録する。

3. チャンネルIDを取得する

アプリの場合、Slack Bot のメッセージを投稿したいチャンネルを選択して、右クリック > リンクをコピーをする。

https://XXXX.slack.com/archives/C0154PW1XUM

末尾の「C0154PW1XUM」がチャンネルIDとなる。

これで全ての設定が完了である。

処理実行

実際に、mainブランチに push して動作確認を行う。

実行結果に関しては、GitHub の Actions で確認することができる。エラーが発生した場合は、各実行項目でのエラー内容なども確認できるので、内容に応じて修正を行う。

まとめ

GitHub Actions の設定方法を紹介した。
正直、これが最適なのかはまだわかっていない。今後も、より最適な方法を模索していきたい。

それでは、ステキな開発ライフを。

7839

雑草魂エンジニアブログ