使用NGINX和React-Router Docker化React应用程序

Docker是一个功能强大的工具，它使开发人员可以在一致的环境中工作，并使部署过程更加顺畅。随着React用户群的不断增长，越来越多的应用程序使用Docker部署，而大多数情况下，NGINX作为负载平衡器。如果您的应用程序使用非常流行的路由包react：react-router或react-router-dom，则此配置可能会导致问题。部署应用程序时，您会发现从根目录进入网站可以正常工作，而从任何子路径进入网站均会导致错误。这是由于NGINX无法告诉您要向该路由提供哪些文件。

要解决此问题，我们需要在应用程序的Dockerfile中使用特殊配置。这将告诉NGINX在哪里寻找文件来服务任何给定的路由。让我们深入了解配置。

Dockerfile

Dockerfile是Docker在为您的应用程序构建容器时将用作说明的文件。该文件应在应用程序的根目录中创建，没有文件扩展名。

此配置将利用Docker的多阶段构建。在第一步中，我们将构建React应用程序，在第二步中，我们将配置NGINX并为其提供适当的配置。

构建的第一阶段如下所示：

# Stage 0, "build-stage", based on Node.js to build the frontend
FROM node:alpine as build
WORKDIR /app
COPY package*.json /app/
RUN npm install
COPY ./app/
RUN npm run build

此阶段将使用node的最新稳定版本作为构建应用程序的初始映像。然后，它将设置一个工作目录并将我们的文件复制到环境中，然后安装依赖项并创建一个编译的构建文件夹。我们将在配置NGINX的下一个构建阶段使用它。

NGINX配置

现在我们已经为React应用程序建立了初始构建，我们可以创建一个配置来告诉NGINX在哪里寻找文件。我们需要做的第一件事是在应用程序的根目录中创建一个新的nginx目录，以保存我们的NGINX配置（以及您以后可能需要的任何其他NGINX相关文件）。在此文件夹中，我们将创建一个新文件nginx.conf。

现在这是重要的一步，我们告诉NGINX从哪里为我们的应用程序的任何给定的子路径提取我们的文件。在配置文件中添加以下代码:

server {
  listen 80;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;  }
  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
    root  /usr/s