6-3 Vercel公開

デプロイとは

デプロイとは、ローカルで作ったWebサイト/アプリをインターネット上に公開することです。

2024年以降、無料で使えるホスティングサービスが充実しており、個人プロジェクトや社内ツールなら費用ゼロで公開できます。

> デプロイとは何か、初心者にもわかるように
> 30秒で読める説明を書いて。
> 無料で使えるサービスも3つ紹介して。

Before / After：デプロイの簡易化

Web サイトを公開する方法がどう変わったかを見てみましょう。

Before（従来の方法）

• レンタルサーバーを契約（月額500〜3000円）
• FTP でファイルをアップロード
• SSL 証明書を別途取得・設定
• ドメイン設定を手動で行う

After（現在の方法）

• GitHub にコードをプッシュ
• Vercel/Cloudflare Pages が自動でデプロイ
• SSL/ドメインも自動設定
• すべて無料

Vercel でデプロイ

最もシンプルなデプロイ方法です。

> このプロジェクトを Vercel にデプロイしたい。
> 必要な設定ファイル（vercel.json）を作って。
> デプロイの手順も教えて。

GitHub Pages でデプロイ

GitHub リポジトリから直接公開する方法です。静的サイト向け。

> このプロジェクトを GitHub Pages で公開したい。
> git の初期化から GitHub へのプッシュ、
> Pages の設定まで手順を教えて。

期待される出力

Claude Code はデプロイに必要なすべてのファイルと手順を提供します。

• vercel.json や package.json などの設定ファイル
• git の初期化コマンド
• GitHub リポジトリの作成手順
• デプロイコマンドの実行
• 公開後のURLの確認方法

手順通りに進めれば、10分以内に公開できます。

git init
git add .
git commit -m "Initial commit"
npx vercel

✅ Deployed to https://my-site.vercel.app

独自ドメインの設定

デプロイしたサイトに独自ドメインを設定する方法も、Claude Code に聞くだけで案内してもらえます。

• ドメイン取得（お名前.com、Cloudflare 等）
• DNS の設定（CNAME レコード追加）
• SSL の設定（ほとんどのサービスで自動）

技術的な手順は Claude Code がガイドしてくれるので、初めてでも問題なく進められます。

> Vercel に独自ドメイン example.com を設定したい。
> DNS の CNAME レコードの設定方法と
> Vercel 側の設定手順を教えて。

よくある失敗と対処法

デプロイでよくあるトラブルです。

「ページが表示されない」 → index.html がプロジェクトのルートにあるか確認してください。サブフォルダに入っている場合はパスの設定が必要です。

「CSSが反映されない」 → ファイルパスが相対パス（./style.css）になっているか確認。絶対パス（/style.css）だと動かないことがあります。

「更新が反映されない」 → ブラウザのキャッシュが原因のことが多いです。Ctrl + Shift + R でハードリロードしてみてください。

> デプロイしたけどページが真っ白。
> index.html のパスとリンク切れを確認して。
> 修正が必要なら直して。

まとめ

このレッスンのポイントを振り返ります。

• Vercel、GitHub Pages、Cloudflare Pages で無料デプロイ可能
• Claude Code が設定ファイルと手順を自動生成してくれる
• 独自ドメインも後から追加可能
• まずは無料ドメインで公開し、必要に応じて独自ドメインに

次の第7章では、データ分析とダッシュボード作成を学びます。