1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@automation2025(frencia)

Vercelで始める現代的フロントエンド運用入門

1
Posted at

はじめに

Vercelは、Next.jsなどのフロントエンドフレームワーク向けに最適化されたクラウドプラットフォームで、Git連携・自動デプロイ・グローバルCDN・サーバーレス関数などをワンストップで提供します。
ここでは、用語の意味をかみ砕きながら、Vercelの基本から実際のコード例までを15章構成で解説し、「コードを書いてGitにプッシュするだけで世界中に高速配信される」開発体験を目指します。

第1章 Vercelとは何か

Vercelは、静的サイトとサーバーサイドレンダリングを組み合わせたモダンなWebアプリを、自動スケーリング付きで簡単にホスティングできるクラウドサービスです。
各コミットごとに「イミュータブル（変更不可）なデプロイ」を作成し、プレビューURLでレビューしてから本番へ反映できるため、チーム開発でも安全に素早く改善を回せるのが特徴です。

# VercelのCLIをグローバルインストール
npm install -g vercel

# バージョン確認
vercel --version

第2章 プロジェクトの準備とGit連携

VercelはGitHub・GitLab・Bitbucketと連携し、リポジトリへのプッシュをトリガーに自動でビルドとデプロイを行います。
mainブランチへのプッシュは本番環境、プルリクエストやfeatureブランチへのプッシュはプレビュー環境として分かれるため、URL単位で「この変更だけ」を確認できるのがとても便利です。

# 既存Next.jsプロジェクトを作成
npx create-next-app my-vercel-app
cd my-vercel-app
git init
git add .
git commit -m "Initial commit"

# GitHubに公開後、Vercelダッシュボードから「Import Git Repository」で連携

第3章 Vercel CLIでの初回デプロイ

ブラウザのダッシュボード経由だけでなく、Vercel CLIを使えばローカルディレクトリをそのままVercelプロジェクトにリンクし、ワンコマンドでデプロイできます。
初回実行時にはチーム・プロジェクト名・フレームワークなどを対話形式で選択し、その情報は.vercelディレクトリに保存されるため、次回以降はvercelだけで更新できます。

# プロジェクトをVercelにリンク＆初回デプロイ
vercel

# 質問に答え終えると、Preview用URLとProduction用URLが発行される
# 2回目以降は本番デプロイを明示
vercel --prod

第4章 環境変数とシークレット管理

Vercelでは、ローカル開発用の.env.localと、本番・プレビュー用の環境変数をダッシュボードまたはCLIで管理でき、APIキーやDB接続文字列を安全に扱えます。
フロントエンドで利用する値はNEXT_PUBLIC_*などの命名規則に従い、サーバー側だけで使うシークレットは公開されないので、セキュリティと利便性のバランスが取りやすい仕組みです。

# ローカル環境変数を作成
echo "API_KEY=local-123" >> .env.local

# Vercel上に環境変数を追加（対話式）
vercel env add API_KEY production
vercel env add API_KEY preview

// pages/index.tsx
export default function Home() {
  const key = process.env.NEXT_PUBLIC_PUBLIC_VALUE;
  return <div>公開値: {key}</div>;
}

第5章 静的生成(SSG)とサーバーサイドレンダリング(SSR)

Next.jsをVercelにデプロイすると、getStaticPropsを使った静的生成ページはビルド時にHTMLへ事前レンダリングされ、CDNから超高速で配信されます。
一方で、getServerSidePropsやApp Routerのサーバーコンポーネントを使えば、リクエストごとに最新データを取得するSSRがサーバーレス関数として実行され、柔軟なデータ取得が可能です。

// pages/ssg.tsx
export async function getStaticProps() {
  return {
    props: {time: new Date().toISOString()},
    revalidate: 60, // ISR: 60秒ごとに再生成
  };
}

export default function SSG({time}: {time: string}) {
  return <p>ビルド時の時刻: {time}</p>;
}

