【Vercel】デプロイ環境を分けてGithub Actionsで自動化

はじめに

最近個人開発しているアプリをVercelデプロイをしたのですが、ユーザーの使用を視野に入れているとデプロイ環境を分けた方がいいかなと感じ始めました。

そこで練習を兼ねて、本番環境以外を作成して基本的に作業はそこで行い、何か一つの機能がある程度完成させたら本番環境にデプロイをするようにしようと環境を分けることにしました。

Vercelの環境

Vercelデプロイには以下の3つの種類があります。

• Production
• Preview
• Development

状況に合わせて使い分けをしていけるのですが、この記事ではGithub Actionsでデプロイ環境を分けて自動化する方法を共有します。

Vercelのデプロイ環境について

上述したようにデプロイ環境が3つあります。それぞれの違いは以下の通りです。

Production:

本番環境を意味します。
mainブランチやmasterブランチにプッシュされた時に自動的にデプロイされます。
リリースをしてユーザーが実際に使用するのはこの環境になります。

Preview

プレビュー環境を意味します。
主にプルリクがされた際にデプロイがされます。
必ずしもmainブランチへのマージを意味するわけではなくブランチ同士のプルリクでもデプロイがされるようになっています。
本番環境にデプロイする前に変更内容を確認したりテストを実施したりする際に使用します。

Development

ローカルマシンでデプロイする際に使用します。
「vercel dev」コマンドでvercel環境をシミュレートして本番環境やプレビュー環境と同じ設定を利用することができます。

Preview環境へのデプロイを自動化

ここではPreview環境へのデプロイをGithub Actionsで自動化する方法をご説明していきます。

まずGithub Actionsを使用するためのymlファイルを以下のように準備します。

name: Vercel Preview Deployment

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

on:
  push:
    branches-ignore:
      - 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=preview --token=${{ secrets.VERCEL_TOKEN }}

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

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

Production環境へのデプロイ詳細やVercelの環境変数設定方法はこちらの記事にて説明してますので、よかったらご参照ください。

Production環境とのファイル内容の違いは以下の三つです。

トリガー条件:

Preview

on:
  push:
    branches-ignore:
      - main

Previewの方はメインブランチにコミットされた時は無視するようにしています。

Production

on:
  push:
    branches:
      - main

環境指定:

Preview

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

Production

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

ビルドコマンド

Preview

vercel build --token=${{ secrets.VERCEL_TOKEN }}

Production

vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

Productionの方にはビルド時に--prodフラグを入れています。
これを入れていることで、Vercelに本番環境へのデプロイであることを伝えることができます。

デプロイ方法

上記のymlファイルを作成したら、Githubにコミットを行います。
その後、ブランチを分けて作業を行いmainブランチ以外にコミットをすると、上記のPreview環境が立ち上がります。

デプロイ後

Preview環境のURLはVercelのプロジェクト画面上に表示されています。
Production環境のURLのすぐ横にあるので見つけやすいです。

Preview環境にデプロイをすると以下のように画面真ん中下にVercelツールバーが表示されます。

まだ使っていませんが、ツールバーを使用することで、他の人にシェアをしたりコメントを追加したりできるようです。
開発者以外の人とアイデアを出し合いながら共同で開発をしている場合は便利かもしれないなーと思いました。

おわりに

会社の開発現場ではデプロイ環境を分けているのは当たり前かもしれませんが、個人開発をしていく中でもリリースをして実際にユーザーが使用する環境と個人開発を続ける環境を分ける必要は出てくると思います。
この記事では、VercelとGithubActionsを使うとymlファイルを分けるだけで環境分けが簡単にできることがわかったので紹介させていただきました。
皆様の参考になれば幸いです！

JISOUのメンバー募集中！

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