レビューのためPRをデプロイ

はじめに

フロントのコードのPRが立つた度に、そのコードをローカルに落として確認を行なうと、レビューの負荷が高くなってしまいます。
そのため、本サイトではGitHub actionsを使用して、PRごとにデプロイを行なうようにしています。今回はそのことについて書いていきます。

Github Actions の workflow

まず最初に、どのようなワークフローになっているかです。これを上から解説していきます。(説明のため一部割愛しています)

name: deploy

on:
  pull_request:
    branches:
      - main
jobs:
  cd:
    runs-on: ubuntu-latest
    env:
      CI_CACHE: 1

    steps:
      - name: Checkout
        uses: actions/checkout@master

      - name: Setup node env
        uses: actions/setup-node@v2.1.5
        with:
          node-version: 15

      - name: Cache node_modules
        uses: actions/cache@v2.1.6
        with:
          path: ~/.npm
          key: ${{ env.CI_CACHE }}-main-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ env.CI_CACHE }}-main-

      - name: Install dependencies
        run: npm ci

      - name: Setup gcloud environment
        uses: google-github-actions/setup-gcloud@v0.2.1
        with:
          service_account_key: ${{ secrets.SERVICE_ACCTOUN_CREDENTIALS }}

      - name: build
        run: npm run generate

      - name: set env
        run: echo "version=$(echo ${GITHUB_REF} | sed -e 's/refs\/pull\///g' | tr '/' '-')" >> $GITHUB_ENV

      - name: GAE deploy for dev
        env:
          PROJECT_ID: ${{ secrets.DEV_PROJECT_ID }}
        run: |
          gcloud app deploy app.yaml \
          --project "${PROJECT_ID}" --quiet --no-promote \
          --version "${version}"

      - name: nortificate to PR
        uses: actions/github-script@v4.0.2
        env:
          PROJECT_ID: ${{ secrets.DEV_PROJECT_ID }}
        with:
          github-token: ${{secrets.GITHUB_TOKEN}}
          script: |
            github.issues.createComment({
              issue_number: context.payload.pull_request.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: "デプロイが完了しました。 問題なければレビュアーにメンションを付けてレビュー依頼をして下さい " +
              `https://${process.env.version}-dot-default-dot-${process.env.PROJECT_ID}.an.r.appspot.com`,
            })

workflow のタイミング

on:
  pull_request:
    branches:
      - main

まずworkflowのタイミングです。上記のように記述することでこのworkflowのタイミングを限定できます。

今回のタイミングは main ブランチへの PR が立ったとき(reopen も含む)・PR を立てているブランチのコードの更新が行なわれたとき。となっています。

デプロイ準備

deployするまでにやっていることは、普通のnode + GCPのプロジェクトと変わりはありません。 チェックアウトして、ビルドして、gcloudの初期化を行なっています。

PR ごとのバージョン作成

今回の肝です。まずPRごとに一意のURLにする必要があります。そのため、以下のようなスクリプトでPR情報から環境変数を作成します。

- name: set env
  run: echo "version=$(echo ${GITHUB_REF} | sed -e 's/refs\/pull\///g' | tr '/' '-')" >> $GITHUB_ENV

GITHUB_REF 環境変数には、PRの番号が1なら refs/pull/1/merge といった内容の文字列が入っています。 これを sed -e 's/refs\/pull\///g' | tr '/' '-' に通すと、1-merge という文字列になります。

github actionsでは、環境変数を設定するさいは下記のような構文になるため、上記のスクリプトで環境変数 version に ${pr-number}-merge という文字列が入ります。

echo "環境変数名=変数の内容" >> $GITHUB_ENV

デプロイ

PRごとの一意のバージョンも決定できたのでデプロイするだけです。先程作成した環境変数をversionに指定してあげてデプロイします。

run: |
  gcloud app deploy app.yaml \
  --project "${PROJECT_ID}" --quiet --no-promote \
  --version "${version}"

PR への通知

CIが終わるたびに、GCPコンソールに行き生成されたURLを探すのは面倒です。そのため、PRにURLを通知をすることにしています。 versionを指定してデプロイしているため、生成されたURLは自明です。なので、そのURLをコメントしてあげています。

- name: nortificate to PR
  uses: actions/github-script@v4.0.2
  env:
    PROJECT_ID: ${{ env.DEV_PROJECT_ID }}
  with:
    github-token: ${{secrets.GITHUB_TOKEN}}
    script: |
      github.issues.createComment({
        issue_number: context.payload.pull_request.number,
        owner: context.repo.owner,
        repo: context.repo.repo,
        body: "デプロイが完了しました。 問題なければレビュアーにメンションを付けてレビュー依頼をして下さい " +
        `https://${process.env.version}-dot-default-dot-${process.env.PROJECT_ID}.an.r.appspot.com`,
      })

これで完璧です。