使用容器進行開發

目錄

說明

現在您已經安裝了 Docker Desktop，可以開始進行應用程式開發了。具體來說，您將完成以下事項：

  1. 複製並啟動開發專案
  2. 修改後端和前端程式碼
  3. 立即查看變更結果

試試看

在本實作指南中，您將學習如何使用容器進行開發。

啟動專案

  1. 若要開始，請將專案複製（clone）下來，或下載為 ZIP 檔案到您的本機電腦。

    $ git clone https://github.com/docker/getting-started-todo-app

    複製專案後，請進入該專案新建立的目錄。

    $ cd getting-started-todo-app

  2. 取得專案後，請使用 Docker Compose 啟動開發環境。

    若要使用 CLI 啟動專案，請執行以下指令：

    $ docker compose watch

    您會看到輸出內容顯示正在拉取容器映像檔、啟動容器等。如果您目前不完全理解這些內容也沒關係。只需稍等片刻，一切就會穩定並完成部署。

  3. 在瀏覽器中開啟 https:// 查看應用程式是否成功執行。應用程式啟動可能需要幾分鐘的時間。這是一個簡單的待辦事項應用程式，您可以隨意新增項目、標記完成，甚至刪除項目。

    Screenshot of the getting started to-do app after its first launch

環境中包含什麼？

現在環境已經架設完畢，裡面到底有什麼呢？簡單來說，有幾個容器（或行程）分別滿足應用程式的特定需求：

  • React 前端 - 一個使用 Vite 執行 React 開發伺服器的 Node 容器。
  • Node 後端 - 後端提供一個 API，具備擷取、建立和刪除待辦事項的功能。
  • MySQL 資料庫 - 用於儲存待辦事項清單的資料庫。
  • phpMyAdmin - 一個基於網頁的介面，用於與資料庫互動，可透過 http://db.localhost 存取。
  • Traefik 反向代理 - Traefik 是一個應用程式代理，負責將請求路由至正確的服務。它會將所有發往 localhost/api/* 的請求發送到後端，將發往 localhost/* 的請求發送到前端，並將發往 db.localhost 的請求發送到 phpMyAdmin。這樣您就可以使用連接埠 80 存取所有應用程式（而不需要為每個服務分配不同的連接埠）。

有了這個環境，您作為開發人員就不需要安裝或設定任何服務、建立資料庫架構、配置資料庫憑證等等。您只需要 Docker Desktop。其餘的一切都能直接運作。

修改應用程式

在環境啟動並執行後，您就可以對應用程式進行一些修改，看看 Docker 如何幫助您建立快速的回饋循環。

更改問候語

頁面頂部的問候語是透過 /api/greeting 的 API 呼叫所產生的。目前，它總是回傳 "Hello world!"。現在，您將修改它，使其回傳三個隨機訊息中的其中一個（您可以自訂這些訊息）。

  1. 在文字編輯器中開啟 backend/src/routes/getGreeting.js 檔案。此檔案提供了該 API 端點的處理常式。

  2. 將頂部的變數修改為包含問候語的陣列。您可以隨意使用下列範例修改，或是自訂成您喜歡的內容。同時，更新端點以發送此清單中的隨機問候語。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    const GREETINGS = [
    "Whalecome!",
    "All hands on deck!",
    "Charting the course ahead!",
];

module.exports = async (req, res) => {
    res.send({
        greeting: GREETINGS[ Math.floor( Math.random() * GREETINGS.length )],
    });
};

  3. 如果您尚未存檔，請儲存檔案。重新整理瀏覽器後，您應該會看到新的問候語。持續重新整理，您應該會看到所有訊息輪流出現。

    Screenshot of the to-do app with a new greeting

更改預留位置文字

查看應用程式時，您會發現預留位置文字僅為 "New Item"。現在，您將使其變得更具描述性和趣味性。您還將對應用程式的樣式進行一些更改。

  1. 開啟 client/src/components/AddNewItemForm.jsx 檔案。此元件提供了向待辦事項清單新增項目的表單。

  2. 修改 Form.Control 元素的 placeholder 屬性，改成您想要顯示的文字。

    33
34
35
36
37
38
39

    <Form.Control
    value={newItem}
    onChange={(e) => setNewItem(e.target.value)}
    type="text"
    placeholder="What do you need to do?"
    aria-label="New item"
/>

  3. 儲存檔案並回到瀏覽器。您應該會看到變更已透過熱重載（hot-reloaded）立即反應在瀏覽器中。如果不滿意，請隨意調整直到外觀滿意為止。

Screenshot of the to-do app with an updated placeholder in the add item text field"

更改背景顏色

在考慮完成應用程式之前，您需要讓顏色看起來更好。

  1. 開啟 client/src/index.scss 檔案。

  2. 將 background-color 屬性調整為您喜歡的任何顏色。提供的程式碼片段是一種柔和的藍色，與 Docker 的航海主題相符。

    如果您使用的是 IDE，可以使用內建的顏色選擇器挑選顏色。否則，請隨意使用線上的 Color Picker。

    3
4
5
6
7

    body {
    background-color: #99bbff;
    margin-top: 50px;
    font-family: 'Lato';
}

    每次存檔後，您應該都能在瀏覽器中立即看到變更。持續調整它，直到達到您心中完美的設定。

    Screenshot of the to-do app with a new placeholder and background color"

這樣就完成了。恭喜您成功更新了您的網站。

回顧

在繼續之前，請花點時間回顧一下剛才發生的過程。在短短的時間內，您能夠：

  • 啟動一個完整的開發專案，無需任何安裝工作。容器化環境提供了所需的開發環境，確保您擁有所需的一切。您無需直接在機器上安裝 Node、MySQL 或任何其他依賴項。您只需要 Docker Desktop 和程式碼編輯器。

  • 進行變更並立即看到結果。這之所以能夠實現，是因為 1) 每個容器中執行的行程會監控並回應檔案變更，以及 2) 檔案與容器化環境是共享的。

Docker Desktop 實現了這一切，甚至更多。一旦您開始以容器的方式思考，您幾乎可以建立任何環境，並輕鬆地與您的團隊共享。

下一步

現在應用程式已經更新完畢，您準備好學習如何將其打包為容器映像檔並推送到登錄檔（特別是 Docker Hub）了。

建置並推送您的第一個映像檔
© . This site is unofficial and not affiliated with Kubernetes or Docker Inc.