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

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

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

# 目次
[1. Vercelに手動でデプロイ](#1-vercelに手動でデプロイ)
[2. GitHubActionsを使ったCI/CDパイプラインの設定](#2-github-actionsを使ったcicdパイプラインの設定)
[3. デプロイの確認](#3-デプロイの確認)
[4. さいごに](#4-さいごに)

# 1. Vercelに手動でデプロイ

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

### プロジェクトの作成
ダッシュボードに移動し、New Projectボタンをクリックします。
GitHubリポジトリをVercelに接続します。
インポートするリポジトリを選択し、Importボタンをクリックします。
プロジェクト設定が表示されます。基本的にはデフォルト設定で問題ありませんが、必要に応じて設定を変更します。
Deployボタンをクリックし、デプロイを実行します。
デプロイが成功すると、VercelのダッシュボードでデプロイURLが表示されます。これで、アプリケーションがVercelに手動でデプロイされました。
![スクリーンショット 2024-09-01 20.06.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813857/8b8b2d9c-1f2a-2587-09e2-9280c2f15f75.png)
ここまでの画像撮り忘れてしまいあまり紹介できませんでしたが、簡単だったので問題ないかと思います。

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

# 2. GitHub Actionsを使ったCI/CDパイプラインの設定
### Vercelトークンの取得
GitHub Actionsでデプロイ時に使用する3つのトークンが必要で内2つ確認するだけ。Vercelトークンは取得する必要があるので取得します。

Vercelのダッシュボードで、Settings -> Tokensに移動します。
Create Tokenボタンをクリックし、トークンを作成します。スコープはプロジェクト単位で設定します。
![vercel-token作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813857/db39a78b-c993-70f6-5582-a9eb1363bcb5.png)

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

### GitHubリポジトリにシークレットを追加
GitHubリポジトリの「Settings」 -> 「Secrets and variables」 -> 「Actions」に移動します。
New repository secret 選択し、先ほど取得したトークンを`VERCEL_TOKEN`という名前で追加します。
残り二つのシークレットはVercelで確認できます。
VERCEL_ORG_ID: Vercelの組織ID（Vercelのダッシュボード -> Settings -> Generalで確認可能）
![vercel-id確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813857/121a73f7-9442-fb2d-f48e-0d1c90bf7a98.png)

VERCEL_PROJECT_ID: VercelのプロジェクトID（Vercelのダッシュボード -> Settings -> Generalで確認可能）
![vercel-project-id確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813857/aa8ef4c9-e751-94fc-5fa6-2e078ff3d8d8.png)

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

![github-secrets.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813857/f1212b5f-42f5-c239-3847-d86d0fab5f78.png)
`VERCEL_TOKEN`: Vercelで取得したトークン
`VERCEL_ORG_ID`: Vercelの組織ID
`VERCEL_PROJECT_ID`: VercelのプロジェクトID

2.3 GitHub Actionsワークフローファイルの作成
リポジトリのルートに.github/workflowsディレクトリを作成します。
その中にvercel-deploy.ymlというファイルを作成し、以下の内容を追加します：
```yaml
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タグを入れてみます。
![デプロイ確認用の編集画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813857/6450350d-3438-fef2-810d-9a74e3489827.png)
編集内容をリポジトリにpushします。
![gitadd~push.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813857/d99f257c-1110-eeb9-3cfa-e1323b36cabf.png)
GitHubでリポジトリを確認します。
![デプロイ待ち2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813857/dbc9bad1-9c09-4d08-1b1f-09a71aac2a6a.png)
パワー注入の横が黄色なので現在デプロイ中です。これが赤くなるとエラーでデプロイ失敗なのでこの瞬間ドキドキします。
Actionsに移動するとデプロイの詳細が確認できます。
![デプロイ完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813857/92e6c2e0-228f-d0f7-7638-05f00f953372.png)
Vercelに戻ってプロジェクトのURLを開いてアプリケーションの変更がちゃんと反映されているか確認します。
![デプロイ確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813857/d94ce820-963b-3e01-4444-1456a92c119d.png)

無事にパワーが注入できました。

# 4. さいごに
以上で、Next.jsアプリをVercelにデプロイする方法と、GitHub Actionsを使ったCI/CDパイプラインの構築方法を解説しましたが、簡単な設定しかしていないので是非カスタマイズしてください。