サーバーは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をクリックします。
![](https://tsukurue.com/wp-content/uploads/2024/06/image-10.png)
作成が完了しました。表示されているTokenの値は必ずコピーして控えてください。
![](https://tsukurue.com/wp-content/uploads/2024/06/image-11.png)
CLIによるVercel Login認証
Vercel CLIをインストールして実行します。
$ yarn global add vercel
インストールが完了したら、vercelへログインします。
vercel login
実行後、何でログインするか聞かれます。私はGitHubログインをしていたので、「Continue with GitHub」を選択します。
![](https://tsukurue.com/wp-content/uploads/2024/06/image-12.png)
ページに飛ばされて、認証が走ります。
![](https://tsukurue.com/wp-content/uploads/2024/06/image-13.png)
![](https://tsukurue.com/wp-content/uploads/2024/06/image-14.png)
Vercelのproject.jsonを生成
新しいVercelプロジェクトを作成します。
$ vercel link
実行するとこのプロジェクトパスで良いか聞かれるので、Yを入力します。
![](https://tsukurue.com/wp-content/uploads/2024/06/image-15.png)
該当するVercelのプロジェクトを選択します。
![](https://tsukurue.com/wp-content/uploads/2024/06/image-16.png)
プロジェクトを確認して、Yを押します。
![](https://tsukurue.com/wp-content/uploads/2024/06/image-17.png)
これがでればOK。
![](https://tsukurue.com/wp-content/uploads/2024/06/image-18.png)
.vercelフォルダが生成され、project.jsonにprojectIdとorgIdが保存されます。
GitHub でシークレットを設定する
VercelへGitHub Actionsしたい対象のGitHubリポジトリへ移動します。
Settingsへアクセスし、Security の中にあるSecrets and variablesをクリックします。
![](https://tsukurue.com/wp-content/uploads/2024/06/image-19-1024x550.png)
ここでは、VERCEL_TOKEN
VERCEL_ORG_ID
VERCEL_PROJECT_ID
という3つのシークレットを設定します。
VERCEL_TOKEN
は https://vercel.com/account/tokens で作成したものを使用します。VERCEL_ORG_ID
VERCEL_PROJECT_ID
は.vercel/project.json
に定義されたものを設定します。
「New repository secret」を選択して入力後、Add secretすればOKです。
![](https://tsukurue.com/wp-content/uploads/2024/06/image-20.png)
GitHub Actionsを使ってVercelへデプロイする
ここまでで、構成が完了したので、ワークフローを試すことができます。
GitHubにPRを作ります。
そうすると、自動的にPRを認識して、Vercel CLIを使ってPreview Deploymentを作成します。
![](https://tsukurue.com/wp-content/uploads/2024/06/image-21.png)
完了したらこうなる。
![](https://tsukurue.com/wp-content/uploads/2024/06/image-22.png)
View deploymentをクリックすると、プレビュー環境が見れます。
![](https://tsukurue.com/wp-content/uploads/2024/06/image-23.png)
プルリクエストがマージされると、プロダクションビルドが作成され、デプロイされるようになります。
Summary
PRを作るだけでプレビュー環境が自動的にできあがるのはレビューチェックでも重宝しそうですね。
今回は、Vercelサーバーにアクセスする人、ソースコードにアクセスする人の権限を分けたい意図で変更しましたが、CI/CDは構築してて不憫になることはないので最初からこの構成でも良さそうです。