為每個服務創建 Dockerfile

3.1 為前端 (ReactJS) 創建 Dockerfile

在這一步，我們將為我們的多容器應用的三個服務創建 Dockerfile：基於 ReactJS 的前端，基於 Python (Flask) 的後端，以及 PostgreSQL 資料庫。Dockerfile 定義了為每個服務創建 Docker 映像的指令。

在 frontend 資料夾中創建 Dockerfile 文件：

cd frontend
touch Dockerfile

前端 Dockerfile 的內容：

# 使用 node 的基礎映像
FROM node:14

# 設定工作目錄
WORKDIR /app

# 複製 package.json 和 package-lock.json 以安裝依賴項
COPY package*.json ./

# 安裝依賴項
RUN npm install

# 複製項目其他文件
COPY . .

# 指定端口 3000
EXPOSE 3000

# 啟動應用程序
CMD ["npm", "start"]

這個 Dockerfile 執行以下步驟：

1. 使用基礎映像 node:14。
2. 設定工作目錄 /app。
3. 複製文件 package.json 和 package-lock.json。
4. 使用 npm install 安裝依賴項。
5. 將項目所有文件複製到工作目錄。
6. 打開端口 3000 以訪問應用程序。
7. 使用 npm start 啟動應用程序。

3.2 為後端 (Flask) 創建 Dockerfile

在 backend 資料夾中創建一個 Dockerfile 文件：

cd backend
touch Dockerfile

後端的 Dockerfile 內容：

# 使用 python 的基礎映像
FROM python:3.12

# 設定工作目錄
WORKDIR /app

# 複製 requirements.txt 用於安裝依賴
COPY requirements.txt ./

# 安裝依賴
RUN pip install --no-cache-dir -r requirements.txt

# 複製專案的其他文件
COPY . .

# 設定端口 5000
EXPOSE 5000

# 啟動應用程式
CMD ["python", "run.py"]

這個 Dockerfile 執行以下步驟：

1. 使用基礎映像 python:3.12。
2. 設定工作目錄 /app。
3. 複製文件 requirements.txt。
4. 使用 pip install 安裝依賴。
5. 將專案的所有文件複製到工作目錄中。
6. 開放端口 5000 用於訪問應用程式。
7. 使用 python run.py 啟動應用程式。

3.3 為資料庫 (PostgreSQL) 創建 Dockerfile

對於 PostgreSQL 資料庫，我們會使用官方的 image，所以創建自己的 Dockerfile 不是必要的。取而代之的是，我們會通過 docker-compose.yml 來配置 PostgreSQL。

3.4 構建和測試 Docker 映像

創建好前端和後端的 Dockerfile 後，測試它們的構建很重要。

構建前端的 Docker 映像：

cd frontend
docker build -t task_management_frontend .

構建後端的 Docker 映像：

cd ../backend
docker build -t task_management_backend .

檢查容器運行情況：

啟動前端容器：

docker run -p 3000:3000 task_management_frontend

啟動後端容器：

docker run -p 5000:5000 task_management_backend

打開瀏覽器訪問 http://localhost:3000 查看前端是否工作正常，或訪問 http://localhost:5000 查看後端是否工作正常。