Nginx+React在Docker中实现项目部署

一、引言

Nginx 是一个高性能的 HTTP 和反向代理服务器，也能够处理 IMAP/POP3/SMTP 服务，由 Igor Sysoev 开发并在 2004 年首次公开发布。它以处理静态内容、提供反向代理服务以及其高稳定性、低资源消耗而广受欢迎。Nginx 能够通过非阻塞方式处理多个连接，使其成为管理高并发请求的理想选择。此外，Nginx 还支持负载均衡和邮件代理，以及通过模块扩展更多功能，如 WebSockets 和流媒体支持。

React 是由 Facebook 开发并在 2013 年开源的 JavaScript 库，用于构建用户界面。它引入了组件化的思想，允许开发者通过封装组件来构建复杂的 UI，每个组件管理自己的状态，从而简化了开发和维护过程。React 的声明式设计使得创建交互式 UI 变得更简单，开发者只需为每个状态设计视图，React 会在数据变化时高效更新和渲染组件。React 还采用了 Virtual DOM 来提升性能，通过在内存中缓存 DOM 的副本，只将实际发生变化的部分应用于真实的 DOM，从而达到高效更新 UI 的目的。

将 Nginx 与 React 结合使用，可以为用户提供高性能和高效率的 Web 应用体验。Nginx 作为前端的 Web 服务器托管 React 构建的静态文件，并作为反向代理来转发 API 请求到后端服务。这种架构模式在现代 Web 开发中非常常见，既利用了 Nginx 的高性能和稳定性，也充分发挥了 React 在构建用户界面方面的强大能力，是一种有效的前后端分离部署方案。

二、编写 Dockerfile

接下来，我们将创建一个 Dockerfile 来定义如何构建 Docker 镜像。在你的 React 项目根目录下创建一个 Dockerfile：

# 使用官方 Ubuntu 基础镜像
FROM ubuntu:24.04

# 安装 Node.js 和 npm
RUN apt-get update && \
    apt-get install -y curl gnupg && \
    curl -sL https://deb.nodesource.com/setup_20.x | bash - && \
    apt-get install -y nodejs

# 安装 Nginx
RUN apt-get install -y nginx && \
    apt-get clean && \
    rm -rf /var/lib/apt/lists/*

# 设置工作目录
WORKDIR /app

# 复制应用程序文件
COPY . .

# 安装应用程序依赖
RUN npm install

# 构建应用程序
RUN npm run build

# 将构建好的 React 应用复制到 Nginx 的目录下
RUN cp -r build/* /var/www/html/

# 复制 Nginx 配置文件到容器
COPY ./default.conf /etc/nginx/sites-available/default

# 映射出来的 Nginx 配置目录
VOLUME /etc/nginx/sites-enabled

# 暴露 80 端口
EXPOSE 80

# 启动 Nginx 服务器
CMD ["nginx", "-g", "daemon off;"]

三、编写Nginx配置文件

server {
    listen 80; # 代理默认端口，可改
    server_name localhost;

    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 代理 /api/v1/ 到后端服务
    location /api/v1/ {
        proxy_pass http://127.0.0.1:5000/api/v1/; # 你的后端暴露位置
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location = /favicon.ico { log_not_found off; access_log off; }
    location = /robots.txt { log_not_found off; access_log off; allow all; }
    location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
        expires max;
        log_not_found off;
    }
}

四、构建和运行 Docker 容器

现在，你已经有了 Dockerfile 和 Nginx 的配置文件，是时候构建你的 Docker 镜像，并运行它了：

docker build -t my-react-app . docker run -d --net=host my-react-app

这些命令会构建你的 Docker 镜像，并在后台运行一个容器，并且使用容器的宿主机网络。