奧微官網
Vibe Coding 從零開始 / 做出小店預約 / 第 07 課

VIBE CODING · 第 07 課

請 Codex 準備開發環境:
Docker 在做什麼?

小店預約從這一課正式開工。你裝好 Docker Desktop、下載起點包,剩下的交給 Codex:檢查環境,再把資料庫、Redis 和測試收信匣跑起來。

  1. PHASE 01認識 Vibe Coding 和工具
  2. PHASE 02第一次做出東西
  3. PHASE 03規劃你的產品
  4. PHASE 04做出小店預約
  5. PHASE 05上線前要懂的事
  6. PHASE 06換成你的點子
  7. PHASE 07往商用產品前進
  • 網頁
  • 後台
  • App
Docker
  • API
  • 資料庫
  • Redis
  • 測試收信匣

這一課動到:Docker、資料庫、Redis、測試收信匣

你現在在這裡:第 4 階段的第一課。上一課寫好了產品說明、看懂了零件地圖;這一課加上 Docker 這個工作箱,讓資料庫、Redis 和測試收信匣在你的電腦上跑起來。

Docker 在做什麼?

Docker 像一個打包好的工作箱:資料庫、Redis 這些零件連同需要的設定一起裝箱,在誰的電腦上打開都一樣能跑。這一課你只要自己裝好 Docker Desktop、下載起點包,再請 Codex 檢查環境、把小店預約需要的工作箱跑起來。成功時,Docker Desktop 裡看得到每個工作箱都在執行中。

工作箱、Docker Desktop 和 Docker Compose

每一個工作箱的正式名稱叫容器(container),裡面裝著一個零件,例如資料庫。官方說明 ↗

Docker Desktop 是管理這些工作箱的 App,像倉庫的管理面板:哪些箱子正在運作、哪些停了,一眼就看得到。

Docker Compose 像一張開店清單:一份叫 docker-compose.yml 的檔案寫好「這家店要開哪些工作箱」,照清單一次全部啟動。它跟著 Docker Desktop 一起裝好,不用另外安裝。官方說明 ↗

專案守則檔:你給 Codex 的工作規矩

起點包裡有一份 AGENTS.md,這是你給 Codex 的工作規矩:小店的服務項目和營業時間、資料夾怎麼分、API 網址怎麼命名、用哪些技術和版本,還有「每完成一步存一個版本」「密碼不能直接寫在程式裡」「自動測試放在 backend/tests/」這些做事原則。Codex 每次動工前會先讀它,所以每位學員的 Codex 做出來的結構都一樣,後面每一課的提示詞才對得上。你不用背它,也不用改它;第 08、11 課檢查 Codex 做得好不好時,會拿它當標準答案。先看看專案守則檔的內容

localhost 是什麼

這一課會打開 http://localhost:8025 這種網址。localhost 指的就是你自己這台電腦,後面的數字像櫃台的窗口號碼,不同的服務在不同的窗口,例如 8025 號窗口是測試收信匣。這些網址只有你自己的電腦打得開。

第 04、05 課的 my-shop 是暖身,這一課不再用它。小店預約從起點包的 shop-booking 重新開始,資料夾結構一開始就照專案守則排好。

成果預覽:工作箱都跑起來了

Docker Desktop 的容器列表:shop-booking 這一組展開後,資料庫(PostgreSQL)、Redis、測試收信匣(Mailpit)三個工作箱,狀態都是執行中的綠色。
Docker Desktop 的容器列表:shop-booking 這一組展開後,資料庫(PostgreSQL)、Redis、測試收信匣(Mailpit)三個工作箱,狀態都是執行中的綠色。
瀏覽器打開 http://localhost:8025,看到 Mailpit 空的測試收信匣。
瀏覽器打開 http://localhost:8025,看到 Mailpit 空的測試收信匣。

你的畫面不會和截圖一模一樣:工作箱的名稱、排列順序、Docker Desktop 的版本都可能不同。三個工作箱都是綠色的執行中,就是做對了。

