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

大家好我是佩奇
发布于 2022-7-1 14:45
浏览
0收藏

作者 | 张春 翻译

来源 | 新钛云服(ID:newtyun)

转载请联系授权(微信ID:zlm935177782)

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

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

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

使用NGINX和React-Router Docker化React应用程序-鸿蒙开发者社区

此配置将利用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和React-Router Docker化React应用程序-鸿蒙开发者社区

现在这是重要的一步,我们告诉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容器中运行!

分类
标签
已于2022-7-1 14:45:15修改
收藏
回复
举报
回复
    相关推荐