Vercelの始め方 — 自分の小さなサイトをURLで見てもらう

ひよこ

自分のサイト、URLを送って見てもらいたい！

ペンギン先生

VercelはWebサイトやアプリを配信するサービスだよ。GitHubなどと連携してビルドとデプロイをできる。まずは秘密の情報を含まない、小さな静的サイトを公開するところから始めよう。

ひよこ

Next.jsを使っていなくてもいい？

ペンギン先生

AstroやViteなどにも対応しているよ。今回はAstroの静的サイトを使う。サーバーで毎回処理する構成とは必要な設定が違うので、最初は静的出力で練習しよう。

ひよこ

GitHubとつなげれば何でも自動で決まるの？

ペンギン先生

フレームワークは自動検出されるけれど、リポジトリの権限・ルートフォルダ・ビルド・出力先は確認するよ。読み込むのは自分の練習用リポジトリに絞ろう。

ひよこ

最初のデプロイはプレビュー？

ペンギン先生

新しいプロジェクトの最初のデプロイは本番になるよ。まだ本番じゃないつもりで秘密を載せないでね。完了後に発行されたURLを開き、見出しやリンクが正しいか確認しよう。

ひよこ

そのあとmainへpushすると毎回本番が変わる？

ペンギン先生

設定したProduction Branchへの変更が、通常は本番デプロイにつながるよ。mainが多いけれど設定次第。別のブランチやPRは通常プレビューになるので、確認してから本番へ取り込めるんだ。

ひよこ

環境変数なら秘密のキーを置いても大丈夫？

ペンギン先生

コードに直書きしないための手段だけれど、ブラウザへ埋め込む値は公開されるよ。AstroのPUBLIC_のような公開用の名前や、HTMLへ出力するコードを確認しよう。今回の静的サイトには秘密のキーは不要。

ひよこ

無料で使える範囲は？

ペンギン先生

Hobbyは個人の非商用利用向け。上限や条件は公式で確認し、仕事や収益につながる用途なら適合するプランを選ぶよ。「個人だからどんなサイトでも無料」とは考えないでね。

ひよこ

独自ドメインも最初からいる？

ペンギン先生

最初は発行されたvercel.appのURLで確認できるよ。独自ドメインはあとから追加し、画面に出るDNS設定に従う。まず公開とプレビューの流れがわかれば、一歩目として十分だよ。

最初のゴール：発行されたURLで自分のページが見える

今回は自分が所有する、個人の非商用の練習用サイトを想定します。VercelのHobbyはこの用途向けです。仕事や収益がある場合などは、公開前にプランの利用条件を確認してください。

1. ローカルで表示とビルドを確認する

Astro入門の小さなサイトなどを用意し、そのプロジェクトのフォルダで npm run build を実行します。静的出力なら、通常は dist にHTMLが生成されます。

GitHubへは自分の練習用リポジトリとして保存します。.env、秘密のキー、個人情報、生成不要なファイルが含まれていないか確認。package.json と依存関係のロックファイルは含め、Vercelでも同じ依存関係でビルドできるようにします。

2. リポジトリをImportする

Vercelでアカウントを作り、GitHub連携で必要なリポジトリを許可します。新しいProjectで練習用のリポジトリをImport。画面の名称が変わる場合も、次の設定を確認しましょう。

独自設定があるプロジェクトでは、その設定に合わせます。静的Astroの基本配信にはVercelアダプターは必須ではありません。SSRやVercel固有機能へ進む場合は、使うAstro・アダプターの版に合う公式手順を読みます。

3. Deploy後にURLを開く

新規プロジェクトの初回デプロイは本番です。完了したデプロイのURLを開き、自分の見出し・画像・リンク・スマホ表示を確認します。この静的な練習なら、ログインや決済は作っていません。

失敗時はDeploymentsのビルドログで、最初に出た具体的なエラーを読みます。ローカルの npm run build が通るか、Root Directory、依存関係、環境変数、Node.jsの版を比較。「Vercelだから何も設定しなくてよい」とは限りません。

次の変更はプレビューで確認する

初回のあとは、設定したProduction Branch（mainなど）以外のブランチやPRで通常プレビューが作られます。プレビューで確認し、レビューしてから本番ブランチへ取り込む流れが作れます。自動本番反映を変更する設定もあるため、プロジェクトの設定を確認してください。

プレビューも配信先です。アクセス制限の設定やプランによって公開範囲が変わります。「URLが長いから秘密」「Previewだから本番のデータに触れない」とは限りません。環境変数の適用先と、実際につながるデータベース・APIを分けます。

環境変数とドメインは必要になってから

環境変数はProduction・Preview・Developmentなど、適用先を指定します。変更後は新しいデプロイへ反映されるので、設定変更だけで既存の成果物が変わると考えないようにしましょう。

Astroで PUBLIC_ を付けた値はクライアント側にも使えます。逆に公開用の接頭辞がなくても、サーバー側で値をHTMLへ書けば公開されます。キーを入れる前に、どこで使い、何がブラウザへ届くかを確認します。

独自ドメインはDomainsから追加し、表示されたDNSレコードを自分のDNS管理画面へ設定します。先に発行URLで表示が正常か確認すると、DNSの問題とビルドの問題を分けられます。CLIや別のCIを追加するのは、Git連携だけでは足りない目的ができたときで大丈夫です。

まずGit入門でブランチを整理し、動的なアプリへ進むならNext.js入門へ進めます。

参考資料

2026年10月9日確認。

• Vercel — Hobby — 個人・非商用の利用条件
• Vercel — Environments — 初回本番とブランチ別のデプロイ
• Vercel — Astro — 静的出力とアダプターの役割
• Vercel — Environment variables — 適用環境と次のデプロイ
• Astro — Environment variables — PUBLIC_とブラウザへの公開
• Vercel — Configure a build — ビルド・出力・ルート設定
• Vercel — Domains — 独自ドメインとDNS