如何交朋友 react.js app、nginx 和 docker-compose？答案

【问题标题】：How to make friends react.js app, nginx and docker-compose?如何交朋友 react.js app、nginx 和 docker-compose？
【发布时间】：2019-12-23 14:56:52
【问题描述】：

React 应用程序是一个客户端，因此它有一些端点可以连接（无论是 axios http 还是 websocket）

通常，类似后端的客户端（各种模块化服务器微服务）从 ENV 获取它，这是在容器构建过程中设置的，并在 docker-compose.yml 文件中声明。启动应用程序需要构建过程中的所有内容，最后一步是运行命令。

React Frontend 也需要构建过程，但这在某种意义上有所不同，您实际上在构建完成时并没有运行“bundle.js”，并且在构建之后不需要所有其余部分。实际上，我在主机上构建，在 docker-compose.yml 中，我说：“nginx 映像”和“将外部配置和静态文件挂载为卷”。但是这样我就不能使用端点，并且后端 api 的 nginx 代理不起作用。

我是否应该编写 Dockerfile 来构建前端，以及如何将其集成到 nginx 生成的图像中？（为了构建我需要节点映像，但为了运行我需要 nginx，同时删除源和包..

试图在短期内改写它

在开发模式下 backend:someport 在本地运行，前端 webserver:80 正在代理 api 请求到 localhost:someport
如果您将后端放入容器中，一切都不会改变
如果你把 webserver 放在容器中 localhost:someport 将停止工作，因为没有没有后端:someport 在该容器内运行，显然......
生产前端需要构建过程，其中涉及大量临时文件

解决方案？

【问题讨论】：

标签： docker nginx docker-compose dockerfile nginx-config

【解决方案1】：

一个月后，我在这里退休，可以分享找到的解决方案。最好的结果是通过两遍构建过程实现的。这是一个简单的 dockerfile，说明了这种方法：

#dont use alpine if you need gyp (web3, sha3 and friends..)
FROM node:current as builder
WORKDIR /frontend

# install packages
COPY ./.yarnrc ./
COPY ./package.json ./
RUN yarn install

# build front
COPY ./.babelrc ./
COPY ./webpack.config.js ./
COPY ./pub ./pub
COPY ./src ./src
RUN yarn build

# copy result static to nginx
FROM nginx:stable-alpine
COPY --from=builder /frontend/dist/ /data/www/
COPY ./nginx /etc/nginx

优点：

所有内容（静态、配置）都捆绑在图像中
不需要任何卷（日志流式传输到 syslog）
小图像大小（约 20 兆）
非常容易部署 - 只需上传图片即可
开发机器上不需要安装node.js和朋友

缺点：

如果更改 React 源代码，重建时间会很长
有时卷可能很方便

【讨论】：