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

作者 | 张春 翻译

来源 | 新钛云服（ID：newtyun）

转载请联系授权（微信ID：zlm935177782）

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/share/nginx/html;
  }
}

该配置的重要内容是try_files ...这告诉NGINX浏览各个目录以找到要提供的正确文件。

回到Dockerfile

现在我们已经为NGINX进行了配置，我们可以返回Dockerfile并告诉Docker我们如何构建NGINX。我们将在第二阶段执行NGINX构建，并引用在第一阶段生成的React应用程序的构建文件夹。NGINX构建阶段应如下所示：

这为我们提供了一个新的NGINX映像，然后在其中删除默认配置，并将其替换为我们刚创建的配置。

# Stage 1, based on NGINX to provide a configuration to be used with react-routerFROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx.html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

构建
现在，我们可以尝试构建应用程序并在本地对其进行测试。要构建您的Docker映像，请使用：

docker build --tag example-name

您将看到Docker运行Dockerfile中定义的两个阶段。完成后，您可以使用以下命令运行容器：

docker run --publish 80:80 example-name

从这里，您应该能够通过导航到http：// localhost来查看您的React应用程序。

现在，您的React应用程序已配置为使用NGINX和react-router在稳定的Docker容器中运行！