在 Windows 建立 Docker Compose 雲端開發環境

2026-03-192026-03-19

要在 Windows 上開發一個結合 FastAPI (Python)、React (Node.js) 與 Database 的容器化應用，最好的做法是利用 Docker Compose。這能讓你一鍵啟動所有服務，並模擬雲端（Azure）的多容器運行環境。

既然你已經安裝了 Docker Desktop 和 Node.js，接下來可以按照以下步驟建立開發環境：

1. 專案目錄結構建議

首先，建議建立一個清晰的資料夾結構，將前端、後端與 Docker 設定分開：

Plaintext

my-app/
├── backend/           # FastAPI 程式碼
│   ├── main.py
│   ├── requirements.txt
│   └── Dockerfile
├── frontend/          # React 程式碼
│   ├── src/
│   ├── package.json
│   └── Dockerfile
└── docker-compose.yml # 核心：同時啟動前後端與資料庫

2. 後端環境準備 (FastAPI)

在 backend/ 資料夾中，建立以下兩個核心檔案：

requirements.txt:

fastapi
uvicorn
sqlalchemy
psycopg2-binary  # 如果使用 PostgreSQL

Dockerfile:

Dockerfile

FROM python:3.11-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install –no-cache-dir -r requirements.txt
COPY . .
CMD [“uvicorn”, “main.main:app”, “–host”, “0.0.0.0”, “–port”, “8000”, “–reload”]

Note: --reload 參數非常重要，它讓你修改代碼時，容器內的服務會自動重啟。

3. 前端環境準備 (React)

在 my-app/ 目錄下執行 npx create-react-app frontend，然後在 frontend/ 建立 Dockerfile:

Dockerfile

FROM node:20
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

4. 關鍵：配置 Docker Compose

這是將所有組件串聯起來的核心。在專案根目錄建立 docker-compose.yml：

YAML

services:
  db:
    image: postgres:15 # 以 PostgreSQL 為例
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
      POSTGRES_DB: mydatabase
    ports:
      - "5432:5432"

  backend:
    build: ./backend
    volumes:
      - ./backend:/app # 掛載程式碼，實現即時更新
    ports:
      - "8000:8000"
    environment:
      DATABASE_URL: postgresql://user:password@db:5432/mydatabase
    depends_on:
      - db

  frontend:
    build: ./frontend
    volumes:
      - ./frontend:/app
      - /app/node_modules # 避免本地 node_modules 覆蓋容器內的
    ports:
      - "3000:3000"
    stdin_open: true # 讓 React 偵測到開發終端

5. 開發工作流程

啟動環境：在根目錄開啟終端機（PowerShell 或 CMD），輸入：Bashdocker-compose up --build
存取服務：
- 前端：http://localhost:3000
- 後端 API：http://localhost:8000
- API 文件 (Swagger)：http://localhost:8000/docs
連接資料庫：在 FastAPI 中，資料庫的連線主機名稱（Hostname）直接填寫 db（即 Compose 中的服務名稱），而非 localhost。

6. Azure 準備 (下一步建議)

由於你最終要上傳到 Azure，建議你現在可以先安裝 Azure CLI：

指令：

winget install -e --id Microsoft.AzureCLI

目的：這讓你能在本地端直接將 Docker Image 推送到 Azure Container Registry (ACR)，並部署到 Azure Container Apps 或 App Service。

溫馨提示：在 Windows 上開發時，建議將專案放在 WSL 2 (Ubuntu) 的檔案系統內（路徑通常是 \\wsl$\...），Docker 的讀寫效能會比在 Windows 原生路徑下快非常多。

移除 sqlalchemy, database 使用 microsoft sql server, 在 azure 上會換成azure sql

既然你要將資料庫從 PostgreSQL 換成 Microsoft SQL Server (本地開發) 與 Azure SQL (雲端部署)，並移除 SQLAlchemy 改用更輕量或原生的方式，我們的開發環境需要做一些關鍵調整。

在 Windows 上連接 SQL Server，通常建議使用 pyodbc 驅動程式。

1. 調整後的專案結構

結構保持不變，但 backend 的配置會有所不同：

Plaintext

my-app/
├── backend/
│   ├── main.py
│   ├── requirements.txt  # 加入 pyodbc
│   └── Dockerfile        # 需要安裝 SQL Server 驅動
├── frontend/             # React (Node.js)
└── docker-compose.yml    # 伺服器改為 MSSQL Edge 或 SQL Server

2. 後端環境 (FastAPI + MS SQL)

