【Vercelサイト公開までの流れ】

Vercelに関して、今回は実際にサイト公開までの流れについて説明します。
簡単にウェブサイトやアプリケーションを公開できるクラウドプラットフォームです。
特にNext.jsと相性が良く、デプロイからCDN配信までを自動化しています。

最後まで焦らずにゆっくり理解しながら進んでください！

1. Vercelのアカウント作成

まず、Vercelを使用するにはアカウントが必要です。以下の手順に従ってください。

Vercel公式サイトにアクセス
Vercelの公式サイト（vercel.com）にアクセスします。
サインアップ
右上の「Sign Up」ボタンをクリックし、GitHub、GitLab、またはBitbucketアカウントでサインアップします。
- アカウントがない場合は、先にGitHubアカウントを作成してください。
認証後、ダッシュボードに移動
サインアップが完了すると、Vercelのダッシュボードに移動します。

2. プロジェクト作成

次に、ウェブサイトのプロジェクトを作成します。今回はNext.jsを使った例を基に説明します。

GitHubにリポジトリを作成
GitHubに新しいリポジトリを作成します。
→ GitHubのサイトにログインし、「New Repository」ボタンをクリック。
→ リポジトリ名を入力し、「Create Repository」をクリック。
Next.jsプロジェクトをローカルで作成
ターミナル（コマンドプロンプト）を開き、次のコマンドを入力してNext.jsプロジェクトを作成します。

npx create-next-app@latest my-next-app

※my-next-appはプロジェクト名です。
好みの名前に変更可能です。
ローカルでサイトを確認
プロジェクトフォルダに移動し、開発サーバーを起動します。

cd my-next-app npm run dev

→ ブラウザでhttp://localhost:3000にアクセスし、Next.jsのデフォルトページが表示されることを確認します。
GitHubにプッシュ
GitHubにプロジェクトをプッシュします。

git init git add . git commit -m "initial commit" git remote add origin <GitHubリポジトリのURL> git push -u origin master

3. Vercelでプロジェクトをデプロイ

GitHub上に作成したリポジトリをVercelにデプロイする手順を説明します。

Vercelダッシュボードで「New Project」をクリック
→ Vercelのダッシュボードに戻り、左側メニューの「New Project」をクリックします。
GitHubリポジトリをインポート
→ VercelがGitHubアカウントにアクセスする許可を求めてきますので、「Authorize Vercel」をクリックして連携します。
→ 作成したリポジトリが表示されるので、それを選択し、「Import」ボタンをクリックします。
プロジェクト設定
リポジトリをインポートすると、プロジェクト設定画面が表示されます。基本的にはデフォルト設定でOKですが、環境変数が必要な場合はここで設定します。設定が完了したら「Deploy」ボタンをクリック。
デプロイ完了
数分でデプロイが完了します。完了後、サイトのURLが表示されるので、そのURLをクリックすると、自分のサイトが公開されていることを確認できます。

4. カスタムドメインの設定

Vercelでは、独自ドメインを使用して公開サイトをカスタマイズできます。

カスタムドメインの追加
→ Vercelダッシュボードの「Settings」から「Domains」を選択し、「Add Domain」ボタンをクリックします。
→ 使用したいドメイン名を入力し、「Add」ボタンを押します。
DNS設定
ドメイン登録サービス（例: お名前.comやGoogle Domainsなど）で、Vercelが指示するDNS設定（AレコードやCNAMEレコード）を追加します。

※ DNS設定が反映されるまで数時間かかることがあります。

5. デプロイの確認と更新

デプロイが完了したら、サイトの内容を更新したい時の手順も簡単です。

ローカルで修正
my-next-appフォルダ内でコードを修正し、再度GitHubにプッシュします。

_{git add . git commit -m "Update content" git push origin master}
自動デプロイ
GitHubにプッシュするたびに、Vercelが自動で再デプロイを行います。Vercelのダッシュボードで、デプロイの進捗状況を確認できます。

6. パフォーマンスと分析

Vercelでは、サイトのパフォーマンスを分析できる機能も提供しています。

分析機能を有効化
Vercelダッシュボードで「Analytics」をクリックし、サイトのパフォーマンスをリアルタイムでモニタリングできます。
- ページの読み込み速度
- ユーザーの地理位置データ
- エラーレポート
パフォーマンスの向上
ページの速度改善や最適化が必要な箇所を確認し、画像圧縮やコードの最適化などを行います。VercelはCDNを使用しており、デフォルトで高いパフォーマンスが期待できます。

Vercel利用の注意点

料金プラン
基本的に無料で使用できますが、大規模なサイトやビジネスユースの場合は有料プランも検討が必要です。
- 無料プラン：個人サイトや小規模プロジェクトに最適
- プロプラン：大規模なプロジェクトや商用利用向け
環境変数の設定
データベースやAPIキーを利用する場合、環境変数の設定が必要です。Vercelのダッシュボードから「Environment Variables」を設定できます。
自動スケーリング
トラフィックが急増した場合でも、Vercelは自動的にスケールするため、アクセスが集中してもサイトがダウンしにくいです。

サイト公開までの流れを整理

