Open1

Vercel で最新 main の Preview を見る

funwarioisiifunwarioisii

Vercel で最新の main の preview を作るのに困ったのでその時のメモ

最初はstaging branch を作成し、main から staging に向けて PR を出しておくことで、
最新の Preview を得ていた(つもりだった)

ただ、よく見ると Vercel では main branch からビルドしたものを production として扱う設定をしていたので、実は Preview になっておらず本番そのものだった!!

そこで、次の2つを考えた。

  1. 各 feature branch の作成後、staging にマージ。問題なければ main にマージ。
  2. (今まで通り)各 feature branch からは main にマージ。main から staging へマージ。

(1) のほうが安全そうに見えつつ、 staging -> main でマージすることを忘れる危険性があった。
(というか以前そういう運用をしていたリポジトリで何度も忘れた…)

(2) は feature branch の時点でQA できるのでまぁこれでいいかとなった。
そこで、以下の GitHub Actions を書いて自動で実行されるようにした

name: Update staging branch

on:
  push:
    branches:
      - main

jobs:
  update-staging-branch:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          fetch-depth: 0

      - name: Configure Git
        run: |
          git config --global user.email "action@github.com"
          git config --global user.name "GitHub Action"

      - name: Update staging branch
        run: |
          git fetch origin staging:staging
          git checkout staging
          git merge origin/main --no-edit
          git push origin staging

Vercel は基本プランだと直列にビルドが実行されるので、

  1. feature の preview が作られる
  2. main の prewview が作られる
  3. staging の prewview が作られる

という順番で Preview が作成される。
(1) で Preview の作成を待たずに merge すると、もちろん (2) が実行されるまで待つ必要があり、
main への merge 後は (2) のため、(3) までしばらく時間がかかる。

$50 で Concurrent Build があるので、人数が増えて feature branch のビルドが開発のボトルネックになったら課金しても良いかもしれない。