Next.jsプロジェクトをGitHub ActionsでVercelに自動デプロイさせよう！

はじめに

本記事では、github actionsを使ってvercelに対して自動デプロイを行う手順をハンズオン形式でご紹介したいと思います！

手順

1.Next.jsで環境構築する

まずは、以下のコマンドでNext.jsの環境構築をしましょう。
今回はturbopackで行いますが、それ以外でも問題ないはずです（未検証）。

環境構築

npx create-next-app --example with-turbopack

コマンド実行時、プロジェクト名などを聞かれますが、適当に入力します。
実行が完了したら、プロジェクトルート上に移動してnpm run devで実行できるか確認しましょう↓。

無事、実行できましたね。
今回はこのままデプロイしていきたいのですが、
その前にせっかくなので環境変数で取得した値を画面に表示してみましょう。

.env.local

 SAMPLE_SECRET_KEY=SAMPLE_SECRET_VALUE

app/page.tsx

export default function Page() {
  const key = process.env.SAMPLE_SECRET_KEY;
  return (
    <>
      <h1>Hello, Next.js!</h1>
      <p>環境変数の値：{key}</p>
    </>
  );
}

上の修正をした上で再度実行します↓。

環境変数の値が画面上に表示されましたね。
この状態でvercelにデプロイすることとします。

2.Githubにプッシュする

環境構築が出来たので、github上でリポジトリを作成し、上記で作成したリポジトリをpushしましょう（手順は省略）。

これで下準備は完了です。

4.コマンドライン上からVercelにデプロイする

まずはgithub actionsを用いず、コマンドライン上でvercelにデプロイしてみましょう。
以下のコマンドでvercel cliをインストールします。

npm install -g vercel

次に、プロジェクトのルートディレクトリで以下のコマンドを実行し、cli上からVercel にログインします。

vercel login

ログイン時に質問されますが、以下のとおりに回答します。

? Log in to Vercel (Use arrow keys)
　　→Continue with GitHub

すると、以下の通りメッセージが表示されるはずです（ブラウザが立ち上がって認証する必要があるかもしれません）。