上課前:準備好這三樣

電腦
第 01 課準備好的 Mac。Docker 官方寫明支援目前和前兩個主要版本的 macOS,記憶體至少 4 GB。系統需求 ↗
時間與網路
Docker Desktop 和工作箱都要下載,挑網路穩定、可以慢慢等的時段做。
Codex 和 VS Code
ChatGPT 桌面 App 裡的 Codex,和第 05 課裝好的 VS Code。

這三步要你自己按

安裝軟體、輸入電腦密碼、同意使用條款,只有你能做。

步驟 1下載並安裝 Docker Desktop

  1. 打開官方安裝說明頁 docs.docker.com,按「Docker Desktop for Mac with Apple silicon」下載。
  2. 打開下載好的 Docker.dmg,把 Docker 圖示拖進「應用程式」資料夾。
  3. 到「應用程式」資料夾雙擊 Docker 打開。
官方安裝說明頁的 Apple silicon 下載按鈕,和把 Docker 拖進「應用程式」的畫面。
官方安裝說明頁的 Apple silicon 下載按鈕,和把 Docker 拖進「應用程式」的畫面。

做完應看到:「應用程式」資料夾裡多了 Docker,雙擊後開始啟動。

不確定自己的 Mac 是不是 Apple 晶片:按左上角蘋果選單 →「關於這台 Mac」,看「晶片」那一行寫的是 Apple M 開頭就對了。Apple 說明 ↗

步驟 2同意條款、輸入電腦密碼

  1. 第一次打開會出現 Docker 的使用條款,看過後按「Accept」。
  2. 安裝設定選「Use recommended settings」(推薦設定),按「Finish」。
  3. Mac 要你輸入密碼時,輸入你開機用的電腦密碼。
  4. 如果問你要不要登入 Docker 帳號,可以先跳過,這門課不需要。
Docker 使用條款的畫面、推薦設定的選項,和 Mac 要求輸入密碼的視窗。
示意圖Docker 使用條款的畫面、推薦設定的選項,和 Mac 要求輸入密碼的視窗。

做完應看到:Docker Desktop 的主畫面打開,螢幕上方選單列出現一隻鯨魚圖示。

要不要付費:個人使用、教育用途,以及員工少於 250 人且年營收低於 1,000 萬美元的小公司可以免費使用。官方授權說明 ↗

步驟 3下載起點包,解開成「文件」裡的 shop-booking

  1. 下載起點包 starter.zip。
  2. 雙擊 starter.zip 解開,會得到一個 shop-booking 資料夾,把它拖進「文件」裡。

下載起點包(starter.zip)

Finder 的「文件」裡的 shop-booking 資料夾,裡面有 AGENTS.md。
Finder 的「文件」裡的 shop-booking 資料夾,裡面有 AGENTS.md。

做完應看到:「文件」裡有 shop-booking 資料夾,打開後看得到 AGENTS.md。

看不到 AGENTS.md 以外的檔案是正常的:起點包只放了專案守則,其他資料夾和檔案,Codex 會照守則一課一課建出來。

Windows:到 Windows 版安裝說明下載 Docker Desktop,安裝時會用到 Windows 內建的 WSL 2,照畫面指示完成;起點包一樣解開成「文件」裡的 shop-booking。

操作步驟:環境健檢,再把工作箱跑起來

步驟 1環境健檢:請 Codex 檢查這台電腦缺什麼

  1. 確認 Docker Desktop 已經打開,選單列看得到鯨魚圖示。
  2. 在 ChatGPT 桌面 App 選「打開資料夾」,選「文件」裡的 shop-booking,按「New chat」開新對話。
  3. 按「複製」,貼到輸入框送出。
