MODULE 6 · 部署 · 6-9

邁向生產線的致命盲區:什麼是環境隔離 (Development vs. Production)?

網站上線了,很爽。但這裡藏著新手最容易翻車、後果最慘的一個雷。 先讓你親手按下那顆危險按鈕,你就懂為什麼要「分兩套」。

§1 · 先按下去看看

同一顆「清空資料」按鈕,按在哪裡天差地別

先選你現在站在哪個環境,再按那顆紅色按鈕。

我現在在:

一樣的按鈕、一樣的程式碼,按在練習場是放煙火,按在正式場是大災難。 差別就在你站在哪個「環境」。

§2 · 這是什麼

環境:同一個 App 的不同分身

先把名詞講清楚。

概念
環境(Environment)
同一個 App,可以同時跑好幾個分身。 程式碼一樣,但各自有各自的資料、各自的網址,互不干擾。
重點
至少有兩個分身
一個給你練習、隨便砸,一個給真實用戶用。 下面兩段,分別認識它們。
§3 · 分身一

Development(Dev):你的練習場

🧪Development(開發環境,簡稱 Dev)
  • · 跑在你自己電腦上(localhost),或一個專門的測試網址。
  • · 裡面全是你自己造的假資料,砸壞了沒人受傷。
  • · 新功能、危險操作,都先在這裡試到爽、試到對。
§4 · 分身二

Production(Prod):真實用戶的正式場

🌍Production(正式環境,簡稱 Prod)
  • · 就是你部署上線、真實用戶正在用的那個網站。
  • · 裡面是真實資料:真實訂單、真實會員、真實的錢。
  • · 神聖不可亂動。任何改動都要先在 Dev 試好,才敢碰它。
§5 · 為什麼

在 Dev 怎麼亂搞,Prod 都不痛不癢

按按看在練習場灌一堆假資料,看正式場有沒有被影響。

🧪
Dev 練習場
3
筆(假)資料
🌍
Prod 正式場
1,247
筆(真)資料 · 不動如山
看到了嗎?Dev 的數字一直跳,Prod 那 1,247 筆真實資料完全沒被碰到。 兩套各玩各的,這就是「環境隔離」要保護的事:測試的髒東西,永遠流不到真實用戶那邊。
動手分類:每個操作該在哪個環境做?
0 / 4
試一個剛寫好、可能會出錯的付款功能
把首頁標題的錯字修好,要讓用戶看到
刪掉一堆你之前造來測試的假訂單
幫一位真實客戶查他剛下的訂單
§6 · 小補充

有時候,中間還有第三個分身

🧪
Dev
隨便砸
🎭
Staging
上線前彩排
🌍
Prod
真實上演

Staging(預備環境)是一個「跟正式場長得幾乎一樣」的彩排場: 上 Prod 之前先在這裡走一遍,確認沒問題。剛起步可以先不用,知道有這個概念就好。

動手推一個「新付款功能」上線:通過一關,才推到下一關。
🧪
Dev
📦
🎭
Staging
🌍
Prod
功能在練習場跑起來了,先自己玩一輪。
重點:危險的東西一關一關往上推,每一關都先測過,最後才碰真實用戶。不會有人直接把沒測過的東西丟上正式場。
§7 · 留個伏筆

兩套環境,要連到兩套不同的資料

🧪 Dev 要連到 測試資料庫(假資料)
🌍 Prod 要連到 正式資料庫(真資料)

問題來了:同一份程式碼,怎麼讓它在 Dev 連到測試的家、在 Prod 連到正式的家? 這就是下一課的主角。

§8 · 試試看

快速檢查一下

答錯不會鎖死,可以一直重選。

答對 0 / 2
Q1

你想試一個「可能會刪到資料」的新功能,該在哪個環境做?

Q2

為什麼測試環境跟正式環境,要用各自獨立的資料?

🎒這一課帶走的
環境Development(Dev)Production(Prod)環境隔離

同一個 App 至少要有兩個分身:Dev 給你練習隨便砸、Prod 給真實用戶。兩套的資料徹底分開, 測試的髒東西永遠流不到真實用戶那邊。危險操作,先在 Dev 試。

🔑VIBE CODER 秘訣
👀觀察
任何會刪改資料的危險操作,動手前先確認自己現在連的是測試環境。
💬怎麼跟 AI 講
不確定時就問:「我現在這個操作會動到資料,先幫我確認現在是連到測試環境還是正式環境。」
下一課 同一份程式碼,怎麼讓它在 Dev 連測試資料、在 Prod 連正式資料?答案是環境變數。我們下一課就把它配好。