コンテンツにスキップ
非エンジニアのためのVibeCoding入門

環境の分離 ——「自分のPCでは動く」問題

この章でわかること: 「手元では動くのに、公開したら壊れた」——デプロイでつまずく 原因の大半がこれです。カギは、**ローカル(自分のPC)と本番(Vercel などの公開先)は 別の場所で動く「別環境」**だと理解すること。この前提を持つだけで、商談前日の 「なぜか動かない」を大きく減らせます。

大前提:ローカルと本番は「別の家」

Section titled “大前提:ローカルと本番は「別の家」”

同じアプリでも、動く場所は2つあります。

  • ローカル: あなたのPCの中。開発しながら確認する場所
  • 本番: Vercel や Cloudflare などのクラウド上。お客さんや関係者が見る場所

この2つは、同じ間取りだが中の備品は別々の、2軒の家のようなものです。手元の家に 置いた家具(設定やデータ)は、引っ越し先(本番)には自動では運ばれません。 「自分の部屋にあるから、向こうの部屋にもあるはず」という思い込みが、事故の入口です。

なぜ「手元では動くのに公開すると壊れる」のか

Section titled “なぜ「手元では動くのに公開すると壊れる」のか”

代表的な原因は、だいたい次のどれかです。

  • 環境変数の設定漏れ: 手元の .env には書いたが、本番側に登録し忘れた。 アプリが鍵(APIキーやDB接続先)を見つけられず動かない。最頻出の原因です
  • 依存の差: 手元にだけ入っているツールやバージョンに頼っていて、本番には無い
  • URL やパスの違い: localhost を前提に書いてしまい、本番の正しいURLを指さない
  • データの差: 手元のDBにはテストデータがあるが、本番はまっさら

環境変数は「環境ごとに」設定が要る

Section titled “環境変数は「環境ごとに」設定が要る”

環境変数は、環境ごとに別々のメモだと考えてください。手元のメモ(.env ファイル)に 書いても、本番のメモには何も書かれていません。だから、本番の管理画面にも同じ項目を 登録する必要があります。Vercel なら「Project Settings → Environment Variables」、 Cloudflare なら「Settings → Variables and Secrets」あたりが登録場所です。

なぜこんな面倒な仕組みかというと、秘密の鍵(APIキーやパスワード)をコードに 書かず、環境ごとに安全に切り替えるためです。ここは秘密情報の扱いと直結します。

公開前に「本番相当」で一度確かめる

Section titled “公開前に「本番相当」で一度確かめる”

商談前日の事故を防ぐいちばんの薬は、公開前に本番に近い状態で一度動かしてみる 習慣です。開発中の表示と、実際に公開されたものは別物になり得ます。

  • デプロイ後、公開URLを自分で開いて、主要な画面を一通り触る
  • できればスマホや別のPCからも開く(自分のPC特有の事情を排除できる)
  • 本番URLで初めて気づく崩れ(画像が出ない、リンク切れ、鍵漏れエラー)を先に潰す

詰まったらAIにこう頼む

Section titled “詰まったらAIにこう頼む”

原因が見えないとき、AIに丸投げする前に「どこを疑ってほしいか」を添えると、 的外れな回答が減ります。環境の話なら、こう伝えるのが効きます。

なぜ大事か

Section titled “なぜ大事か”

デプロイの失敗の多くは、難しいバグではなく「環境が2つある」という前提を 忘れたことから起きます。ローカルと本番は別の家、設定は環境ごとに要る、公開前に 本番相当で確かめる——この3点を押さえるだけで、商談直前の「なぜか動かない」の ほとんどは未然に防げます。手元のローカル開発環境の作り方と あわせて、「別環境として扱う」感覚を身につけておきましょう。

参考リンク(情報ソース)

Section titled “参考リンク(情報ソース)”