使用 Nginx 对前端应用程序进行 Docker 化以实现无缝部署

介绍

大多数情况下，部署前端应用程序需要将静态资产的服务与后端 API 分开。一个好的方法是将 Nginx 作为反向代理和 Web 服务器与 Docker 结合起来进行容器化。本指南将带您完成如何使用 Nginx 和 Docker 部署前端应用程序的过程。

先决条件

如何使用 Nginx 和 Docker 部署前端应用程序
简介
高效部署前端应用程序通常需要将静态资产的服务与后端 API 分开。一种强大的方法是将 Nginx 作为反向代理和 Web 服务器与 Docker 结合起来进行容器化。本指南将引导您完成使用 Nginx 和 Docker 部署前端应用程序的过程。

先决条件
要遵循本指南，您应该：

• React（或任何前端框架）的基本知识。
• 熟悉Docker和Nginx。

设置应用程序

清晰的项目结构简化了部署。将所有必需的文件放在一个文件夹中以构建 Docker 映像。这些文件应包括：

• build/ 文件夹（包含生产就绪的静态文件）。
• Dockerfile（定义如何构建镜像）。
• nginx.conf（自定义 Nginx 配置）。
• sites-enabled/（可选的附加 Nginx 配置）。

关于Nginx配置的深入解释，请参考这个

提升 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中文网其他相关文章！