【Next.jsアプリをVercelデプロイ】GitHub Actionsで自動化も解説(GUI ver.)

はじめに

初めてVercelにNext.jsのアプリをデプロイしましたので、手順を簡単に共有していきたいと思います。

この記事でわかること

• Vercelの画面上でアプリをデプロイする方法
• Github Actionsでデプロイを自動化する方法

Vercelでデプロイ

簡単な流れは以下となります。

Githubリポジトリを作成
↓
アプリをコミット
↓
vercelアカウントを作成
↓
デプロイ

ここではvercelアカウント作成までは終わっていると仮定して、その後の手順をお伝えします。

デプロイ手順

vercel画面上で「Add New」から「Project」を選択します。

Githubと連携していると、Githubのリポジトリの一覧が出てくるのでデプロイしたいリポジトリの「Import」をクリックします。

Importをクリックするとデプロイボタンのあるページに遷移します。

順に見ていきます。
①Project Name
リポジトリ名が自動的に反映されています。vercel上で見る名称を変更したい場合はここで変更を行います。

②Framework Project
使用しているフレームワークを選択します。
今回はNext.jsを使用しますので、それを選択します。

③Root Directory
そのままにしておきます。
もしソースがRoot Directory以外にある場合は、ここで指定をしてください。
入れ子構造になっている場合はそのままにしておくとエラーになるので、以下の記事をご参照ください。

④Build and Output Setting
下記の記事にあるようなエラーが出たため、Output Directoryが空欄の場合は.nextを入力し、overritdeをアクティブにしてください。

⑤Environment Variables
環境変数の設定をここで行います。

全ての設定が終わったらDeployボタンを押して完了です。
デプロイ中にエラーが出れば下の部分にエラー表示がされますので、対応をしていきます。

Github Actionsでデプロイを自動化する方法

次はGithub Actionsを使用してデプロイを自動化していきます。

以下はmainにコミットをした場合にビルドからデプロイまでが自動的にされるymlファイルです。

name: Vercel Production Deployment

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
  NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
  NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}

on:
  push:
    branches:
      - main

jobs:
  Test-Build-and-Deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18"

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npm run test

      - 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: |
          npm run build
          vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

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

上記のファイル中、以下の環境変数をGithub Secretsへ事前に登録をしておきます。
Supabaseは任意なので、使用していない場合や他のDBを使用している場合はそちらをセットしてください。

  - VERCEL_ORG_ID
  - VERCEL_PROJECT_ID
  
  [以下は任意]
  - NEXT_PUBLIC_SUPABASE_ANON_KEY
  - NEXT_PUBLIC_SUPABASE_URL

vercelの環境変数は以下の部分から取得してきます。

VERCEL_ORG_ID
Vercel上で右上にあるアカウントアイコンをクリックし、[Account Setting]をクリックします。
[Setting]ページの[General]にあるVercel IDをコピーします。

VERCEL_PROJECT_ID
Vercel上でProjectをクリックして[Setting]ページの[General]内にProject IDの記載があります。

環境変数設定が完了したら、作業は以上です。
リポジトリのmainブランチへコミット、またはマージがされたタイミングで上記のymlファイルが動き、最新情報がvercelデプロイに反映されます。

おわりに

今回はvercelの画面上からアプリのデプロイを実施してGithub Actionsでのデプロイ自動化までをご説明しました。
画面上の操作だけだとあっという間にデプロイができるので、デプロイ作業に苦手意識がある方は試してみてください。

画面上からではなくコマンドラインからデプロイを実施されたい場合は以下の記事が参考になるのでご参照ください。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