前回の記事では、「GitとGitHub」を使って、大切なプログラム（設計図）をクラウド上の倉庫に保存する方法を解説しました。
しかし、倉庫に設計図を入れただけでは、お客さん（ユーザー）はあなたのアプリを使うことができません。
レストランで例えるなら、「レシピと食材は倉庫にあるけど、まだお店が建っていない状態」です。
そこで登場するのが、今日の主役 Vercel（バーセル） です。
今回は、難しいサーバーの知識ゼロで、あなたの作ったアプリを世界中に公開（デプロイ）する手順を解説します。
1. おさらい：Git、GitHub、Vercelの関係図
作業に入る前に、これら3つのツールの役割を整理しましょう。これが分かれば、エラーが出ても怖くありません。
🏗️ Web開発の「三種の神器」役割分担
- Git（VS Code）：現場の作業員
手元でコードを書き、変更履歴（セーブデータ）を作ります。 - GitHub：クラウド倉庫
Gitから送られてきた設計図と資材を保管する場所です。
（※前回ここまでやりました） - Vercel：自動施工ロボット兼「土地」
GitHub（倉庫）を常に見張っています。新しい設計図が届くと、それを勝手に取り出して、自動でWebサイト（店舗）を組み立てて、インターネット上に公開してくれます。
つまり、あなたは「GitHubにコードを送るだけ」。
あとはVercelが勝手に公開作業を行ってくれます。これを「継続的デプロイ（CD）」と呼びますが、要は「全自動公開機能」のことです。
2. 【実践】Vercelでアプリを公開する3ステップ
では、実際にやってみましょう。所要時間は5分です。クレジットカードの登録も不要で、個人開発なら完全無料で使えます。
Step 1: Vercelのアカウント作成
- Vercelの公式サイトにアクセスし、右上の「Sign Up」をクリック。
- 「Hobby（個人向け）」を選択し、名前を入力。
- 「Continue with GitHub」を選択します。
※これでGitHub倉庫とのコネクション（鍵の連携）が完了します。一番楽な方法です。
Step 2: 公開するプロジェクト（倉庫）を選ぶ
ログインするとダッシュボードが表示されます。
- 画面上の「Add New ...」ボタンを押し、「Project」を選択。
- 左側に、あなたのGitHubにあるリポジトリ（倉庫）の一覧が表示されます。
- 前回作成したアプリ（例：
my-first-app）の横にある「Import」ボタンをクリック。
Step 3: デプロイ（公開）ボタンを押す
設定画面が出てきますが、Next.jsで作ったプロジェクトなら設定変更は一切不要です。
- 一番下の青い「Deploy」ボタンをクリック。
- 画面が切り替わり、工事中のログが流れます。1〜2分待ちましょう。
- 紙吹雪が舞ったら完成です！🎊
表示された画像のクリックか、「Visit」ボタンを押すと、世界中どこからでもアクセスできる本物のURLが開きます。
おめでとうございます！これであなたは「Webアプリ開発者」としてデビューしました。
3. 【超重要】セキュリティの「鍵」をセットする
「よし、公開完了！」と思いきや、アプリによっては「画面が真っ白」「データベースに繋がらない」というトラブルが起きます。
その原因の9割は、前回の記事で紹介した「.env（環境変数）」の設定忘れです。
⚠️ Vercelには「鍵」が届いていません！
覚えていますか？
前回、.env ファイル（パスワードなどが書かれたファイル）は、セキュリティのために「GitHubには送らない（.gitignore設定）」と決めました。
つまり、GitHub経由で設計図を受け取ったVercelも、パスワードを知らない状態なのです。
これではアプリは動きません。
✅ 解決策：Vercelの金庫に鍵を入れる
Vercelの管理画面で、直接パスワードを教えてあげる必要があります。
- Vercelのプロジェクト画面上部の「Settings」をクリック。
- 左メニューの「Environment Variables」を選択。
- 手元の
.envファイルの中身をコピペして登録します。- Key: 変数名（例：
DATABASE_URL） - Value: パスワード本体（例：
postgres://...）
- Key: 変数名（例：
- 登録後、設定を反映させるために「Redeploy（再デプロイ）」が必要です。
（Deploymentsタブ → 最新の履歴の「...」 → Redeploy）
4. 公開する際の注意事項（ライセンスとドメイン）
最後に、公開したアプリを運営していく上で知っておくべき2つのポイントを紹介します。
① 独自ドメインを使おう
初期状態では my-app.vercel.app のようなURLになっています。これでも動きますが、本格的にサービスとして運用するなら「信頼性」に欠けます。
Settings → Domains から、お名前.comやXserverドメインで取得した「自分だけのドメイン（例：simplekits.tech）」を無料で紐付けることができます。
② ソースコードの権利（ライセンス）
前回のGitHub編でも触れましたが、もしリポジトリを「Public（全体公開）」にしている場合、コード自体が世界中に見えています。
商用サービスのコードであれば、GitHub側は「Private（非公開）」にしておくのが無難です。
（※Vercelへの公開自体は、GitHubがPrivateでも問題なく行えます）
まとめ：自動化で「作る」ことに集中しよう
昔はWebサイトを公開するために、「FTPソフト」を使ってファイルを転送したり、黒い画面でサーバーの設定をしたりと、大変な苦労がありました。
しかし今は、「VS Codeで保存」→「GitHubにプッシュ」。
たったこれだけで、Vercelが数分後には世界中に最新版を公開してくれます。
面倒なインフラ管理はAIやツールに任せて、私たちは「どんなアプリを作るか」というクリエイティブな部分に全力を注ぎましょう！