Closed8

VercelのTeamでbuildしようとしたときのお金をかけない方法

yoshiki-0428yoshiki-0428

https://github.com/marketplace/actions/vercel-action

まず非公式?のGitHub Actionのライブラリがあったので使ってみたけど、最新Versionのv25だとちゃんとデプロイはされるが、Actions上で処理が終わらないことが多発。

確かにコメントもしてくれてリッチな感じだけど毎回20分以上待って結果Timeoutなのはつらい。。。

更新がVercel v25で止まっている。。Vercelの最新はv28。やはりVercelの開発速度は並じゃないのでついていくのが大変だ。

yoshiki-0428yoshiki-0428

最終的に出来上がったものがこちら

自分のプロダクトはnext-authを使用していたのでビルド時に VERCEL_URLが必要のため、それを追記している

注意点

  • vercel alias でTeamのScopeを指定しないと正しくaliasが貼られないので注意
  • 末尾に --yes をつけないと一生ReAuthが必要になって処理が通らない
  • next-authを使用している場合はURLを指定する
name: vercel-preview
on:
  pull_request:
  workflow_dispatch:

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
  VERCEL_URL: "${{ github.head_ref }}-yourapps.vercel.app"

jobs:
  preview:
    runs-on: ubuntu-latest
    environment:
      name: preview
      url: ${{ env.VERCEL_URL }}
    steps:
      - name: Find Comment
        uses: peter-evans/find-comment@v2
        id: find-comment
        with:
          issue-number: ${{ github.event.pull_request.number }}
          comment-author: 'github-actions[bot]'
          body-includes: Preview Build
      - name: Create Comment
        uses: peter-evans/create-or-update-comment@v3
        id: comment
        with:
          issue-number: ${{ github.event.pull_request.number }}
          comment-id: ${{ steps.find-comment.outputs.comment-id }}
          edit-mode: replace
          body: |
            Preview Build is started !! 🚀
            URL: [now building...](https://vercel.com)
          reactions: '+1'

      # vercelのデプロイ
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm install -g vercel
      - run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
      - run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
      - id: deploy
        run: echo "url=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT
      - run: vercel alias --token=${{ secrets.VERCEL_TOKEN }} set ${{ steps.deploy.outputs.url }} ${{ env.VERCEL_URL }} --scope=your-scope --yes

      - name: Find Comment
        uses: peter-evans/find-comment@v2
        id: find-comment-2
        with:
          issue-number: ${{ github.event.pull_request.number }}
          comment-author: 'github-actions[bot]'
          body-includes: Preview Build
      - name: Update Comment
        uses: peter-evans/create-or-update-comment@v3
        with:
          issue-number: ${{ github.event.pull_request.number }}
          comment-id: ${{ steps.find-comment-2.outputs.comment-id }}
          edit-mode: replace
          body: |
            Preview Build is completed !! 🚀🚀🚀
            - https://${{ env.VERCEL_URL }}
            - ${{ steps.deploy.outputs.url }}
yoshiki-0428yoshiki-0428

やってみた感想としてはvercelのときと比べてビルド時間が3倍?くらいになったので、個人であればvercelを使うほうが早いし、良いなと思いました。今は諸々6分位かかっています。(SSGの量はほぼない)

yoshiki-0428yoshiki-0428

まあでもこれで1人あたり開発者(n人) x $20 x 12ヶ月 = $240 が浮くと思うと最高だと思います。

このスクラップは2024/03/09にクローズされました