請先讀這個資料夾的 AGENTS.md,再幫我做環境健檢:檢查這台電腦做這個專案還缺什麼。
至少檢查:Docker Desktop 有沒有裝好、有沒有在執行,Docker Compose 能不能用,Git 能不能存版本,磁碟空間夠不夠。
這一步先不要安裝或修改任何東西。請用白話列出每一項「正常」或「缺少」;缺少的,告訴我要怎麼補、哪些需要我自己按。
Codex 回報環境健檢結果,每一項標示正常或缺少。
示意圖Codex 回報環境健檢結果,每一項標示正常或缺少。

做完應看到:Codex 列出每一項的結果。全部正常就做下一步;有缺少的,照它說的補好,再貼一次提示詞。

如果 Codex 要執行指令前先問你同不同意:看清楚它要做什麼,是檢查、不是刪除東西,就同意。

步驟 2請 Codex 把資料庫、Redis 和測試收信匣跑起來

  1. 按「複製」,貼到輸入框送出。
  2. 第一次啟動要下載工作箱,等 Codex 回報完成。
請照 AGENTS.md,用 Docker Compose 把這三個服務跑起來:資料庫 PostgreSQL、Redis、測試收信匣 Mailpit。
這一課只做這三個服務,後端、網頁和 App 之後的課才做。資料庫密碼照守則放在 .env,不要寫進其他檔案。
跑起來後,確認三個服務都在執行中,用白話告訴我怎麼在 Docker Desktop 看到它們、怎麼打開測試收信匣。
Codex 回報三個服務都已啟動,並附上測試收信匣的網址。
示意圖Codex 回報三個服務都已啟動,並附上測試收信匣的網址。

做完應看到:Codex 回報三個服務都在執行中。

等很久沒反應:第一次要下載好幾個工作箱,網路慢時要等一陣子。超過十分鐘還沒好,請看下面的「卡住時怎麼辦」。

步驟 3在 Docker Desktop 確認三個工作箱都是綠色

  1. 切到 Docker Desktop,點左邊的「Containers」(容器)。
  2. 找到 shop-booking 這一組,點旁邊的箭頭展開。
Docker Desktop 的容器列表,shop-booking 展開後三個工作箱都顯示執行中的綠色。
Docker Desktop 的容器列表,shop-booking 展開後三個工作箱都顯示執行中的綠色。

做完應看到:shop-booking 底下有資料庫、Redis、Mailpit 三個工作箱,狀態都是綠色的執行中。

步驟 4打開測試收信匣

  1. 在瀏覽器網址列輸入 http://localhost:8025,按 Enter。
瀏覽器裡 Mailpit 的收信匣畫面,目前一封信都沒有。
瀏覽器裡 Mailpit 的收信匣畫面,目前一封信都沒有。

做完應看到:Mailpit 的收信匣,裡面還是空的。第 14 課預約成功後,確認信會寄到這裡。

步驟 5用 VS Code 看 Codex 改了哪些檔案,存一個版本

  1. 在 VS Code 按「File」→「Open Folder…」,打開 shop-booking。
  2. 看左邊的檔案列表:多了 docker-compose.yml、.env.example 等檔案。
  3. 回到 Codex,貼上下面這段。
請用白話告訴我,這一課你新增或修改了哪些檔案、各做什麼用;確認 .env 沒有被存進版本後,幫這個專案存一個版本,說明寫「第 07 課:資料庫、Redis、測試收信匣跑起來」。
VS Code 左邊的檔案列表,看得到 AGENTS.md、docker-compose.yml、.env.example。
VS Code 左邊的檔案列表,看得到 AGENTS.md、docker-compose.yml、.env.example。

做完應看到:Codex 說明了每個檔案的用途,並回報版本已經存好。

Windows:Docker Desktop 的畫面和 Mac 幾乎一樣,左邊一樣有「Containers」;Codex 的提示詞不用改。

成果檢查

成功的樣子:

  • Codex 做完環境健檢,每一項都是正常。
  • Docker Desktop 的 shop-booking 底下,資料庫、Redis、Mailpit 三個工作箱都是綠色的執行中。
  • 瀏覽器打開 http://localhost:8025,看得到空的測試收信匣。
  • Codex 回報存好了第 07 課的版本。

