v0.devからVercelへ：GitHub Actionsを使って初めてのWebアプリをデプロイする方法

Matt
7月21日
読了時間: 4分

これは、プロトタイプから本番環境まで、フルスタックWebアプリケーションを構築・デプロイする方法に関する連載の第一回目です。

この投稿では、v0.devを使ってWebアプリの基盤を作成し、それをGitHubにプッシュし、GitHub Actionsを使ったCI/CDパイプラインでVercelにデプロイする方法を説明します。

今回開発しているのは「Teach Yourself Japanese（自分で学ぶ日本語）」という言語学習アプリで、フラッシュカード、トピック、例文などを備えています。こちらで公開中です：https://www.japanauts.com。この記事の目的は、まずMVP（最小実用製品）を立ち上げることです。今後の投稿では以下のような機能拡張を取り上げる予定です：

Clerkによるサインアップ／サインイン機能の追加
Playwrightによる自動テストの実行
ダークモード／ライトモードのテーマ切り替え
CI/CDワークフローの強化

v0.devでの高速プロトタイピング

v0.devは、テキストプロンプトをReactとTailwind CSSを用いた動作するフロントエンドコードに変換するAI搭載のUIプロトタイピングツールです。アイデアをすばやくプロトタイプにするのに非常に便利です。

まず、以下のような簡単なプロンプトを入力しました：

「日本語を学ぶためのWebアプリを作成してください。フラッシュカードで練習できると嬉しいです。」

v0.dev prompt in action - build a simple web app to help teach Japanese

v0.devはトピックとフラッシュカードを含むレイアウトを生成しました。なかなか良い感じです！次のプロンプトでさらに改善しました：

「トピックの選択肢を左側に、カードを右側に大きく配置し、その単語を使った例文も表示してもらえますか？」

数回の反復作業の後、満足のいくプロトタイプが完成しました。

GitHubへのエクスポート

v0.devはGitHubと直接連携できますが、このガイドでは手動でコードをダウンロードしました。v0.devエディターの右上にある「.zipでエクスポート」オプションを使います。

ファイルを解凍します。
ターミナルでnpm installを実行します。（プロジェクトによってはpnpm installが必要です）

pnpm install

開発サーバーを起動します：

npm run dev

問題なく動作すれば、新しいGitHubリポジトリにプッシュしましょう。

Vercelでのデプロイ

Vercelはフロントエンドアプリのデプロイに最適なプラットフォームで、無料プランも充実しています。以下は新しいプロジェクトのデプロイ方法です：

vercel.comにアクセスし、無料アカウント（Hobbyプラン）を作成します。
「Add New」→「Project」をクリックし、GitHubアカウントを接続します。
新しいリポジトリを選択し、必要に応じてビルド設定を行い（通常はnpm run buildとnext startでOK）、Deployをクリックします。

🎉 サイトが公開され、動作しているのが確認できるはずです！

（任意）GitHub Actionsでのデプロイを使用する場合

Vercelの自動デプロイではなくGitHub Actionsを使う場合は、Vercelのプロジェクト設定→GitからGitHubリポジトリの接続を解除します。 CI/CDパイプラインにインフラ設定（例：terraform）や自動テスト、静的コード解析などを追加したい場合に便利です。

GitHub ActionsでのCI/CDの構築

ここではGitHub Actionsのカスタムワークフローを使ってデプロイを自動化します。リポジトリ内に.github/workflows/deploy.ymlファイルを作成し、以下を記述します：

name: Deploy

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

on:
  workflow_dispatch:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - uses: oven-sh/setup-bun@v2

      - name: Setup pnpm
        run: npm install -g pnpm@latest

      - 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 }}

GitHubリポジトリの[Settings → Secrets → Actions]に以下のシークレットを追加します：

VERCEL_TOKEN: Vercelのアカウント設定→Tokensで新しいトークンを作成します。「CICD Token」などと名前を付け、適切な有効期限を設定します。
VERCEL_ORG_ID: VercelのチームID（例：team_***）
VERCEL_PROJECT_ID: Vercelプロジェクト設定内にあるプロジェクトID（例：prj_***）