手順	内容
1. アカウント作成	GitHubやGitLabでサインアップ
2. プロジェクト作成	GitHubでリポジトリ作成、Next.jsプロジェクトをローカルで作成
3. GitHubにプッシュ	プロジェクトをGitHubにプッシュ
4. Vercelでデプロイ	GitHubリポジトリをVercelでインポートしてデプロイ
5. カスタムドメイン	独自ドメインを追加し、DNS設定を行う
6. サイトの更新	コード修正後、GitHubにプッシュすると自動で再デプロイ
7. パフォーマンス分析	Vercelの「Analytics」でサイトのパフォーマンスをモニタリング

1. Vercelの基本コマンド一覧

Vercel CLIを使用すると、ターミナルからプロジェクトを管理でき、GUIよりも柔軟性を持たせられます。以下は、よく使われるコマンドのリストです。

コマンド	説明
`npm install -g vercel`	Vercel CLIをインストールする
`vercel`	プロジェクトを現在のディレクトリからデプロイ
`vercel dev`	ローカルでVercelプロジェクトをプレビュー
`vercel env add`	環境変数を追加
`vercel env ls`	現在のプロジェクトの環境変数を一覧表示
`vercel deploy`	デプロイを手動で実行
`vercel logs`	サーバーレス関数のログを確認

インストール手順

以下のコマンドでVercel CLIをインストールします。

npm install -g vercel

2. Serverless Functionsの詳細な使い方

VercelのServerless Functionsを使うと、フロントエンドから簡単にAPIを呼び出せます。ここでは、いくつかの具体例を示します。

POSTリクエストの処理

次のサーバーレス関数は、POSTリクエストのデータを受け取り、JSONレスポンスを返します。

ファイル: `api/submit.js`

export default function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body;

    if (!name || !email) {
      res.status(400).json({ error: 'Name and email are required.' });
    } else {
      res.status(200).json({ message: `Thank you, ${name}!` });
    }
  } else {
    res.status(405).json({ error: 'Method not allowed.' });
  }
}

Serverless Functionsのローカルプレビュー

関数をローカルでテストする場合は、以下のコマンドを実行します。

vercel dev

ブラウザでhttp://localhost:3000/api/submitにアクセスすると、結果を確認できます。

3. Edge Functionsを利用した地域判別のサンプル

ユーザーの地域に応じて、異なる内容を表示する場合に役立つ例です。

ファイル: `middleware.js`

import { NextResponse } from 'next/server';

export function middleware(req) {
  const country = req.geo.country || 'US';

  // 日本向けのリダイレクト
  if (country === 'JP') {
    return NextResponse.redirect('https://example.com/jp');
  }

  // 他地域向けはそのまま
  return NextResponse.next();
}

4. 環境変数の管理と設定例

環境変数を使用すると、プロジェクトに機密情報（APIキーやデータベース接続情報）を安全に組み込むことができます。

環境変数の追加

コマンドラインを使って環境変数を追加します。

vercel env add VARIABLE_NAME

例えば、DATABASE_URLを設定する場合:

vercel env add DATABASE_URL

環境変数の一覧表示

現在のプロジェクトの環境変数を確認するには以下を実行します。

bashコードをコピーするvercel env ls

使用例

次のコードは、環境変数からAPIキーを取得して使用します。

ファイル: `api/config.js`

const apiKey = process.env.API_KEY;

export default function handler(req, res) {
  res.status(200).json({ key: apiKey });
}

5. リダイレクトと再書き換えの応用例

リダイレクト

特定のURLを新しいURLにリダイレクトする設定。

{
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ]
}

再書き換え

ユーザーには見せずにURLを内部的に変更します。

{
  "rewrites": [
    {
      "source": "/blog/:slug",
      "destination": "/api/blog?slug=:slug"
    }
  ]
}

6. Vercel Analyticsを活用する方法

Vercel Analyticsは、次のようなデータをリアルタイムで取得できます。

ページビュー
滞在時間
JavaScriptエラー

セットアップ方法

Vercelのダッシュボードで、Analyticsを有効化するだけで自動的にトラッキングが始まります。

7. 実践例: Next.jsプロジェクトのデプロイ

Step 1: Next.jsプロジェクトの作成

npx create-next-app@latest my-next-app
cd my-next-app

Step 2: Vercelにデプロイ

vercel

8. 用途別のおすすめ機能

機能名	初心者向け	小規模プロジェクト	大規模プロジェクト	主な用途	使用例
自動デプロイ	◎	◎	◎	Git連携による効率的なデプロイ	リポジトリへのプッシュ後、自動デプロイ
Serverless Functions	○	◎	◎	APIやバックエンド処理の実装	フォーム送信のバックエンド処理など
Edge Functions	△	○	◎	高速レスポンスが必要なアプリケーション	地域ごとのリダイレクト
環境変数管理	◎	◎	◎	APIキーやデータベース接続情報の管理	DATABASE_URLの管理
Analytics	◎	◎	◎	ユーザー行動のトラッキング	ページビューやJavaScriptエラーの確認
リダイレクト機能	◎	◎	◎	URL構造の変更やSEO対策	旧URLから新URLへのリダイレクト

まとめ

Vercelは、Next.jsを使ったウェブサイトやアプリケーションのデプロイを非常に簡単に行えるプラットフォームです。GitHubと連携することで、開発と公開がシームレスに行え、さらにパフォーマンス分析や自動スケーリングの機能も提供しているため、安心して運用ができます。