> Success! GitHub authentication complete for xxxxxxxxxx(メールアドレス)
Congratulations! You are now logged in. In order to deploy something, run `vercel`.
💡  Connect your Git Repositories to deploy every branch push automatically (https://vercel.link/git)

さて、では既にデプロイする準備は整っているので、以下のコマンドでvercel上にデプロイしてみましょう。

vercel --prod

(*デプロイ対象のプロジェクトルート上で実行してください。)

vercel --prod コマンドは、Vercel CLIを使用してプロジェクトを本番環境にデプロイするためのものです。

本番環境へのデプロイ

vercel --prod コマンドは以下の目的で使用されます:

• プロジェクトを本番環境に直接デプロイします。
• デプロイされたコンテンツは一般公開され、実際のユーザーがアクセスできるようになります。
• 本番用のドメインにデプロイメントが自動的に割り当てられます。

プレビューデプロイとの違い

• 通常の vercel コマンド（--prod フラグなし）はプレビュー環境にデプロイします。
• プレビューデプロイはテストや共有目的の一時的な環境です。
• --prod フラグを付けることで、本番環境への直接デプロイが可能になります。

実行時、質問されますので以下の通り回答します。

? Set up and deploy “~/jisou/program/next-tech-blog”? (Y/n)（デプロイ対象プロジェクトの選択）
　　→Y
? Which scope do you want to deploy to? (Use arrow keys)（デプロイ先の選択）
　　→kei-dev-1213's projects（自動で表示される）
? Link to existing project? (y/N)（既存のプロジェクトをリンクするかどうか）
　　→N（新規プロジェクトなのでNO）
What’s your project’s name? (next-sample-app)(プロジェクト名の選択)
　　→任意で入力（何も設定せずEnter押下でデフォルト値が設定される）
? In which directory is your code located?（プロジェクトまでのパスの指定）
　　→プロジェクトルート上であれば何も入力せずEnterでOK
Want to modify these settings? (y/N)（プロジェクト設定の変更）
　　→N（プロジェクトの特殊な要件がある場合や、自動検出された設定が適切でない場合はYで変更が可能。ここではNを選択）

上記の通り質問に回答するとデプロイが始まり成功すると以下のメッセージが表示されます。

🔍  Inspect: https://vercel.com/kei-dev-1213s-projects/next-sample-app/GBc9wY4z4Fcjt3pTGh3jQ7mKG6yi [1s]
✅  Production: https://next-sample-amdxnejcl-kei-dev-1213s-projects.vercel.app

「Production」に表示されているURLがデプロイ後のURLであるため、ブラウザから接続してみましょう↓。

無事デプロイされているようですね。
ただ、環境変数をvercel上では設定していないため、画面上に表示されていません。
したがって、以下の通りvercel上で環境変数を設定してあげましょう。

5.Vercelの環境変数を設定する

vercelのトップページを表示すると、以下の通り先ほどデプロイを行ったプロジェクトが画面上に表示されているはずです。ここからプロジェクト固有の設定を行います。

では、↑の「Projects」の「next-sample-app」を選択し、上のタブから「Settings」を選択、左のメニューから「Environment Variables」を選択します。

この画面上で環境変数の設定を行います。
以下の画面通り、Key、Valueに環境変数の値を設定し、「save」ボタンを押下します。

すると以下の通り環境変数が設定できますので、再度vercel --prodコマンドでデプロイした上で本番URLを表示します。

無事、環境変数の値が画面上に表示されましたね。
これにてvercel上のデプロイは完了です。
では次に、github workflow上でプッシュ時に自動的にデプロイされるように設定を行いましょう。

6.Github actionsを使って自動デプロイさせよう

さて、ではいよいよgithubへのプッシュ時にvercelで自動デプロイされるように設定を追加していきましょう。
まずは以下のworkflowファイルを追加します。

.github/workflows/workflow.yml

name: Github Auto Deploy

on: push

env:
  VERCEL_ORG_ID: ${{ secrets.ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.PROJECT_ID }}

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

やっていることは上で手動で実行していたことを自動で実行できるようにしただけですね。
念の為、以下の通り解説を記載しておきます。

workflow.ymlの解説

このGitHub Actionsワークフローは、Vercelを使用してプロジェクトを自動的にデプロイするためのものです。

ワークフロー名とトリガー

name: Github Auto Deploy

on: push

このワークフローは "Github Auto Deploy" という名前で、リポジトリへのプッシュ時に実行されます。

環境変数

env:
  VERCEL_ORG_ID: ${{ secrets.ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.PROJECT_ID }}

VercelのOrganization IDとProject IDを環境変数として設定しています。これらの値はGitHubのシークレットから取得されます。

ジョブ定義

jobs:
  deploy:
    runs-on: ubuntu-latest

"deploy"という名前のジョブを定義し、最新のUbuntuランナーで実行するように指定しています。

ステップ

1. リポジトリのチェックアウト:

   - name: Checkout repository
     uses: actions/checkout@v4
   

   最新のコードをチェックアウトします。

2. Vercel CLIのインストール:

   - name: Install Vercel CLI
     run: npm install --global vercel@latest
   

   最新のVercel CLIをグローバルにインストールします。

3. Vercel環境情報の取得:

   - name: Pull Vercel Environment Information
     run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
   

   Vercelの本番環境の設定を取得します。VERCEL_TOKENはGitHubのシークレットから取得されます。

4. プロジェクトのビルド:

   - name: Build Project Artifacts
     run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
   

   Vercelを使用してプロジェクトを本番用にビルドします。

5. Vercelへのデプロイ:

   - name: Deploy Project Artifacts to Vercel
     run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
   

   ビルドされたプロジェクトをVercelの本番環境にデプロイします。

このワークフローは、コードがプッシュされるたびに自動的に実行され、プロジェクトをVercelにデプロイします。セキュリティを確保するため、重要な情報（トークンやID）はGitHubのシークレットとして保存され、ワークフロー内で参照されています。

さて、ではこれでプッシュしていきたいのですが、その前に、github上でデプロイが出来るようにymlファイルで参照しているキー情報をgithubのリポジトリに設定していきます。

VERCEL_TOKENの設定

まずはVERCEL_TOKENを設定します。

vercelのトップページから、右上のアイコンをクリックし、「Account Settings」を選択、画面の左側のメニューから「Tokens」を選択します（この辺はUIの変更があるかもしれません）。

Topページ

Account Settings画面

本画面でキー情報を設定します。「TOKEN NAME」(任意の名前)、「SCOPE」(範囲)、「EXPIRATION」（トークンの期限）に任意の値を設定し、「Create」ボタンを押下します。

「SCOPE」にはGithubのアカウントがオプションで選択出来るようになっているのでそれを選択します。
「Create」を押下すると、モーダルでTokenが表示されるので、一旦どこかにメモしておきます（再度表示はできないので注意）。

では、上記でメモしたトークンをGithubリポジトリに登録します。
リポジトリのURLから、上部の「Settings」タブを選択し、左側のメニューから「Secrets and variables」、「Actions」を選択します。

右側の「New repository secret」ボタンを押下し、Nameに「VERCEL_TOKEN」、Secretに先ほどメモしたトークンを入力し、「Add Secret」ボタンを押下します。

ORG_ID、PROJECT_IDの設定

では次に、ORG_ID、PROJECT_IDを設定しましょう。
上記でvercel --prodを実行した際、プロジェクトフォルダの中に「.vercel」フォルダが作成されています。
2つの環境変数はこちらの中にありますので、これらをgithubリポジトリに登録します↓。

.vercel/project.json

「.vercel/project.json」の、orgIdの値がORG_ID、projectIdに設定されている値がPROJECT_IDとなります。
こちらをVERCEL_TOKENと同様の手順でGithubリポジトリに登録します。

これで準備は全て完了です。
ではGithubにプッシュして自動デプロイ出来るか確認してみましょう。

7.Githubにプッシュしよう

それでは準備は全て完了しましたので、Githubにデプロイしてみましょう。
その前に、変更が反映されたか分かるように、以下の通り画面上の文字列を追記しておきます。

page.tsx

export default function Page() {
  const key = process.env.SAMPLE_SECRET_KEY;
  return (
    <>
      <h1>Hello, Next.js!</h1>
+      <p>Github actionsから自動デプロイしました。</p>
      <p>環境変数の値：{key}</p>
    </>
  );
}

では変更をコミットした上でプッシュしてみます。

git push

GithubリポジトリのActionsタブを見ると、workflow.ymlの定義に従ってデプロイ処理が走っていることが確認できます。
しばらく経つと以下の通り、デプロイ処理が完了します。

それでは、デプロイが完了したURLをvercelのダッシュボードからブラウザで開いてみましょう。

ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!

と、言うわけで正常にgithub actionsを使った自動デプロイが完了しました！

おわりに

いかがだったでしょうか。
環境周りの設定は私は結構苦手としているのですが、近頃はネットの記事も豊富なので、割と苦労せずにできた印象です。
同様に、本記事が誰かのためになれば非常に幸いです。

参考

JISOUのメンバー募集中🔥

プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします！👇