Next.jsアプリをVercelにデプロイするCI/CD設定方法

Posted at 2024-09-01

はじめに

こんにちは、今回はNext.jsで作成したアプリケーションをVercelにデプロイし、GitHub Actionsを使ってCI/CDを構築したので紹介します。当方、自身のポートフォリオ作成のため、学習の意味も込めてCI/CD構築しました。慣れないCI/CDの構築でしたので間違いなどあれば教えていただけると嬉しいです。

前提

主にCI/CDを設定することを目的にしてますので、アプリやGitHubリポジトリの作成の説明などはしません。
単純なデプロイするワークフローのみを実装しています。GitHub ActionsやVercelに慣れていない初学者向けです。

1. Vercelに手動でデプロイ

Vercelアカウントの作成

まず、Vercelの公式サイト（ https://vercel.com/ ）にアクセスし、アカウントを作成します。GitHubアカウントを使用してサインアップするのが簡単です。

プロジェクトの作成

ダッシュボードに移動し、New Projectボタンをクリックします。
GitHubリポジトリをVercelに接続します。
インポートするリポジトリを選択し、Importボタンをクリックします。
プロジェクト設定が表示されます。基本的にはデフォルト設定で問題ありませんが、必要に応じて設定を変更します。
Deployボタンをクリックし、デプロイを実行します。
デプロイが成功すると、VercelのダッシュボードでデプロイURLが表示されます。これで、アプリケーションがVercelに手動でデプロイされました。

ここまでの画像撮り忘れてしまいあまり紹介できませんでしたが、簡単だったので問題ないかと思います。

Vercelを使うとこんなに簡単にデプロイできるんですね。すごいです。

2. GitHub Actionsを使ったCI/CDパイプラインの設定

Vercelトークンの取得

GitHub Actionsでデプロイ時に使用する3つのトークンが必要で内2つ確認するだけ。Vercelトークンは取得する必要があるので取得します。

Vercelのダッシュボードで、Settings -> Tokensに移動します。
Create Tokenボタンをクリックし、トークンを作成します。スコープはプロジェクト単位で設定します。

作成したトークンはコピーしておきます。

GitHubリポジトリにシークレットを追加

GitHubリポジトリの「Settings」 -> 「Secrets and variables」 -> 「Actions」に移動します。
New repository secret 選択し、先ほど取得したトークンをVERCEL_TOKENという名前で追加します。
残り二つのシークレットはVercelで確認できます。
VERCEL_ORG_ID: Vercelの組織ID（Vercelのダッシュボード -> Settings -> Generalで確認可能）

VERCEL_PROJECT_ID: VercelのプロジェクトID（Vercelのダッシュボード -> Settings -> Generalで確認可能）

それぞれをGitHub secretsに追加します。

VERCEL_TOKEN: Vercelで取得したトークン
VERCEL_ORG_ID: Vercelの組織ID
VERCEL_PROJECT_ID: VercelのプロジェクトID

2.3 GitHub Actionsワークフローファイルの作成
リポジトリのルートに.github/workflowsディレクトリを作成します。
その中にvercel-deploy.ymlというファイルを作成し、以下の内容を追加します：

name: Deploy to Vercel

# mainブランチにpushをトリガーにする
on:
  push:
    branches:
      - main 

# ジョブを定義
jobs: 
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Check out the code
        uses: actions/checkout@v3   # リポジトリのコードをクローンする

      - name: Set up Node.js
        uses: actions/setup-node@v3 # node.jsをセットアップする
        with:
          node-version: '20'        # nodeのバージョン20を指定

      - name: Install dependencies
        run: npm install            # 依存関係をインストール

      - name: Build Next.js project
        run: npm run build          # ビルドする

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25 # Vercelにデプロイする。
        with:                            # with以降に必要なパラメータを渡す
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}

参考サイト：
https://github.com/amondnet/vercel-action

ワークフローの実行と確認

.github/workflows/vercel-deploy.ymlファイルをリポジトリにコミットしてプッシュします。
GitHubリポジトリの「Actions」タブに移動し、ワークフローの実行ステータスを確認します。すべてのステップが正常に完了すれば、デプロイが成功です。

3. デプロイの確認

変更したコードをmainブランチにpushしたらちゃんと反映されるか確認します。
src/app/page.tsxのNext.jsのイメージタグを削除して、h1タグを入れてみます。

編集内容をリポジトリにpushします。

GitHubでリポジトリを確認します。

パワー注入の横が黄色なので現在デプロイ中です。これが赤くなるとエラーでデプロイ失敗なのでこの瞬間ドキドキします。
Actionsに移動するとデプロイの詳細が確認できます。

Vercelに戻ってプロジェクトのURLを開いてアプリケーションの変更がちゃんと反映されているか確認します。