使用容器進行開發

系列 入門
1
2
3
4
目錄

解釋

現在您已經安裝了 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，該 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

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

module.exports = async (req, res) => {
...

  3. 現在，透過進行以下更改，更新端點以從該列表中傳送隨機問候語。

     7
 8
 9
10
11

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

  4. 如果您尚未執行此操作，請儲存檔案。重新整理瀏覽器後，您應該會看到一個新的問候語。如果您繼續重新整理，您應該會看到所有訊息出現。

    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&quot;

更改背景顏色

在您認為應用程式已最終確定之前，您需要改進顏色。

  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&quot;

就這樣，您完成了。祝賀您更新您的網站。

回顧

在繼續之前，請花點時間思考一下這裡發生了什麼。在短短的幾分鐘內，您就可以

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

  • 進行更改並立即檢視它們。這是因為 1) 每個容器中執行的程序都在監視並響應檔案更改，以及 2) 檔案與容器化環境共享。

Docker Desktop 支援所有這些功能以及更多功能。一旦您開始使用容器進行思考，您就可以建立幾乎任何環境，並輕鬆地與您的團隊共享。

下一步

現在應用程式已經更新，您可以學習如何將其打包為容器映象並推送到登錄檔，特別是 Docker Hub。

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