// pages/ssr.tsx
export async function getServerSideProps() {
  return {props: {time: new Date().toISOString()}};
}

export default function SSR({time}: {time: string}) {
  return <p>リクエスト時刻: {time}</p>;
}

第6章 Serverless Functionsで簡易バックエンド構築

Vercelのサーバーレス関数を使うと、/apiディレクトリに置いたファイルがそのままAPIエンドポイントとしてデプロイされ、スケーリングやサーバー管理を意識せずにバックエンドロジックを書けます。
関数はリクエストが来たときだけ起動し、使われないときは自動でスケールダウンするため、小さなAPIやWebhook処理をフロントエンドと同じリポジトリで完結させたい場合に特に便利です。

// pages/api/hello.ts
import type {NextApiRequest, NextApiResponse} from 'next';

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const name = (req.query.name as string) ?? 'world';
  res.status(200).json({message: `Hello, ${name}!`});
}

第7章 Edge Middlewareでリクエストを事前処理

Edge Middlewareは、ユーザーの近くにあるエッジノードでリクエストを先回り処理し、リダイレクトやABテスト、国別のコンテンツ出し分けなどを高速に実行できる仕組みです。
アプリ本体のサーバーレス関数を呼び出す前にクッキーやヘッダーをチェックできるため、認証チェックや多言語リダイレクトを低レイテンシで実装することができます。

// middleware.ts
import {NextResponse} from 'next/server';
import type {NextRequest} from 'next/server';

export function middleware(request: NextRequest) {
  const url = request.nextUrl;

  // 未ログインでadmin配下にアクセスしたらログインへ飛ばす
  const auth = request.cookies.get('auth');
  if (url.pathname.startsWith('/admin') && !auth) {
    url.pathname = '/login';
    return NextResponse.redirect(url);
  }

  return NextResponse.next();
}

第8章 vercel.jsonによるルーティングとヘッダー設定

vercel.jsonは、リライトルール・リダイレクト・カスタムヘッダーなどを定義する設定ファイルで、フレームワークのデフォルト挙動を上書きして高度なルーティングを行えます。
静的ファイルへのキャッシュヘッダーやセキュリティヘッダーをまとめて指定できるため、パフォーマンスとセキュリティをコード変更なしで改善できる点が実運用で重宝します。

{
  "rewrites": [
    { "source": "/old-blog/:slug", "destination": "/blog/:slug" }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Frame-Options", "value": "SAMEORIGIN" },
        { "key": "X-Content-Type-Options", "value": "nosniff" }
      ]
    }
  ]
}

第9章 ビデオや静的アセットの配信とキャッシュ

VercelはグローバルCDN上で静的アセットを配信し、動画や画像などファイルサイズの大きいコンテンツもエッジから効率的に届けられるようにしています。
特に動画では、Cache-ControlやAccept-Rangesヘッダーを適切に設定することで、シークバーでの早送り／巻き戻しに対応したバイトレンジ配信を有効化できます。

{
  "headers": [
    {
      "source": "/videos/(.*).(mp4|webm)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=604800" },
        { "key": "Accept-Ranges", "value": "bytes" }
      ]
    }
  ]
}

// pages/video.tsx
export default function VideoPage() {
  return (
    <video controls width={640}>
      <source src="/videos/sample.mp4" type="video/mp4" />
    </video>
  );
}

第10章 AIアプリとVercel AI SDKのデプロイ

VercelはAI SDKと統合されており、OpenAIなどのモデルを使ったチャットやストリーミング応答アプリを、通常のフロントエンドと同じパイプラインでデプロイできます。
エッジやサーバーレス環境でストリーミングレスポンスを配信することで、重たいAI処理を扱いながらもユーザーに対しては素早い表示を維持することができます。

// app/api/chat/route.ts (Next.js App Router)
import {NextRequest} from 'next/server';
import OpenAI from 'openai';

const client = new OpenAI({apiKey: process.env.OPENAI_API_KEY!});