requirements.txt

Plaintext

fastapi
uvicorn
pyodbc

Dockerfile (關鍵修改)

連接 SQL Server 需要在 Linux 容器內安裝 Microsoft ODBC Driver。這部分的 Dockerfile 較為特殊：

Dockerfile

FROM python:3.11-slim

# 1. 安裝必要工具
RUN apt-get update && apt-get install -y \
    curl \
    gnupg2 \
    && rm -rf /var/lib/apt/lists/*

# 2. 下載並安裝 Microsoft ODBC Driver 18 (適用於 Debian 12/11)
RUN curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > /usr/share/keyrings/microsoft-prod.gpg \
    && curl https://packages.microsoft.com/config/debian/12/prod.list > /etc/apt/sources.list.d/mssql-release.list \
    && apt-get update \
    && ACCEPT_EULA=Y apt-get install -y msodbcsql18 unixodbc-dev \
    && rm -rf /var/lib/apt/lists/*

# 3. 設定工作目錄
WORKDIR /app

# 4. 安裝 Python 套件
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

# 5. 複製程式碼並啟動
COPY . .
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]

3. Docker Compose 配置

我們在本地使用 mcr.microsoft.com/azure-sql-edge，它是專為輕量開發設計的 SQL Server 版本（支援 ARM 與 x64，且在 Docker 上跑得更快）。

docker-compose.yml:

YAML

services:
  db:
    image: mcr.microsoft.com/azure-sql-edge
    container_name: mssql_db
    environment:
      ACCEPT_EULA: "Y"
      MSSQL_SA_PASSWORD: "YourStrongPassword123!"
    ports:
      - "1433:1433"

  backend:
    build: ./backend
    volumes:
      - ./backend:/app
    ports:
      - "8000:8000"
    environment:
      # 注意：連接字串需包含 TrustServerCertificate=yes
      DB_CONNECTION_STRING: "DRIVER={ODBC Driver 18 for SQL Server};SERVER=db;DATABASE=master;UID=sa;PWD=YourStrongPassword123!;Encrypt=yes;TrustServerCertificate=yes"
    depends_on:
      - db

  frontend:
    build: ./frontend
    volumes:
      - ./frontend:/app
      - /app/node_modules
    ports:
      - "3000:3000"
    stdin_open: true

4. FastAPI 存取範例 (main.py)

不使用 SQLAlchemy，我們直接使用 pyodbc 進行查詢：

Python

from fastapi import FastAPI
import pyodbc
import os

app = FastAPI()

# 從環境變數讀取連線資訊
conn_str = os.getenv("DB_CONNECTION_STRING")

@app.get("/")
def read_root():
    try:
        conn = pyodbc.connect(conn_str)
        cursor = conn.cursor()
        cursor.execute("SELECT @@VERSION")
        row = cursor.fetchone()
        return {"database_version": row[0]}
    except Exception as e:
        return {"error": str(e)}

5. 開發建議與注意事項

Azure SQL 的差異：當你部署到 Azure 時，只需修改 DB_CONNECTION_STRING 環境變數。Azure SQL 強制要求加密 (Encrypt=yes)，這也是為什麼我們在 Dockerfile 中安裝了最新版的 ODBC Driver 18。
防火牆：如果你在本地使用 SQL Server Management Studio (SSMS) 連接 Docker 裡的資料庫，伺服器名稱請填 127.0.0.1,1433。
前端 Proxy：在 React 的 package.json 中加入 "proxy": "http://backend:8000"，可以簡化前端呼叫 API 的程式碼，避免 CORS 問題。

要在 Windows 本地測試並推送到 Azure，流程主要分為 「本地聯動測試」 與 「雲端推送部署」 兩個階段。

1. 本地 Docker Desktop 測試

在本地測試時，最重要的是確保 跨容器通訊 正常（例如 React 如何抓到 FastAPI 的資料）。

執行測試指令

開啟 PowerShell 或終端機，進入專案根目錄（包含 docker-compose.yml 的地方）：

PowerShell

# 1. 啟動所有服務 (包含 MSSQL, Backend, Frontend)
docker-compose up --build

# 2. 如果要以後台模式執行
docker-compose up -d

如何驗證測試成功？

API 測試：瀏覽 http://localhost:8000/docs，點擊 Execute 測試 API 是否能成功從 MSSQL 讀取資料。
前端測試：瀏覽 http://localhost:3000。
查看日誌：如果連線失敗，執行 docker-compose logs backend 查看 Python 的 pyodbc 報錯訊息。

2. 使用 Azure CLI 推送到 Azure Container Registry (ACR)

當本地測試沒問題後，你需要將 Image 推送到雲端倉庫。Azure 提供 ACR (Azure Container Registry) 來存放這些映像檔。

步驟 A：登入 Azure 並建立資源

首先，確保你已安裝 Azure CLI。

PowerShell

# 1. 登入 Azure
az login

# 2. 建立資源群組 (如果還沒有)
az group create --name MyResourceGroup --location eastasia

# 3. 建立 ACR (名稱必須是唯一且小寫)
az acr create --resource-group MyResourceGroup --name myuniqueacr --sku Basic

# 4. 登入 ACR 
az acr login --name myuniqueacr

步驟 B：標記並推送 Image

你需要將本地的 Image 給予一個符合 ACR 規範的「標籤 (Tag)」。

PowerShell

# 1. 取得 ACR 的登入伺服器名稱 (通常是 myuniqueacr.azurecr.io)
$ACR_SERVER = "myuniqueacr.azurecr.io"

# 2. 標記本地 Image (假設你在 compose 產生的 image 叫 my-app_backend)
docker tag my-app_backend $ACR_SERVER/fastapi-backend:v1
docker tag my-app_frontend $ACR_SERVER/react-frontend:v1

# 3. 推送到雲端
docker push $ACR_SERVER/fastapi-backend:v1
docker push $ACR_SERVER/react-frontend:v1

3. Azure 端的資料庫銜接

當你推送到 Azure 後，你的 FastAPI 需要改連 Azure SQL Database。

建立 Azure SQL：在 Azure Portal 建立一個 SQL Database。
防火牆設定：在 Azure SQL 的防火牆設定中，勾選 「允許 Azure 服務和資源存取此伺服器」。
環境變數：在部署 Container（如使用 Azure Container Apps）時，將 DB_CONNECTION_STRING 改為 Azure SQL 的連線字串。

4. 懶人部署法：Azure Container Apps (推薦)

如果你不想管複雜的 Kubernetes，可以使用 Azure Container Apps，它支援多容器應用。

PowerShell

# 建立 Container App 環境並直接從 ACR 部署 (簡化指令範例)
az containerapp up --name my-fastapi-app `
  --resource-group MyResourceGroup `
  --image $ACR_SERVER/fastapi-backend:v1 `
  --environment 'MyEnv'

常見踩雷提醒：

晶片架構：如果你使用的是 Mac M1/M2 開發但推送到 Azure (x86_64)，打包時要加上 --platform linux/amd64。在 Windows 上開發則通常沒這個問題。
MSSQL 密碼：Azure SQL 的密碼要求較嚴格，本地測試時建議就先用複雜密碼。

這個錯誤訊息 failed to read dockerfile: open Dockerfile: no such file or directory 非常直觀：Docker 在你指定的路徑下找不到 Dockerfile。

這通常是因為 docker-compose.yml 裡面的 build 路徑設定，與你實際資料夾結構不一致造成的。

1. 檢查你的目錄結構

請確認你的資料夾長得像這樣（注意大小寫，Linux 容器對大小寫很敏感）：

Plaintext

C:\max\work\policy-recommends\my-fast-app\
├── docker-compose.yml
├── backend/
│   └── Dockerfile      <-- 確認這個檔案存在，且副檔名沒有被隱藏 (不是 Dockerfile.txt)
└── frontend/
    └── Dockerfile      <-- 確認這個檔案存在

重新執行的正確姿勢

修正路徑或檔案後，建議先清理一下快取再執行：

PowerShell

# 強制重新檢查 build context 並建立
docker-compose build --no-cache

# 啟動
docker-compose up

如何推送到 Azure ACR (完整指令流)

等你本地 docker-compose up 成功執行後，按照以下順序推送到 Azure：

PowerShell

# 1. 登入 Azure (會跳出瀏覽器)
az login

# 2. 登入你的 ACR (假設名字叫 myacr123)
az acr login --name myacr123

# 3. 取得本地剛剛 build 好的 Image ID 或名稱
# 執行 docker images 查看剛剛產生的 image 名稱
docker images

# 4. 幫 Image 打上標籤 (Tag)
# 格式：docker tag [本地名稱] [ACR名稱].azurecr.io/[映像檔名稱]:[版本]
docker tag my-fast-app-backend myacr123.azurecr.io/fastapi-api:v1

# 5. 推送
docker push myacr123.azurecr.io/fastapi-api:v1

針對 React (Node.js) 前端，在開發環境與生產環境（Azure）的需求不同。為了讓你現在能在 Windows Local 成功執行 docker-compose up，我們採用開發模式的 Dockerfile。

請在 frontend/ 資料夾下建立一個名為 Dockerfile 的檔案（不含副檔名），內容如下：

Dockerfile

# 1. 使用 Node.js 官方映像檔 (建議版本 18 或 20)
FROM node:20

# 2. 設定容器內的工作目錄
WORKDIR /app

# 3. 先複製 package.json 與 package-lock.json (利用 Docker 快取機制)
COPY package*.json ./

# 4. 安裝相依套件
RUN npm install

# 5. 複製其餘的所有程式碼到容器內
COPY . .

# 6. React 預設開發埠號為 3000
EXPOSE 3000

# 7. 啟動 React 開發伺服器
# 使用 --host 0.0.0.0 是為了讓容器外的瀏覽器能存取
CMD ["npm", "start"]

⚠️ 兩個關鍵注意事項 (Windows 平台)

1. `.dockerignore` 檔案

在 frontend/ 資料夾內建立一個 .dockerignore 檔案。這能防止將本地巨大的 node_modules 複製進容器，導致 Build 速度極慢或產生錯誤。

內容如下：

Plaintext

node_modules
build
.git
*.md

2. 解決 Docker 抓不到檔案變更 (Hot Reload)

在 Windows 上使用 Docker Desktop 時，有時 React 的熱更新（存檔後網頁自動重新整理）會失效。如果發生這種情況，請在 frontend/ 資料夾建立一個 .env 檔案，加入以下內容：

Plaintext

CHOKIDAR_USEPOLLING=true

接下來的操作步驟：

檢查 package.json：確保你的 frontend/ 資料夾內確實有 package.json（通常是執行 npx create-react-app . 產生的）。
執行 Build：PowerShelldocker-compose build frontend
啟動服務：PowerShelldocker-compose up frontend

如果你的 React 是用 Vite 建立的（現在比較流行），CMD 可能需要改成 npm run dev -- --host，你需要我確認你的 package.json 腳本內容嗎？

既然你的資料夾目前是空白的，我們來快速建立一個**「全端連通」**的範例。這個範例會讓 React 前端呼叫 FastAPI 後端，而後端會從 MSSQL 資料庫讀取版本資訊。

請依照以下檔案內容填入你的資料夾：

1. 後端 (backend/main.py)

這是一個簡單的 API，它會嘗試連線資料庫並回傳 SQL Server 的版本。

Python

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
import pyodbc
import os

app = FastAPI()

# 允許前端跨域存取 (CORS)
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/api/status")
def get_status():
    conn_str = os.getenv("DB_CONNECTION_STRING")
    try:
        # 建立連線
        conn = pyodbc.connect(conn_str, timeout=5)
        cursor = conn.cursor()
        cursor.execute("SELECT @@VERSION")
        db_version = cursor.fetchone()[0]
        conn.close()
        return {
            "status": "Connected",
            "database": "Microsoft SQL Server",
            "version": db_version
        }
    except Exception as e:
        return {
            "status": "Error",
            "message": str(e)
        }

@app.get("/")
def read_root():
    return {"message": "FastAPI is running!"}

2. 前端 (frontend/src/App.js)

我們簡單用 fetch 來抓取後端的 API 資料。

JavaScript

import React, { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState({ status: "Loading...", version: "" });

  useEffect(() => {
    // 指向後端容器的對外 Port
    fetch('http://localhost:8000/api/status')
      .then(response => response.json())
      .then(json => setData(json))
      .catch(err => setData({ status: "Error", message: "Cannot connect to API" }));
  }, []);

  return (
    <div style={{ textAlign: 'center', marginTop: '50px', fontFamily: 'sans-serif' }}>
      <h1>React + FastAPI + MSSQL</h1>
      <div style={{ border: '1px solid #ccc', padding: '20px', display: 'inline-block' }}>
        <p><strong>DB Status:</strong> {data.status}</p>
        {data.version && <p><strong>DB Version:</strong> {data.version}</p>}
        {data.message && <p style={{ color: 'red' }}>{data.message}</p>}
      </div>
    </div>
  );
}

export default App;

3. 前端必要設定 (frontend/package.json)

如果你還沒建立 React 專案，最簡單的方式是在 frontend/ 資料夾下建立這個檔案：

JSON

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "eslintConfig": {
    "extends": [
      "react-app"
    ]
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
  }
}

4. 懶人包：快速建立指令

在 Windows PowerShell 中執行以下指令來快速產出檔案：

PowerShell

# 確保你在專案根目錄 (my-fast-app)
mkdir backend, frontend, frontend/src

# 建立後端檔案 (如上內容)
# 建立前端檔案 (如上內容)
# 建立 .dockerignore 避免 node_modules 錯誤
echo "node_modules" > frontend/.dockerignore

5. 啟動與驗證

現在再次執行：

PowerShell

docker-compose up --build

驗證方式：

等待 MSSQL 啟動：SQL Server 啟動較慢（約 20-30 秒），剛開始 API 可能會報錯，請重新整理頁面。
開啟瀏覽器：輸入 http://localhost:3000。
預期結果：你應該會看到網頁顯示 “DB Status: Connected” 以及 “Microsoft SQL Azure…” 的版本文字。

小提示：

由於我們是在 Docker 外部的瀏覽器看網頁，前端代碼 fetch('http://localhost:8000/api/status') 使用 localhost 是正確的。但如果是後端要找資料庫，docker-compose.yml 裡的連線字串必須寫 SERVER=db。

這個錯誤 "/requirements.txt": not found 代表 Docker 在執行 COPY requirements.txt . 這行指令時，在你的 backend/ 資料夾 裡找不到這個檔案。

在 Docker 的世界裡，COPY 指令尋找檔案的起點是 docker-compose.yml 中定義的 context 路徑。

1. 解決方法：建立必要的相依檔案

請確保你的目錄結構與檔案名稱完全一致（注意大小寫）：

在 C:\max\work\policy-recommends\my-fast-app\backend\ 資料夾下，建立一個名為 requirements.txt 的檔案，內容如下：

Plaintext

fastapi
uvicorn
pyodbc

2. 完整檢查清單

如果還是報錯，請檢查以下三點：

檔案位置：requirements.txt 必須與 backend/Dockerfile 放在同一個資料夾內。
副檔名陷阱：在 Windows 中，檔案可能會被命名為 requirements.txt.txt（如果你開啟了隱藏已知檔案類型的擴充名）。請確認檔名只有一個 .txt。
Docker Compose 路徑：確認你的 docker-compose.yml 是這樣寫的：YAMLbackend: build: ./backend # 這代表 Docker 會去 backend 資料夾找 Dockerfile 和 requirements.txt

3. 下一步：再次執行

修正檔案後，請執行以下指令（加上 --no-cache 確保它不會抓到舊的錯誤暫存）：

PowerShell

docker-compose build --no-cache
docker-compose up

💡 給你的開發小秘訣

由於你之後要推送到 Azure，現在建立這些檔案時，可以順便檢查你的 frontend/ 資料夾是否也已經準備好了：

frontend/package.json (前一個回答提供的內容)
frontend/src/App.js (前一個回答提供的內容)
frontend/Dockerfile

如果 backend 編譯成功了，但換成 frontend 報錯 package.json not found，處理方式是一樣的：確保檔案真的躺在 frontend/ 資料夾裡。

這是一個完整的測試指南，幫助你驗證 React (前端)、FastAPI (後端) 與 SQL Server (資料庫) 這三個組件是否已經成功串聯。

1. 檢查容器運行狀態

首先，確保所有服務都已啟動。在 Windows PowerShell 執行：

PowerShell

docker ps

檢查重點： 你應該會看到三個容器，且狀態（STATUS）顯示為 Up。如果看到 Exited，代表該服務啟動失敗，請執行 docker-compose logs [服務名稱] 查看報錯。

2. 測試後端 API (FastAPI)

FastAPI 自帶強大的 Swagger UI，這是測試資料庫連線最快的方法。

網址： 打開瀏覽器輸入 http://localhost:8000/docs
操作： 1. 找到我們寫的 GET /api/status 端點。2. 點擊 “Try it out”，然後點擊 “Execute”。
預期結果：
- Code 200 (Success)：你會看到包含 SQL Server 版本資訊的 JSON 字串。這代表 FastAPI -> MSSQL 通訊正常。
- Error 500：通常是資料庫密碼錯誤或 Driver 設定問題。
- 連線逾時：SQL Server 啟動較慢（通常需要 30 秒），請稍等片刻再試。

3. 測試前端網頁 (React)

現在測試前端是否能成功抓到後端的資料。

網址： 打開瀏覽器輸入 http://localhost:3000
操作： 觀察網頁顯示的內容。
預期結果：
- 畫面顯示 “DB Status: Connected”：恭喜！整個全端流程 瀏覽器 -> React -> FastAPI -> MSSQL 全部打通。
- 畫面卡在 “Loading…” 或顯示 “Error”：
  1. 按下 F12 打開開發者工具。
  2. 切換到 Console (主控台)。如果是 CORS 報錯，代表 FastAPI 的中間件設定有誤；如果是 404，請確認 API 路徑是否正確。

4. 測試資料庫 (SQL Server)

如果你懷疑資料庫根本沒動，可以獨立測試它。

查看日誌：PowerShelldocker logs mssql_db 尋找這一行：SQL Server is now ready for client connections.。
外部連線：如果你電腦有安裝 SSMS (SQL Server Management Studio) 或 Azure Data Studio，可以直接連線：
- 伺服器： 127.0.0.1,1433
- 帳號： sa
- 密碼： YourStrongPassword123! (你在 compose 檔設定的那組)

5. 總結連線邏輯 (除錯關鍵)

在 Docker 環境下，連線位址會因為「誰發起請求」而不同：

連線路徑	使用地址	原因
你 -> 前端	`localhost:3000`	你在 Docker 網路外部。
你 -> 後端	`localhost:8000`	你在 Docker 網路外部。
前端 (瀏覽器) -> 後端	`localhost:8000`	重要： React 代碼是在「你的瀏覽器」執行，所以對它來說後端就在 `localhost`。
後端 -> 資料庫	`db:1433`	重要： Python 代碼是在「容器內部」執行，必須使用 Compose 服務名稱 `db`。

常見問題排除

修改代碼後沒反應？ 確保 docker-compose.yml 有設定 volumes 掛載，這樣你在 Windows 修改程式碼時，容器內才會同步更新。
無法連線資料庫？ 請檢查 main.py 裡的連線字串是否包含 TrustServerCertificate=yes，因為自架的 Docker SQL Server 通常沒有正式憑證。

如果你現在測試成功了，下一步我們是否要來練習如何將這兩個 Image (Frontend/Backend) 推送到 Azure ACR 並準備部署？

port 3000 改 8080

沒問題！在 Windows 上，3000 埠確實常被一些系統服務（如某些版本的 Windows 服務或開發工具）佔用。將前端改為 8080 是一個好選擇。

請依照以下三個步驟修改設定：

1. 修改 `docker-compose.yml`

將 frontend 服務的 ports 對應改為 8080:3000。這代表：瀏覽器輸入 8080，會轉發到容器內的 3000。

YAML

  frontend:
    build: ./frontend
    volumes:
      - ./frontend:/app
      - /app/node_modules
    ports:
      - "8080:3000"  # 修改這裡：外部 8080 -> 內部 3000
    stdin_open: true
    environment:
      - WDS_SOCKET_PORT=8080 # 確保 React 的熱更新 (Hot Reload) 也能走 8080

2. 修改前端程式碼 (`frontend/src/App.js`)

如果你的 React 程式碼中原本有寫死後端網址，請確認它依然指向 8000（後端沒改）。

但為了確保瀏覽器不會因為埠號變更而產生安全性阻攔，請檢查 App.js 中的 fetch：

JavaScript

// 確保後端依然是 8000
fetch('http://localhost:8000/api/status')

3. 重新啟動服務

由於你修改了 docker-compose.yml 的結構，建議先停止舊的容器再重新啟動：

PowerShell

# 停止並移除舊的容器
docker-compose down

# 重新啟動
docker-compose up

如何驗證？

前端網頁：打開瀏覽器訪問 http://localhost:8080。
後端 API：訪問 http://localhost:8000/docs。

💡 專業小撇步：如果連 8080 也被佔用？

如果在啟動時依然看到 bind: An attempt was made...，這代表 8080 也有人在用。你可以執行這個指令來徹底「殺掉」佔用者：

PowerShell

# 尋找誰在用 8080 (在管理員模式的 PowerShell)
$proc = Get-NetTCPConnection -LocalPort 8080 -ErrorAction SilentlyContinue
if($proc) { Stop-Process -Id $proc.OwningProcess -Force }

現在你可以試試看 http://localhost:8080 能不能看到 React 畫面了。如果畫面出來了但顯示 “Connection Error”，我們再來調整 FastAPI 的 CORS 設定！

Related Posts

發佈留言 取消回覆

發佈留言取消回覆