2026-02-15

個人開発アプリを Vercel で無料ホスティングする方法

開発日記 Next.js

Vercel とは

Vercel は、Webアプリケーションのホスティングサービスです。Next.js の開発元でもあり、Next.js との相性が抜群です。

個人開発にとって重要なのは、Hobby プラン（無料）で本格的なWebアプリを公開できる ことです。

無料プランでできること

Vercel の Hobby プランには以下が含まれます。

HTTPS 対応 — SSL証明書が自動で発行される
カスタムドメイン — 独自ドメインを設定可能
自動デプロイ — GitHub に push するだけで自動でビルド・公開
CDN 配信 — 世界中のエッジサーバーから高速配信
サーバーレス関数 — API エンドポイントも作成可能
プレビューデプロイ — ブランチごとにプレビューURLが生成

これが無料で使えるのは個人開発者にとって大きなメリットです。

始め方

1. GitHub リポジトリを用意する

まず、公開したいWebアプリのコードを GitHub リポジトリに置きます。Next.js でなくても、React、Vue、静的HTMLなど様々なフレームワークに対応しています。

2. Vercel にサインアップ

Vercel の公式サイトから GitHub アカウントでサインアップします。

3. プロジェクトをインポート

「New Project」から GitHub リポジトリを選択するだけです。Vercel がフレームワークを自動検出し、ビルド設定を提案してくれます。

4. デプロイ

「Deploy」ボタンを押せば、数十秒〜数分でデプロイが完了します。xxx.vercel.app という URL でアプリが公開されます。

以降は GitHub に push するたびに自動デプロイ されます。

カスタムドメインの設定

vercel.app のサブドメインでも公開できますが、独自ドメインを使うとブランディングに有利です。

ドメインを取得（お名前.com、Cloudflare など）
Vercel の Project Settings → Domains でドメインを追加
DNS レコードを設定（Vercel が手順を表示してくれる）
SSL 証明書が自動発行されて完了

複数プロジェクトの運用

個人開発では複数のアプリを公開することがあります。Vercel では プロジェクトごとに独立してデプロイ できるため、1つのアプリの変更が他に影響しません。

ST.Lab では以下の構成で運用しています。

プロジェクト	技術	URL
ポータルサイト	Next.js	senryakutaro.com
KabuVisual	Vanilla JS	senryakutaro.com/apps/kabuvisual/
TaskDeck	Next.js	senryakutaro.com/apps/taskdeck/

ポータルサイトの next.config.ts で rewrites を設定し、外部プロジェクトをサブパスとして配信しています。ユーザーから見ると1つのサイトに見えますが、内部的には3つの独立したプロジェクトです。

async rewrites() {
  return [
    { source: '/apps/kabuvisual/', destination: 'https://kabuvisual.vercel.app/' },
    { source: '/apps/kabuvisual/:path+', destination: 'https://kabuvisual.vercel.app/:path+' },
  ];
}

この構成のメリットは以下の通りです。

独立デプロイ — KabuVisual を更新してもポータルの再ビルドは不要
技術スタックが自由 — KabuVisual は Vanilla JS、TaskDeck は Next.js と別々でOK
Vercel 無料枠の有効活用 — プロジェクトごとにビルド時間やリソースを分散

注意点

無料プランの制限

商用利用は不可（個人プロジェクト向け）
ビルド時間: 月100時間まで
サーバーレス関数の実行時間: 10秒まで
チームでの利用は Pro プラン（月20ドル）が必要

個人開発であれば、これらの制限に引っかかることはほぼありません。

静的サイトとサーバーサイドの違い

静的サイト（SSG） — ビルド時にHTMLが生成される。高速で無料枠に優しい
サーバーサイド（SSR） — リクエストごとにHTMLが生成される。サーバーレス関数を消費

ブログのように更新頻度が低いページは SSG、リアルタイムデータが必要なページは SSR と使い分けるのがおすすめです。

まとめ

Vercel の無料プランで個人開発アプリを本格的に公開できる
GitHub 連携で push するだけの自動デプロイ
カスタムドメイン・HTTPS・CDN が無料で使える
複数プロジェクトを rewrites で1つのドメインにまとめられる
個人開発のホスティング先として、最初の選択肢になるサービス