Web 開發中，將前端專案（例如 Vue 或 React 應用）打包後透過 Docker 容器和 Nginx 部署是非常常見的方式。它不僅簡化了部署流程，還能確保在不同環境中一致的執行效果。本文將介紹如何使用 Docker 將打包生成的 dist 資料夾結合 Nginx 來實現前端專案的靜態檔案託管與訪問。
1. 前端專案的構建
首先，確保已經完成前端專案的開發，並生成一個包含靜態檔案的 dist 資料夾。以 Vue 和 React 專案為例，可以透過以下命令完成專案的構建：
# Vue 專案 npm run build # React 專案 npm run build
上述命令會將專案打包，並在專案的根目錄下生成一個 dist 或 build 資料夾（React 預設生成 build 資料夾，Vue 預設生成 dist 資料夾）。這個資料夾將包含所有需要託管的靜態檔案。
2. Nginx 配置
在 Docker 容器中，我們需要使用 Nginx 來託管前端專案的靜態資源。為此，需要編寫一個自定義的 nginx.conf 配置檔案，該檔案將指定如何處理靜態資源的請求。
Nginx 配置檔案 (nginx.conf) 示例：
server {
listen 80;
# 設定專案的根目錄
location / {
root /usr/share/nginx/html; # 指定存放靜態檔案的目錄
index index.html index.htm; # 指定預設的首頁檔案
try_files $uri $uri/ /index.html; # 對於 SPA 單頁應用，處理重新整理頁面時的路由
}
# 處理伺服器錯誤的頁面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
解釋：
root /usr/share/nginx/html;：指定了 Nginx 將從/usr/share/nginx/html目錄中查詢和提供靜態資源。這是 Nginx 容器的預設靜態檔案目錄。try_files $uri $uri/ /index.html;：這條規則對於單頁應用程式 (SPA) 至關重要。它確保所有未找到的資源都會返回index.html，讓前端路由接管請求（如 Vue Router 或 React Router）。error_page 500 502 503 504 /50x.html;：為伺服器錯誤提供自定義的錯誤頁面。
3. 編寫 Dockerfile
在 Docker 中部署前端專案時，Dockerfile 是核心檔案。它定義瞭如何構建一個包含前端專案及 Nginx 的 Docker 映象。
Dockerfile 示例：
# 使用官方 Nginx 基礎映象 FROM nginx:alpine # 刪除預設的 Nginx 頁面 RUN rm -rf /usr/share/nginx/html/* # 將構建生成的 dist 資料夾複製到 Nginx 的靜態資源目錄中 COPY dist/ /usr/share/nginx/html/ # 將自定義的 Nginx 配置檔案複製到 Nginx 的配置目錄中 COPY nginx.conf /etc/nginx/conf.d/default.conf # 暴露 Nginx 的埠 EXPOSE 80 # 啟動 Nginx CMD ["nginx", "-g", "daemon off;"]
解釋：
FROM nginx:alpine：使用 Nginx 的輕量級 Alpine 版本作為基礎映象，適用於資源受限的環境。RUN rm -rf /usr/share/nginx/html/*：刪除預設的 Nginx 歡迎頁面，以避免與我們自定義的靜態檔案衝突。COPY dist/ /usr/share/nginx/html/：將本地構建好的dist資料夾複製到 Nginx 的靜態資源目錄/usr/share/nginx/html/中。COPY nginx.conf /etc/nginx/conf.d/default.conf：將自定義的 Nginx 配置檔案複製到容器中。EXPOSE 80：暴露容器的 80 埠以供外部訪問。CMD ["nginx", "-g", "daemon off;"]：啟動 Nginx，並確保其在前臺執行。
4. 構建 Docker 映象
在專案的根目錄下（包含 dist 資料夾、nginx.conf 和 Dockerfile），執行以下命令來構建 Docker 映象：
docker build -t your-frontend-app .
這條命令會根據 Dockerfile 構建一個名為 your-frontend-app 的 Docker 映象。
5. 執行 Docker 容器
映象構建完成後，可以透過以下命令啟動 Docker 容器：
docker run -d -p 8080:80 your-frontend-app
-d：後臺執行容器。-p 8080:80：將本地主機的 8080 埠對映到容器的 80 埠，這樣可以透過http://localhost:8080訪問前端應用。
此時，瀏覽器中訪問 http://localhost:8080，即可檢視前端專案的部署效果。
6. 總結
透過上述步驟，我們可以輕鬆地使用 Docker 將前端專案與 Nginx 相結合，實現高效的靜態檔案託管和訪問。總結起來有以下幾個關鍵步驟：
構建前端專案：透過構建工具生成靜態檔案，通常為
dist資料夾。編寫 Nginx 配置：自定義 Nginx 配置以支援 SPA 路由和靜態檔案託管。
編寫 Dockerfile：透過 Dockerfile 將前端專案與 Nginx 映象結合。
構建映象並執行容器：構建 Docker 映象，並透過容器啟動服務，設定埠對映，實現外部訪問。
透過這種方式，你可以快速地將前端專案部署在任意支援 Docker 的伺服器或環境中，享受容器化帶來的優勢。
額外最佳化（可選）
快取控制：你可以透過修改 Nginx 配置檔案來新增 HTTP 頭部，控制靜態檔案的快取策略，從而提高網站效能。
SSL 加密：在實際的生產環境中，你可能還需要配置 SSL 證書，為 Nginx 提供 HTTPS 支援。
這樣，透過 Docker 部署前端專案的整個流程就完整呈現了。
