🔰基礎技術

VercelでFirestoreを使ったWEBアプリを公開する手順｜コード変更から環境変数設定、公開確認までを徹底解説

2026年1月23日

以前の記事では、GitHubとVercelを連携させて、最初のWebサイトを公開するところまで解説しました。
（まだの方は、先にこちらの記事で連携を済ませておいてくださいね）

今回は、その続きです。
Webサイトは作って終わりではありません。内容を修正したり、新機能を追加したりと、常に「更新」していくものです。

「コードを書き換えたら、どうやって本番サイトに反映させるの？」
「秘密の鍵（環境変数）って、具体的にどこに設定するの？」

そんな疑問を解消するために、「コードの変更 → Vercelでの設定 → 公開確認」という一連の流れを、実際に手を動かしながら体験してみましょう。

Step 1: VS Codeでコードを変更してプッシュする

まずは、手元のパソコン（VS Code）でコードを少しだけ変更してみましょう。
Vercelのすごいところは、「GitHubにプッシュするだけで、自動的に本番サイトが更新される」という点です。

① コードを修正する

app/page.tsx（トップページ）を開き、タイトル部分のテキストを少し変えて保存します。

// app/page.tsx
export default function Home() {
return (
    <main>
{/* 変更前： <h1>Simple Memo App</h1> */}
      <h1 style={{ color: "blue" }}>Simple Memo App (更新テスト)</h1>
{/* ...他のコード... */}
    </main>
  );
}

② コミット＆プッシュする

変更を保存したら、Gitの操作です。VS Codeの左メニュー「ソース管理」を開きます。

  1. メッセージ欄に「タイトルの変更テスト」のように入力します。
  2. 「コミット」ボタン（チェックマーク✅）をクリックします。
  3. 最後に「変更の同期」ボタン（または上部メニュー「…」→「プッシュ」）をクリックして、GitHubへ送信します。

これで、あなたの変更データがGitHubの倉庫に届きました。
すると、GitHubと連携しているVercelが「おっ、新しい設計図が届いたな！」と気づき、自動的に工事（ビルドとデプロイ）を開始します。

Step 2: Vercel側で環境変数を設定する

さて、工事が始まったのですが、このままでは失敗する可能性が高いです。
なぜなら、前回の記事で触れた「環境変数（秘密の鍵）」をVercelにまだ教えていないからです。

手元の .env.local ファイルに書いた内容は、セキュリティのためにGitHubには送っていません。つまり、Vercelもその中身を知らないのです。
Vercelの管理画面で直接教えてあげましょう。

設定手順

  1. Vercelのダッシュボードを開き、対象のプロジェクトをクリックします。
  2. 画面上部のタブから「Settings」をクリックします。
  3. 左側のメニューから「Environment Variables」を選択します。

ここに、手元の .env.local ファイルの中身を登録していきます。

※設定画面のイメージ
  • Key（キーの名前）: .env.local の左側の部分（例: NEXT_PUBLIC_FIREBASE_API_KEY）
  • Value（値）: .env.local の右側の部分（例: AIzaSyD... などの長い文字列）

必要な変数をすべて入力したら、「Save」ボタンを押して保存します。
Firebaseなどを使っている場合は、複数の変数を登録することになります。

💡 重要：設定後は「再デプロイ」が必要！

環境変数を設定しても、現在進行中の工事（デプロイ）には反映されません。
設定を反映させるには、もう一度工事をやり直す必要があります。

次のStepで、その「再デプロイ」の方法も解説します。

Step 3: ビルド結果を確認し、再デプロイする

Vercelのプロジェクト画面に戻り、上部の「Deployments」タブをクリックしてください。
ここが「工事履歴」のページです。

① 履歴の見方

一番上に、先ほどStep 1でプッシュした「タイトルの変更テスト」という履歴があるはずです。

  • Statusが「Building（青色）」: まだ工事中です。少し待ちましょう。
  • Statusが「Ready（緑色）」: 成功です！本番サイトが更新されました。
  • Statusが「Error（赤色）」: 失敗です。環境変数の設定忘れなどが原因であることが多いです。

② 環境変数を反映させるための「再デプロイ」

もしStep 2で環境変数を設定した直後なら、最新のデプロイはエラーになっているか、古い設定のまま動いている可能性があります。
設定を反映させるために、手動で再デプロイを行いましょう。

  1. 最新の履歴の右端にある「…（三点リーダー）」ボタンをクリックします。
  2. メニューから「Redeploy」を選択します。
  3. 確認画面が出るので、そのまま「Redeploy」ボタンを押します。

これで、新しい環境変数の設定を使って、もう一度工事が始まります。

Step 4: 実際の画面で確認する

ステータスが「Ready（緑色）」になったら、いよいよ本番サイトの確認です。

  1. 「Ready」の横、または履歴のタイトル部分にあるリンク（URL）をクリックします。
  2. 新しいタブで、あなたのWebサイトが開きます。
  3. Step 1で変更したタイトル（色が青くなっているなど）が反映されているか確認しましょう。

無事に変更が反映されていれば大成功です！

まとめ：更新は「プッシュするだけ」

お疲れ様でした。これでVercelでの更新フローはマスターです。

  • 普段の更新は、VS Codeで「コミット＆プッシュ」するだけ。
  • 新しいAPIキーなどを追加した時だけ、Vercelの「Environment Variables」を設定して再デプロイする。

この2点さえ覚えておけば、面倒なサーバー操作を一切せずに、いつでもWebサイトを最新の状態に保つことができます。
どんどんコードを書いて、あなたのアプリを育てていきましょう！

-🔰基礎技術