Vercel（ヴァーセル）とは、HTML・CSSの静的ページやReact・Next.jsなどのWebアプリを、インターネット上へ公開・配信できるクラウドプラットフォームです。GitHubと連携すると、コードの更新に合わせてビルドとデプロイを自動化できます。
この記事では、できることと無料プランの条件を先に整理し、HTML・CSSだけのページを公開する手順から、Reactなどの設定、公開後の更新まで解説します。GitHubに保存するコードを用意してから進めましょう。
Vercelとは？3つの特徴とできること
| 特徴 | できること・利用条件 |
|---|---|
| 無料のHobbyプラン | 個人・非商用の学習用ページや作品を公開できます。用途条件と利用量の上限があります。 |
| GitHub連携で自動デプロイ | 連携したブランチへpushすると、ビルドと公開が自動で進みます。反映時間は構成やビルドによって変わります。 |
| グローバルCDNとHTTPS | 世界各地の配信基盤とキャッシュを利用でき、デプロイにはHTTPSが用意されます。 |
静的ファイルの配信だけでなく、サーバー側の処理やAPIにも対応します。まずはHTML・CSSのページから始めると、コードの保存と公開の関係を追いやすくなります。
パソコンの中のindex.htmlを開いても、そのファイルはまだインターネット上にはありません。Vercelへデプロイすると、作品を配信するためのURLができ、公開設定に応じてほかの人もブラウザからアクセスできます。「デプロイ」は、プログラムやファイルを動かせる環境へ配置することです。
たとえば、このブログのHTML/CSSの自己紹介ページなら、HTMLとCSSを配信します。ReactやViteのアプリなら、ビルドしてできたファイルを公開します。Next.jsなどでは、ページの配信に加えてサーバー側の処理を使う構成もあります。
GitHubとVercelは、それぞれ何をする？
GitHubはコードと変更履歴を置く場所、Vercelはそのコードを使って作品を公開する場所、と分けると作業がつながります。GitHubにもGitHub Pagesという公開機能がありますが、この記事ではGitHubに保存したコードをVercelと連携させる方法を使います。
- 手元でHTML・CSSやアプリのコードを作る。
- GitHubのリポジトリへ保存する。
- Vercelがそのリポジトリを読み、必要ならビルドして公開する。
- 発行されたURLを開き、表示と操作を確認する。
一度連携すると、GitHubへ変更をpushしたときにもデプロイできます。手元のファイルを保存するだけでは、公開ページは更新されません。
vercel.appは何？独自ドメインは最初から必要？
○○.vercel.appは、Vercelで公開した作品に使われるURLの形式です。プロジェクトやデプロイに対応するURLが発行されるので、最初から独自ドメインを買う必要はありません。URLにvercel.appが入っていても、そのページの内容をVercel自身が作ったという意味ではありません。
試しに公開するときは発行されたURLを使い、作品の名前で長く運用したくなったら独自ドメインを検討できます。Preview用とProduction用では用途やアクセス設定が異なるため、人に渡す前に公開対象のURLを確認します。
このブログでの公開例：MaskSheet
僕が開発・公開したMaskSheetは、React・TypeScript・Viteで作ったアプリです。コードをGitHubで管理し、Vercelへ公開して、masksheet.katasuke-web.comというサブドメインを接続しました。
これは「コードの保存」「アプリの配信」「URLの名前」を別々に用意した例です。WordPressで動くブログ本体をVercelへ移したわけではありません。開発中に見つかった問題と改善は、MaskSheetの制作記録にまとめています。
最初に、自分のファイルに合う手順を選ぶ
表は横にスクロールできます。
| 作ったもの | ローカルでの確認 | Vercelの設定の目安 |
|---|---|---|
| HTML・CSSだけ | index.htmlとstyle.cssをブラウザで確認。npmは不要 | Framework PresetはOther。ビルドを省略し、HTMLを置いたフォルダを公開 |
| React / Vite | package.jsonのコマンドとNode.js要件を確認し、ビルド | Viteを選択・検出。一般的な構成ではnpm run build、出力dist |
| Next.js | READMEの環境・ビルドを確認 | Next.jsを選択・検出。独自設定がなければ推奨値を使い、出力をdistにしない |
Hobbyは個人・非商用用途向けです。広告・有料サービスなど収益化する作品では、Hobbyの条件とProの案内を確認し、用途に合うプラン・公開先を選びます。独自ドメインの購入だけでは、ホスティングの用途条件は変わりません。
HTML・CSSだけのページを公開する例
学習ガイドの自己紹介ページを作った場合は、HTML・CSS・必要な画像をそのままGitHubへ保存します。次はリポジトリ直下に置く例です。
my-first-page/
├── index.html
└── style.css- ローカルでindex.htmlを開き、CSSが適用され、リンクが動くことを確認する。
- GitHubへの保存手順で、このフォルダ内のファイルを保存する。認証情報や不要な個人ファイルを含めない。
- VercelでリポジトリをImportし、Framework PresetをOtherにする。
- Root Directoryはindex.htmlのある階層にする。直下なら既定のまま。さらに深いフォルダに入れた場合はそのフォルダを指定する。
- Build CommandはOverrideを有効にして空欄にし、ビルドを省略する。npm installやnpm run buildを追加する必要はない。
- Output Directoryは、この例のようにpublicフォルダがなければプロジェクトの直下が使われる。publicがある構成ならOtherの既定出力がpublicになるため、ファイルの置き場所と合わせる。
- Deploy後、公開URLを開く。題名・本文・CSS・画像が表示され、未ログインのブラウザでも読めることを確かめる。
ビルドを使わないページの設定項目は、Vercel公式のビルド設定でも確認できます。公開後にトップページとCSSの両方が読み込まれれば、この構成のデプロイは完了です。
React・Vite・Next.jsなどは、ローカルビルドを確認する
プロジェクトのREADMEで必要なNode.jsやコマンドを確認します。package-lock.jsonがあるnpmプロジェクトなら、以下が確認の一例です。使うコマンドは、そのプロジェクトのpackage.jsonに合わせます。
npm ci
npm run buildここで失敗しているなら、まずローカルのエラーを直します。コードは秘密を除いてGitHubへ保存します。
リポジトリをImportする
- Vercelへログインし、新しいプロジェクトを作る。
- 必要なリポジトリだけへのGitHubアクセスを許可する。
- 対象リポジトリを選ぶ。
- Framework PresetとRoot Directoryを確認する。
- 必要な環境変数を設定してDeployする。
標準的なNext.js構成では多くの設定を検出できますが、別フォルダのアプリや独自のビルドコマンドは確認が必要です。
環境変数の確認
ローカルの.env.localは、そのままVercelへ移るわけではありません。外部サービスの認証など、設定値が必要な処理だけを確認して登録します。画面内だけで計算する機能なら、その計算のための秘密のAPIキーは不要です。
使う場所とProduction・Previewをそろえる
- コードが参照する変数名を調べ、大文字・小文字を含めて一致させる。
- ProjectのEnvironment Variablesで名前と値を登録する。秘密キーはサーバー側だけで使う。
- Production・Previewなど適用先を選び、接続する外部サービスも本番用・試験用をそろえる。本番だけの値はPreviewでは使えない。
Next.jsのNEXT_PUBLIC_やViteのVITE_が付いた変数は、標準設定ではブラウザ向けコードへ組み込まれます。環境変数へ移しただけで秘密になるわけではありません。ダミーの値で確認する方法は、Viteの.envと公開される値の実験にまとめています。
変更後のデプロイとURLを確認する
- 値を保存したら、対象環境で新しいデプロイを作る。ビルド時に埋め込む値は古い生成物には反映されない。
- DeploymentsでEnvironmentとコミットを確認し、変更後のデプロイのURLを開く。古いPreviewタブと取り違えない。
- ビルドで止まるならBuild Logs、公開後のAPIだけが失敗するなら実行時のログと応答を調べる。
相談用のログへ秘密キーの値を出さず、設定の有無、参照した変数名、接続先の種類を記録します。
公開したページを更新する：保存・push・反映を確かめる
初回の公開ができたら、自己紹介ページの見出しを一つ変えてみましょう。GitHubとVercelの連携が動くかを、小さな変更で確認できます。
- index.htmlの見出しを変更し、手元のブラウザで表示を確認する。
- Gitの差分を見て、その変更をcommitしてGitHubへpushする。
- VercelのDeploymentsで、新しいコミットに対応するデプロイを開く。
- 成功状態とコミットを確認し、対象URLを開いて見出しが変わったかを見る。
本番用に指定したブランチへの変更はProduction、別ブランチへの変更は通常Previewとして公開されます。mainを本番にする構成はよく使われますが、設定したProduction Branchに従います。作業ブランチへpushした場合は、作られたPreviewのURLを開いてみてください。
反映されない場合は、まず「保存しただけ」「push先のブランチが違う」「ビルドが失敗した」「別のデプロイのURLを見ている」のどれかを確認します。操作の基本はGitHubへコードを保存する手順も参照してください。
ログから原因を探す
対象プロジェクトのDeploymentsから失敗したデプロイを開き、Build Logsで最初のエラーとその前後を読みます。たとえばMissing script: "build"なら、対象のpackage.jsonにbuildがあるか、Root Directoryが正しいかを確認します。HTML・CSSだけなら、npmのビルドを実行する設定にしていないかを見ます。
公開URLが404の場合は、デプロイが完了しているか、公開対象フォルダにindex.htmlがあるかを確認します。Viteなら生成されたdist、Next.jsなら検出された設定と、プロジェクトごとの出力を混同しないでください。
依存関係、Node.jsの条件、環境変数、ビルド対象フォルダを切り分けます。エラー全体をAIへ渡す前に、キーやユーザーのデータを除きます。「Vercelだから失敗した」と決めつけず、ローカルビルドとの違いを確認してください。
Vercelは無料で使える？Hobbyと有料プランの考え方
Hobbyの利用条件は個人・非商用です。利用量が無料枠内でも、用途条件を満たす必要があります。
料金・転送・ビルド・関数の制限は変わるため、古い比較表を固定の仕様として使いません。Vercelの公式ドキュメントでは、Fluid Compute有効時のHobbyは最大300秒です。他プランや旧方式では条件が異なります。契約条件と自分のプロジェクト設定を公式資料で確認します。
公開後に確認すること
- 未ログインのブラウザでも想定どおりアクセスできるか。
- トップだけでなく主要な画面、フォーム、APIが動くか。
- スマホで読めるか。
- プレビューと本番を取り違えていないか。
公開できたら、便利だった点だけでなく、どの条件でつまずいたかを制作記録へ残します。
公開できたら、作品のURLを整える
僕はMaskSheetを既存ドメインのサブドメインへつなぎました。同じ構成にする場合は、XServerドメインのDNS設定とVercelの登録手順へ進めます。まずは発行されたvercel.appのURLで表示を確かめてから、名前を整えると進めやすくなります。
このブログでは、コードをGitHubへ保存し、Vercelでアプリを配信し、サブドメインで入口を用意しています。それぞれをつなげて見ると、push先、ビルド、公開URLのどこで止まったかを追えます。最初の公開ができたら、見出しを一つだけ変え、同じ流れで新しい版が届くところまで試してみてください。
