【Nuxt4 + Yarn】CircleCIからVercelへ自動デプロイする方法

jintavue.js・その他 
Nuxt4（Yarn使用）アプリを CircleCIでテスト → 成功したらVercelへ自動デプロイする構成。
--- 🎯 全体構成
- Nuxt4（Dockerなし）
- CircleCIでCI構築
- developブランチでのみ、test, buildジョブを実行
- テスト成功後、githubでプルリク
- mainブランチへマージされるとVercelにて自動デプロイ
- ✅ 前提条件
- Nuxt4アプリがGitHubにある
- Yarnを使用
- VercelとGitHubは連携済み
- CircleCIにリポジトリ接続済み---# 
---# STEP 1：Vercelは通常、pushすると即デプロイするので、ブランチを分けて、CI成功後のみデプロイにした。

🎯 Vercelのブランチと環境の関係

Vercelには3つの環境がある：

環境	いつ使われる？
Production	本番ブランチ
Preview	本番以外のブランチ
Development	ローカル連携用

vercelではどのブランチでも、デプロイ状態(URL発行される)になり、各ブランチの状態を見たり、１つ前のバージョン(Instant Rollback)に戻したりできる。

Promoteは、Preview版をProduction版にできるので、mainブランチにマージしていなくても、本番環境の設定にできる。

今回は、ステージング環境とかはないので、Build and Deployment -> Ignored Build Step で

only build productionとした。本番ブランチ以外はvercelでデプロイしない。

CircleCI設定ファイル

.circleci/config.yml

version: 2.1

jobs:
  # ----------------------------------------
  # テストジョブ
  # 目的: コードの品質チェック（型・構文エラーの検出）
  # ----------------------------------------
  test:
    docker:
      - image: cimg/node:22.12
    steps:
      - checkout

      # node_modulesをキャッシュから復元（yarn.lockが同じなら再インストール不要）
      - restore_cache:
          keys:
            - v1-deps-{{ checksum "yarn.lock" }}

      # --frozen-lockfile: yarn.lockと差異があればエラーにする（意図しない更新防止）
      - run:
          name: Install dependencies
          command: yarn install --frozen-lockfile

      # キャッシュ保存（次回のCI実行を高速化）
      - save_cache:
          key: v1-deps-{{ checksum "yarn.lock" }}
          paths:
            - node_modules

      # TypeScript型チェック: 型エラーがあればここで検出
      - run:
          name: Type check
          command: yarn nuxi typecheck

  # ----------------------------------------
  # ビルドジョブ
  # 目的: 本番用ビルドが成功するか確認
  # テスト通過後にのみ実行される
  # ----------------------------------------
  build:
    docker:
      - image: cimg/node:22.12
    steps:
      - checkout

      - restore_cache:
          keys:
            - v1-deps-{{ checksum "yarn.lock" }}

      - run:
          name: Install dependencies
          command: yarn install --frozen-lockfile

      - run:
          name: Build
          command: yarn build

workflows:
  ci:
    jobs:
      - test:
          filters:
            branches:
              only: develop # developブランチのみ実行
      - build:
          requires:
            - test # テスト通過後にビルド実行
          filters:
            branches:
              only: develop

✔ test → build → deploy の順番

テスト失敗したらデプロイされない。

✔ mainブランチのみ本番反映

filters:
  branches:
    only: main

これで本番の安定性を確保。

✔ Docker不要

今回は：

  • Docker未使用
  • Nuxt4 + Yarnのみ

Q. デプロイ回数で課金される？

Vercel無料枠は主に：

  • ビルド時間
  • 帯域
  • サーバーレス実行時間

で制限される。dashbordにもカウントが出てる。

タグ: