implの藤谷です。
gitubActionsでvercelとのcdciパイプラインを構築し、nextjsの自動デプロイを実装します。
gitリポジトリ作成
create-next-app
まず、gitリポジトリ管理下でnextアプリケーションを作成します。
リポジトリ名は、「vercel-githubactions」にします。
vercel-githubactionsはdefaultブランチをdevelopに変更し、mainブランチをを別で切っています。
npx create-next-app .
Vercel
Vercelに手動デプロイ
vercelを利用してnextアプリケーションをデプロイします。
本記事の主題とは逸れる為、デプロイ手順の解説は省きます。
下記がデプロイ後のvercel画面になります。
CDCIで利用する値の取得
githubActionsのymlファイルで使用する値を取得します。vercelからは「Tokens、projectId、orgId」の3つが必要になります。
Tokensの取得
vercelアカウントのtokenを取得します。
Settings > Tokens > Create Token でtokenを作成します。
orgIdとprojectIdの取得
二つの値はVercel cliから取得します。
下記のコマンドをvercel-githubactions内で入力します。
$ yarn global add vercel
$ vercelvercelコマンド実行でcliからアプリのデプロイが実行されてプロジェクトに /.vercelが作成されるので、/.vercel/project.jsonを確認します。
※ 実際の値は伏せています。
{"projectId":"~projectIdの値","orgId":"~orgIdの値"}以上で、vercel側での設定は完了です。
Secretsと/workflows/main.ymlの設定
Secrets設定
リポジトリのSettingから、Secrets and Variables > Actions から、Repository secretsに下記の四つを設定します。
- vercel-token
- project-id
- org-id
- github accessToken
/workflows/main.ymlの定義
リポジトリのActionsから、.github/workflows/main.ymlを作成します。
cdciワークフローに関する設定は、main.ymlで記述します。
name: deployToVercel
// 1
on:
push:
branches:
- main
// 2
jobs:
build_and_deploy:
// 3
runs-on: ubuntu-latest
steps:
// 4
- name: checkout code
uses: actions/checkout@v2
// 5
- name: setup nodejs
uses: actions/setup-node@v2
with:
node-version: 16
// 6
- name: yarn install
run: yarn install
// 7
- name: run tests
run: yarn lint
// 8
- name: build
run:
yarn build
// 9
- name: deploy
uses: amondnet/vercel-action@v20
with:
vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
github-token: ${{ secrets.ACCESS_TOKEN_GITHUB }}- onで自動デプロイのトリガを設定
今回は、mainブランチにマージされた際にパイプラインが実行される - jobsで、パイプライン内で実行する処理を順番に定義する
- プロセスを走らせるためのosを指定する
- usesで使用するライブラリを指定し実行する。actions/checkout@v2でチェックアウトを行う
- nodev16のインストールを行う
- yarnのインストールを行う
- yarnを使用した自動テストを行う
- yarnを使用したnextjsのbuildを行う
- amondnet/vercel-action@v20を使用したデプロイを行う。
この時Secretsに設定した値が必要になるので、with配下に `${{ secrets.KeyName }}`で呼び出して使用する。
以上のymlで、CDCIの要件に必要なワークフローを実行します。
検証
vercelから提供されたドメインにアクセスして、変更前の状態を確認します。
vercel-githubactions.vercel.app
次に、developで差分を作るための変更をします。
真ん中のNext.js13ロゴ部分をコメントアウトして画面から消します。
ローカルでの変更が確認できたので、この差分をgithubActionsを使用してvercelにデプロイします。
$ git add page.tsx
$ git commit -m "to vercel"
$ git push origin develop
$ git checkout main
$ git pull origin main
mainブランチへのマージが行われたことで、ワークフローが実行されます。
↓
処理が完了し、自動でテストからデプロイまで行われています。
デプロイ後のVerdelのアプリドメインへアクセスして確認します。
変更後のソースコードがVercelに反映されています。
CDCI構築完了です。
終わりに
今回は以上になります。
ここまで読んでいただき、ありがとうございました。