前回で Astro の雛形を作って、手元でトップが開くところまで できました

今回はそのサイトを 本番として公開するところまで の回

ホスティング（どこに載せるか）と DNS（どのドメインで見せるか）は別の話
今回はホスティング Vercel、DNS Cloudflare という組み合わせで検討してみます

前回までで動かしたサイトを、どう本番に出すか

前回まででできていたのは、だいたいこんな状態

web/ 配下に Astro プロジェクト（一覧・詳細・タグの骨組み）
ローカルは docker-compose で起動
コンテンツは JSON と Content Collections の二系統

本番に要るのは2つ。ビルドした静的ファイルを配信する場所 と 独自ドメインでアクセスできる経路

レイヤ	役割	今回使うもの
ホスティング	`astro build` の成果物を HTTPS で配信	Vercel
DNS	サブドメインをホスティング先に向ける	Cloudflare（既存ゾーンにレコード追加）

雛形づくりは前回までで済んでいるので、本記事は デプロイ設定・ドメイン接続・SSL の切り分け だけ

Vercel って何をするサービスか

Vercel は フロントエンド向けのホスティング。GitHub リポジトリと連携すると、push やマージのタイミングでビルドして HTTPS で配信してくれる

ざっくり次の流れ

GitHub にコードがある
Vercel がビルド（npm run build など）
成果物を CDN から配信

Astro みたいな静的サイトジェネレータもサポートしていて、フレームワークを選ぶとビルドコマンドをある程度 自動検出 する。ただ今回みたいに web/ サブディレクトリ構成だと、後述のとおり 設定の明示が要る

参考: Vercel ドキュメント

GitHub 連携のイメージ

Vercel ダッシュボードでリポジトリをインポート
main への push（またはマージ）で本番デプロイが走る
PR （Pull Request）にはプレビュー用の一時 URL が付く（本記事では URL は載せない）

サイト構成を決めた回で決めた Issue → PR → マージ と組み合わせると、コンテンツをマージすればサイトが更新される——という運用

このブログ（hack-plus）も Vercel 上なので、ダッシュボードの見え方はだいたい同じ

Vercel プロジェクト接続

コードを Github に push したあと、Vercel 側で GitHub リポジトリをインポートする

GitHub リポ連携

Vercel で New Project → 対象リポジトリを選択
Framework Preset は Astro（検出されるはず）
Root Directory は web にするか、リポジトリルートのままか — vercel.json の置き場所と揃える
Deploy

Vercel のプロジェクト設定（Framework / Root Directory / Build）

ビルドでハマったところ（exit 127）

初回デプロイは ビルド失敗。ログを見ると、Vercel が astro コマンドを直接叩こうとして exit 127（コマンドが見つからない）になっていた

対処は npm run build 経由に寄せる こと。ルートの vercel.json でこういう形（要点だけ。全文はリポの vercel.json を参照）

{
  "installCommand": "npm install --prefix web",
  "buildCommand": "npm run build --prefix web",
  "outputDirectory": "web/dist"
}

あわせて web/.node-version で Node 22 を指定。ローカルは docker-compose だけど、本番のビルド環境は Vercel 側なので 別途バージョン指定が要る

web/vercel.json も置いている（Root Directory を web にした場合用）。どちらが効くかは Vercel のプロジェクト設定次第 なので、ダッシュボードの Root Directory とセットで確認した

修正後に再デプロイで Ready になった

Vercel Deployments で Production が Ready になっている画面

Node バージョン

web/.node-version に 22 を書いている。Astro と Tailwind v4 の組み合わせで、古い Node だと別の理由で落ちる 可能性がある

確認ポイント

確認項目	こうなっていればOK
デプロイステータス	Ready（緑）
ビルドログ	`astro build` が完走している
デフォルト URL	`*.vercel.app` でトップが開く（URL 自体はブログに載せない）

Cloudflare で DNS を向ける

Cloudflare は ドメインの DNS を管理する サービス。ゾーンを登録しておくと、サブドメインごとに「どこに向けるか」をレコードで指定できる

参考: Cloudflare DNS ドキュメント

