首頁 >web前端 >js教程 >使用 Nginx 對前端應用程式進行 Docker 化以實現無縫部署

使用 Nginx 對前端應用程式進行 Docker 化以實現無縫部署

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-12-28 12:40:10890瀏覽

介紹

大多數情況下,部署前端應用程式需要將靜態資產的服務與後端 API 分開。一個好的方法是將 Nginx 作為反向代理和 Web 伺服器與 Docker 結合進行容器化。本指南將帶您完成如何使用 Nginx 和 Docker 部署前端應用程式的流程。

先決條件

如何使用 Nginx 和 Docker 部署前端應用程式
簡介
高效部署前端應用程式通常需要將靜態資產的服務與後端 API 分開。一個強大的方法是將 Nginx 作為反向代理和 Web 伺服器與 Docker 結合起來進行容器化。本指南將引導您完成使用 Nginx 和 Docker 部署前端應用程式的程序。

先決條件
要遵循本指南,您應該:

  • React(或任何前端框架)的基本知識。
  • 熟悉DockerNginx

設定應用程式

清晰的專案結構簡化了部署。將所有必需的檔案放在一個資料夾中以建立 Docker 映像。這些文件應包括:

  • build/ 資料夾(包含生產就緒的靜態檔案)。
  • Dockerfile(定義如何建置映像)。
  • nginx.conf(自訂 Nginx 配置)。
  • sites-enabled/(可選的附加 Nginx 設定)。

關於Nginx配置的深入解釋,可以參考這個

Dockerizing Your Frontend Application with Nginx for Seamless Deployment

提升 React:釋放 Nginx 的力量,輕鬆部署

阿米特·庫馬爾·魯特 ・ 2023 年 12 月 9 日

#javascript #教程 #反應 #nginx

步驟:

  1. 建立應用程式的生產版本:
npm run build

此指令建立一個包含最佳化靜態檔案的 build/ 目錄。

  1. 建立 Dockerfile: 編寫以下 Dockerfile 來定義容器:
FROM nginx:latest

# Clean the default HTML directory and remove default nginx.conf
RUN rm -rf /usr/share/nginx/html/*
RUN rm /etc/nginx/nginx.conf

# Copy custom Nginx configuration
COPY nginx.conf /etc/nginx/

# Copy the production build files into Nginx's HTML directory
COPY build/ /usr/share/nginx/html/

# Copy additional Nginx configurations (if any)
COPY ./sites-enabled/* /etc/nginx/sites-enabled/

# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

建置 Docker 映像

檔案準備好後,建置 Docker 映像:

docker build -t my-app-img:prod .

如果部署在其他虛擬機器上,您可以將映像打包為 .tar 檔案:

docker save my-app-img > my-app-img.tar

運行 Docker 映像

選項1:直接運行鏡像

  1. 從 .tar 檔案載入 Docker 映像(如果在系統之間傳輸):
cat my-app-img.tar | docker load
  1. 運行容器:
docker run -itd -p 80:80 --name my-app my-app-img

這將啟動容器,並將其暴露在連接埠 80 上。

選項 2:運行 Docker Compose

建立 docker-compose.yml 檔案:

version: "3"
services:
  web:
    container_name: my_app
    image: my-app-img
    ports:
      - "80:80"
    volumes:
      - ./template:/etc/nginx/templates/
    environment:
      NGINX_ENVSUBST_OUTPUT_DIR: /etc/nginx/sites-enabled

然後,啟動容器:

docker-compose up -d

結論

使用 Nginx 和 Docker 部署前端應用程式提供了強大的、可擴展的解決方案。這是因為它將靜態資產與後端 API 分開,從而提供了最佳效能。自訂您的 Nginx 配置以滿足您的需求,例如:

  • 新增 SSL/TLS 以支援 HTTPS。
  • 開啟快取以獲得高效能。

此設定可讓您的前端應用程式在生產就緒環境中保持可靠。

如果您有任何改進流程的建議,請在評論部分留下。如果您覺得這篇文章有幫助,請按讚並分享。

編碼快樂!

以上是使用 Nginx 對前端應用程式進行 Docker 化以實現無縫部署的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn