DEV Community

Yuta Goto
Yuta Goto

Posted on

2

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

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

https://vercel.com/cli

準備

vercelのgit integrationを切っておく。

vercel git repository setting

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

Vercel Token

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

CircleCI Env

実装

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

yarn add -D vercel
Enter fullscreen mode Exit fullscreen mode
// package.json
{
  "scripts": {
    "deploy": "vercel --token $VERCEL_TOKEN --prod --confirm"
  }
}
Enter fullscreen mode Exit fullscreen mode

--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
Enter fullscreen mode Exit fullscreen mode

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

CICD

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

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started