介紹

大多數(shù)情況下，部署前端應(yīng)用程序需要將靜態(tài)資產(chǎn)的服務(wù)與后端 API 分開。一個(gè)好的方法是將 Nginx 作為反向代理和 Web 服務(wù)器與 Docker 結(jié)合起來(lái)進(jìn)行容器化。本指南將帶您完成如何使用 Nginx 和 Docker 部署前端應(yīng)用程序的過(guò)程。

先決條件

如何使用 Nginx 和 Docker 部署前端應(yīng)用程序
簡(jiǎn)介
高效部署前端應(yīng)用程序通常需要將靜態(tài)資產(chǎn)的服務(wù)與后端 API 分開。一種強(qiáng)大的方法是將 Nginx 作為反向代理和 Web 服務(wù)器與 Docker 結(jié)合起來(lái)進(jìn)行容器化。本指南將引導(dǎo)您完成使用 Nginx 和 Docker 部署前端應(yīng)用程序的過(guò)程。

先決條件
要遵循本指南，您應(yīng)該：

• React（或任何前端框架）的基本知識(shí)。
• 熟悉Docker和Nginx。

設(shè)置應(yīng)用程序

清晰的項(xiàng)目結(jié)構(gòu)簡(jiǎn)化了部署。將所有必需的文件放在一個(gè)文件夾中以構(gòu)建 Docker 映像。這些文件應(yīng)包括：

• build/ 文件夾（包含生產(chǎn)就緒的靜態(tài)文件）。
• Dockerfile（定義如何構(gòu)建鏡像）。
• nginx.conf（自定義 Nginx 配置）。
• sites-enabled/（可選的附加 Nginx 配置）。

關(guān)于Nginx配置的深入解釋，請(qǐng)參考這個(gè)

提升 React：釋放 Nginx 的力量，輕松部署

阿米特·庫(kù)馬爾·魯特 ? 2023 年 12 月 9 日

#javascript ＃教程 #反應(yīng) #nginx

步驟：

1. 構(gòu)建應(yīng)用程序的生產(chǎn)版本：

npm run build

此命令創(chuàng)建一個(gè)包含優(yōu)化靜態(tài)文件的 build/ 目錄。

1. 創(chuàng)建 Dockerfile： 編寫以下 Dockerfile 來(lái)定義容器：

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;"]

構(gòu)建 Docker 鏡像

文件準(zhǔn)備好后，構(gòu)建 Docker 映像：

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

如果部署在其他虛擬機(jī)上，您可以將映像打包為 .tar 文件：

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

運(yùn)行 Docker 鏡像

選項(xiàng)1：直接運(yùn)行鏡像

1. 從 .tar 文件加載 Docker 鏡像（如果在系統(tǒng)之間傳輸）：

cat my-app-img.tar | docker load

1. 運(yùn)行容器：

docker run -itd -p 80:80 --name my-app my-app-img

這將啟動(dòng)容器，并將其暴露在端口 80 上。

選項(xiàng) 2：運(yùn)行 Docker Compose

創(chuàng)建 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

然后，啟動(dòng)容器：

docker-compose up -d

結(jié)論

使用 Nginx 和 Docker 部署前端應(yīng)用程序提供了強(qiáng)大的、可擴(kuò)展的解決方案。這是因?yàn)樗鼘㈧o態(tài)資產(chǎn)與后端 API 分開，從而提供了最佳性能。自定義您的 Nginx 配置以滿足您的需求，例如：

• 添加 SSL/TLS 以支持 HTTPS。
• 打開緩存以獲得高性能。

此設(shè)置使您的前端應(yīng)用程序在生產(chǎn)就緒環(huán)境中保持可靠。

如果您有任何改進(jìn)流程的建議，請(qǐng)?jiān)谠u(píng)論部分留下。如果您覺得這篇文章有幫助，請(qǐng)點(diǎn)贊并分享。

編碼快樂！

以上是使用 Nginx 對(duì)前端應(yīng)用程序進(jìn)行 Docker 化以實(shí)現(xiàn)無(wú)縫部署的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！