切換語言為:簡體

使用 Docker 部署前端專案:Vue 和 React 結合 Nginx 實現靜態檔案託管

  • 爱糖宝
  • 2024-10-10
  • 2048
  • 0
  • 0

Web 開發中,將前端專案(例如 Vue 或 React 應用)打包後透過 Docker 容器和 Nginx 部署是非常常見的方式。它不僅簡化了部署流程,還能確保在不同環境中一致的執行效果。本文將介紹如何使用 Docker 將打包生成的 dist 資料夾結合 Nginx 來實現前端專案的靜態檔案託管與訪問。


1. 前端專案的構建

首先,確保已經完成前端專案的開發,並生成一個包含靜態檔案的 dist 資料夾。以 Vue 和 React 專案為例,可以透過以下命令完成專案的構建:

# Vue 專案
npm run build

# React 專案
npm run build

上述命令會將專案打包,並在專案的根目錄下生成一個 distbuild 資料夾(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.confDockerfile),執行以下命令來構建 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 相結合,實現高效的靜態檔案託管和訪問。總結起來有以下幾個關鍵步驟:

  1. 構建前端專案:透過構建工具生成靜態檔案,通常為 dist 資料夾。

  2. 編寫 Nginx 配置:自定義 Nginx 配置以支援 SPA 路由和靜態檔案託管。

  3. 編寫 Dockerfile:透過 Dockerfile 將前端專案與 Nginx 映象結合。

  4. 構建映象並執行容器:構建 Docker 映象,並透過容器啟動服務,設定埠對映,實現外部訪問。

透過這種方式,你可以快速地將前端專案部署在任意支援 Docker 的伺服器或環境中,享受容器化帶來的優勢。


額外最佳化(可選)

  • 快取控制:你可以透過修改 Nginx 配置檔案來新增 HTTP 頭部,控制靜態檔案的快取策略,從而提高網站效能。

  • SSL 加密:在實際的生產環境中,你可能還需要配置 SSL 證書,為 Nginx 提供 HTTPS 支援。

這樣,透過 Docker 部署前端專案的整個流程就完整呈現了。

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.