CircleCIを使用してVercelにデプロイする

Vercelにはgit pushを検知してDeployする仕組みがあるが、lintやtestしてからのデプロイはgit push検知の状態ではできないのでvercelのコマンドを使用してCDツールに組み込む。

https://vercel.com/cli

準備

vercelのgit integrationを切っておく。

Vercelの個人設定からCircleCIで使用するTokenを生成する。

Vercelで生成したTokenをCircleCIの環境変数にセットする。

実装

yarn add でvercelコマンドを準備し、Scriptを組んでおくと楽に設定できる。

yarn add -D vercel

// package.json
{
  "scripts": {
    "deploy": "vercel --token $VERCEL_TOKEN --prod --confirm"
  }
}

--confirm はデプロイするための質問をスキップさせることができる。

https://vercel.com/docs/cli#commands/overview/unique-options/confirm

.circleci/config.yml に設定を書く。

# .circleci/config.yml
version: 2.1

orbs:
  node: circleci/node@4.7

jobs:
  deploy:
    working_directory: ~/[ProjectName]
    docker:
      - image: circleci/node:latest
    steps:
      - checkout
      - run:
          name: install
          command: yarn install
      - run:
          name: deploy
          command: yarn deploy

workflows:
  version: 2
  main:
    jobs:
      - deploy:
          filters:
            branches:
              only:
                - main

vercel --token $VERCEL_TOKEN --prod --confirm を実行すると現在のディレクトリがプロジェクト名として認識されデプロイされるので、 ymlファイルの working_directory: の [ProjectName] の部分をきちんと設定すれば意図したプロジェクト名でデプロイすることができる。

CIの実行結果に本番用のURLが出力されるので、そこからアクセスすることも可能になっている。