還沒成功的樣子:Docker Desktop 裡看不到 shop-booking、有工作箱是灰色的已停止(Exited)或一直重新啟動,或 localhost:8025 打不開。照下面「卡住時怎麼辦」處理。

畫面和截圖不一樣是正常的,工作箱的名稱和順序可能不同,看狀態是不是綠色就好。

做不出來也沒關係:下載本課的進度存檔,解開後放進「文件」取代 shop-booking,用 VS Code 打開,再請 Codex 照 AGENTS.md 把服務跑起來,下一課接著做。

下載第 07 課的進度存檔(07.zip)

卡住時怎麼辦

Codex 說 Docker 沒有在執行

先確認 Docker Desktop 已經打開、選單列有鯨魚圖示,等它完全啟動後,把這段貼給 Codex:

我已經打開 Docker Desktop 了,請再檢查一次 Docker 能不能用;可以的話,照剛剛的要求把三個服務跑起來。

有工作箱停止或一直重新啟動

Docker Desktop 裡 shop-booking 有工作箱沒有在執行(停止或一直重新啟動)。
請看它的紀錄找出原因,用白話告訴我哪裡出問題,修好後再確認三個服務都在執行中。

Codex 說連接埠被佔用

代表電腦裡有別的程式用了同一個窗口號碼。不用自己找,請 Codex 處理:

你說有連接埠被佔用。請告訴我是哪個程式佔用的;不要關掉我其他的程式,改用其他沒人用的連接埠,並更新 AGENTS.md 裡的網址表,改完告訴我新的網址。

localhost:8025 打不開

我在瀏覽器打開 http://localhost:8025 看不到測試收信匣。請檢查 Mailpit 有沒有在執行、網址對不對,修好後告訴我正確的網址。

練習:把工作箱關掉,再請 Codex 打開

之後每次接著上課,都要先把工作箱打開。先練習一次:

請把 shop-booking 的服務全部停下來,告訴我怎麼在 Docker Desktop 確認它們停了。

在 Docker Desktop 看到三個工作箱都停了之後,再請 Codex 打開:

請把 shop-booking 的服務全部啟動,確認都在執行中後告訴我。

三個工作箱回到綠色,就代表你會開店、也會打烊了。下一課會在資料庫裡存進第一筆預約。

常見問題

Docker 是什麼?

Docker 像打包好的工作箱:資料庫、Redis 這些零件連同需要的設定一起裝箱,在誰的電腦上打開都一樣能跑。你不用自己一個一個安裝,請 Codex 寫好清單、用 Docker 啟動就好。

Docker Desktop 要付費嗎?

個人使用、教育用途,以及員工少於 250 人而且年營收低於 1,000 萬美元的小公司可以免費使用。超過這個規模的公司商業使用要付費訂閱,詳見 Docker 官方的授權說明。

關掉電腦之後,資料會不見嗎?

不會。專案守則要求 Codex 把資料庫的資料另外存好,服務停下再啟動,資料還在。重新開機後,先打開 Docker Desktop,再請 Codex 啟動服務就好。

為什麼不接著用第 04 課的 my-shop?

my-shop 是暖身用的單一網頁。小店預約需要後端、資料庫、網頁、後台和 App 分開放,所以從起點包的 shop-booking 重新開始,資料夾結構一開始就照專案守則排好。

用 Windows 可以做這一課嗎?

可以。Windows 也有 Docker Desktop,安裝時會用到 Windows 內建的 WSL 2,照安裝畫面的指示完成即可;之後請 Codex 啟動服務的提示詞一樣。

來源與版本

官方資料查閱日:2026-09-29。Docker Desktop 與 Codex 的按鈕名稱可能隨版本改變;操作畫面會在 Mac 實際操作時錄製,並標示使用的版本。專案守則裡的技術版本,是查閱日各官方發布頁的現行穩定版。獨立教學,非 Docker、OpenAI 的官方課程。