使用容器進行開發

目錄

解釋

既然你已經安裝了 Docker Desktop，就可以進行一些應用程式開發了。具體來說，你將執行以下操作：

  1. 克隆並啟動一個開發專案
  2. 對後端和前端進行更改
  3. 立即看到更改

試一試

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

啟動專案

  1. 要開始，請克隆或將專案下載為 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 前端 - 一個正在執行 React 開發伺服器的 Node 容器，使用 Vite。
  • Node 後端 - 後端提供一個 API，能夠檢索、建立和刪除待辦事項。
  • MySQL 資料庫 - 一個用於儲存專案列表的資料庫。
  • phpMyAdmin - 一個基於 Web 的與資料庫互動的介面，可在 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. 儲存檔案並返回瀏覽器。你應該會看到更改已經被熱過載到你的瀏覽器中。如果你不喜歡它，可以隨意調整直到它看起來恰到好處。

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，你可以使用整合的顏色選擇器來選擇顏色。否則，可以隨意使用線上的顏色選擇器。

    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。

構建並推送您的第一個映象