[Vercel]GitHub Actionsを利用して権限を制御する。

サーバーはVercel、ソースコードはNext.jsで動かしていた。

運用中に、Vercelの管理者とソースコードの管理者が別れ、それぞれがアクセスできる権限を分ける必要が出てきた。

今はVercelのGitHub Connectionからリポジトリへのアクセス権限を与えてたので、VercelにログインできればGitHubにアクセスできる状況だった。

これをそれぞれの権限に分けるためにVercelへのデプロイをGitHub Actionsから行うことで、アクセス権限を分けることにした。

目次

VercelのGitHub Actionsを設定する

VercelのGitHub Actionsをするためのファイル作成をします。今回はプレビュー、プロダクションの2種類を作成します。

.github/workflows/preview.yaml

.github/workflows/production.yaml

preview.yaml

このアクションはコードがGitHubブランチにpushされた時に実行されます。

name: Vercel Preview Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches-ignore:
      - main
jobs:
  Deploy-Preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

production.yaml

name: Vercel Production Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches:
      - main
jobs:
  Deploy-Production:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

アクセストークンの作成

https://vercel.com/account/tokens にアクセスします。

Account SettingsページでCreate Tokenする。
わかりやすいTOKEN NAMEをつけて、SCOPEは自分のプロジェクト、EXPIRATIONは任意の値を選択し、Createをクリックします。

作成が完了しました。表示されているTokenの値は必ずコピーして控えてください。

CLIによるVercel Login認証

Vercel CLIをインストールして実行します。

$ yarn global add vercel

インストールが完了したら、vercelへログインします。

vercel login

実行後、何でログインするか聞かれます。私はGitHubログインをしていたので、「Continue with GitHub」を選択します。

ページに飛ばされて、認証が走ります。

Vercelのproject.jsonを生成

新しいVercelプロジェクトを作成します。

$ vercel link

実行するとこのプロジェクトパスで良いか聞かれるので、Yを入力します。

該当するVercelのプロジェクトを選択します。

プロジェクトを確認して、Yを押します。

これがでればOK。

.vercelフォルダが生成され、project.jsonにprojectIdとorgIdが保存されます。

GitHub でシークレットを設定する

VercelへGitHub Actionsしたい対象のGitHubリポジトリへ移動します。

Settingsへアクセスし、Security の中にあるSecrets and variablesをクリックします。

ここでは、VERCEL_TOKEN VERCEL_ORG_ID VERCEL_PROJECT_ID という3つのシークレットを設定します。

VERCEL_TOKENは https://vercel.com/account/tokens で作成したものを使用します。
VERCEL_ORG_IDVERCEL_PROJECT_ID.vercel/project.jsonに定義されたものを設定します。

「New repository secret」を選択して入力後、Add secretすればOKです。

GitHub Actionsを使ってVercelへデプロイする

ここまでで、構成が完了したので、ワークフローを試すことができます。

GitHubにPRを作ります。

そうすると、自動的にPRを認識して、Vercel CLIを使ってPreview Deploymentを作成します。

完了したらこうなる。

View deploymentをクリックすると、プレビュー環境が見れます。


プルリクエストがマージされると、プロダクションビルドが作成され、デプロイされるようになります。

Summary

PRを作るだけでプレビュー環境が自動的にできあがるのはレビューチェックでも重宝しそうですね。

今回は、Vercelサーバーにアクセスする人、ソースコードにアクセスする人の権限を分けたい意図で変更しましたが、CI/CDは構築してて不憫になることはないので最初からこの構成でも良さそうです。

よかったらシェアしてね!
目次