export async function POST(req: NextRequest) {
  const {message} = await req.json();
  const completion = await client.chat.completions.create({
    model: 'gpt-4.1-mini',
    messages: [{role: 'user', content: message}],
  });
  return new Response(completion.choices.message.content);
}

第11章 ローカル開発とプレビュー環境のワークフロー

vercel devコマンドを使うと、ローカルでVercelの環境をエミュレートしながら開発でき、サーバーレス関数やエッジミドルウェアもローカルURLで動作確認できます。
Git連携によるPreviewデプロイと組み合わせることで、「ローカル→プレビューURL共有→本番」の三段階で安全に機能を育てていく運用がスムーズになります。

# ローカルでVercel互換の開発サーバーを起動
vercel dev

# ブラウザで http://localhost:3000 にアクセス

// package.json のscriptsに追加
{
  "scripts": {
    "dev": "next dev",
    "vercel-dev": "vercel dev"
  }
}

第12章 監視・ログ・アナリティクス

Vercelのダッシュボードでは、デプロイごとにアクセスログやサーバーレス関数の実行ログを確認でき、エラーの原因特定やパフォーマンスボトルネックの調査に役立ちます。
またページ速度向上やCore Web Vitalsを可視化するSpeed Insights、PVやユニークユーザーを計測するWeb Analyticsなどを統合的に利用できるため、運用後の改善サイクルも回しやすくなります。

// 例: サーバーレス関数内でログを出す
export default function handler(req: any, res: any) {
  console.log('New request', {path: req.url, ua: req.headers['user-agent']});
  res.status(200).json({ok: true});
}

第13章 セキュリティと認証の基本パターン

Vercelは、HTTPS終端・環境変数によるシークレット管理・エッジでの認証チェックなど、クラウド側のセキュリティ機能を備えています。
アプリ側では、JWTやセッションCookieを使ってユーザーを識別し、Edge Middlewareでトークン検証を行うことで、不正アクセスをアプリ本体に到達させる前に遮断できます。

// middleware.ts 内で簡易JWTチェック
import {NextRequest, NextResponse} from 'next/server';
import {verifyToken} from './lib/auth';

export function middleware(req: NextRequest) {
  const token = req.cookies.get('token')?.value;
  if (!token || !verifyToken(token)) {
    const url = req.nextUrl.clone();
    url.pathname = '/login';
    return NextResponse.redirect(url);
  }
  return NextResponse.next();
}

第14章 他ホスティングとの違いと使い分け

従来のIaaSやPaaSでは、サーバーやコンテナ、ロードバランサーの設定が必要でしたが、Vercelはフロントエンド開発者が意識するのは「コード」と「Git」だけで済むよう設計されています。
一方で、重いバッチ処理や長時間実行ジョブは別のサービスに任せ、フロントエンド・API・エッジロジックにVercelを集中させると、コストと運用負荷をバランスよく抑えられます。

| 用途             | Vercelに向く例                    |
|------------------|-----------------------------------|
| マーケサイト     | LP・ブログ・キャンペーンページ     |
| Webアプリ        | SaaSダッシュボード・管理画面      |
| 軽量API          | 認証・Webhooks・データ集約        |

第15章 まとめと次のステップ

Vercelを使うことで、フロントエンド開発者はインフラ構築に時間を取られず、「Gitにプッシュ→プレビューURLで確認→本番反映」というシンプルで高速な開発体験を手にできます。
次のステップとして、サーバーレス関数やEdge Middlewareを活用し、AI SDKや外部API、データベースと組み合わせた本格的なアプリケーションを構築しながら、自身のプロジェクトに最適なVercel運用パターンを探っていくと良いでしょう。

# これから始める人の一連のコマンド例
npx create-next-app my-vercel-app
cd my-vercel-app
git init && git add . && git commit -m "start"
vercel        # 初回デプロイ
vercel --prod # 準備が整ったら本番デプロイ
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?