Vercel でデプロイが通ったあと、やることはだいたい2つ

Vercel にカスタムドメインを登録する
Cloudflare に CNAME レコード を1本足して、サブドメインを Vercel の配信先へ向ける

サブドメインと `site` の設定

リポジトリ名に揃えたサブドメイン（{repo-name}.example.com のような形）を使った。既存サイトと同型で、ゾーンに CNAME を足すだけ

コード側では web/astro.config.mjs の site フィールドを本番ドメインに更新している
canonical URL や sitemap で効くので、DNS を向ける前に合わせておく

ドメイン接続の手順

Vercel にカスタムドメインを追加 — プロジェクトの Settings → Domains
Vercel が表示する CNAME ターゲットを確認 — ドメインごとに固有の値が出る（汎用の cname.vercel-dns.com だけでは足りないこともある）
Cloudflare で CNAME レコードを追加 — サブドメインを、手順2のターゲットへ向ける
Domains に載っているか確認 — Settings → Domains にカスタムドメインが出ているか見る（細かい表示ラベルは環境で違うので、ここでは深追いしない）
ブラウザでトップが開くか確認 — 最終判断はこちら

Cloudflare DNS Records に CNAME を追加した画面

DNS の反映には数分かかることがある。レコードを直した直後に焦らなくてよい

プロキシ（オレンジ雲）

Cloudflare のレコードには プロキシ ON/OFF がある。ON にするとリクエストが Cloudflare を経由してから Vercel に届く

既存サイトと同じく プロキシ ON で運用。SSL は Cloudflare と Vercel の2段になるので、向けた直後は後述の 525 が出ることがある

Cloudflare の CNAME 編集画面（Proxied ON）

SSL と 525 エラーの切り分け

ドメインを向けた直後、ブラウザでは HTTP 525（SSL handshake failed） が一時的に出た

事前に Cursor 側へ入れておくもの

525 が出たときにログを読ませるだけだと手戻りが増えるので、Vercel CLI を入れておくと楽

npm install -g vercel
vercel login

これで vercel domains 系の確認を Cursor に任せられる。ダッシュボードを開かずに、ドメインの状態を CLI で見られる

原因（今回）

Vercel 側は問題なさそうなのに 525 が出る——という状態だった。設定ミスというより、証明書のプロビジョニングと Cloudflare 側の伝播待ち が原因

数分〜十数分待つと解消した。焦って Cloudflare の設定をいじりまくるより、DNS 反映を待ってブラウザで再確認 する方が早かった

こうなっていれば完成

手順が終わったら、最後に次の2点を確認する。ここまでいけば今回のゴールはクリア

1. Vercel の Domains

プロジェクトの Settings → Domains を開く

確認項目	こうなっていればOK
カスタムドメイン	一覧に登録されている（表示ラベルの細部は環境差があるので、ここでは見ない）
最新デプロイ	Production が Ready

ダッシュボードの表示だけで完璧を求めすぎない。次の本番 URL 確認 が最終判断

Vercel Domains の画面（カスタムドメインが一覧に載っている）

2. 本番 URL でトップが開く

本番 URL は https://devrev-aruaru.konchangakita.com（リポジトリ名に揃えたサブドメイン）

ブラウザで開いて、前回手元で確認したのと同じく トップページが表示されればOK。一覧がざっくり出ていれば十分——デザインの細部はまだ仮のまま

本番 URL のトップページ

*.vercel.app のデフォルト URL でも開けるが、独自ドメインで問題なく見えるか を最終確認の基準にした

今回の HACK+PLUS

デプロイまわりは 準備をしておくと AI に任せやすい 回だった

HACK（新しい発見）

ビルド設定はリポに入れておく — 落ちたらログを渡すだけ
Vercel CLI を入れておくと楽 — ドメイン確認をダッシュボードなしで回せる
525 は直すより待つことが多い — DNS・証明書の伝播待ち

PLUS（ハマりどころ・次の一手）

Import やトークン発行は人間 — AI はログ・CLI・リポ修正まで
次回候補: GitHub Issue 投稿と entries.json の運用