create-react-app + docker = QA和PROD部署

Question

我为我的项目使用docker作为我的开发环境使用create-react-app。

现在我想知道如何将我的项目部署到AWS（我将部署泊坞窗）的最佳实践。

也许我的问题是一个虚拟的，但我真的坚持下去。

我的docker文件有一个命令yarn start ...对于dev它足够了我不需要构建任何东西，我的bundle会在内存中运行，但是对于QA或PROD我想使用npm run build构建但据我所知，它将创建一个新的文件夹，其中包含应该在prod env上使用的文件。

这就是说，我的问题是：这种情况的最佳做法是什么？

谢谢。

Answer 1

这是我做过什么：

1. 使用npm run build构建所有静态文件。
2. 使用_/nginx图像来定制服务于这些静态文件的HTTP服务器。 （Dockerfile）
3. 将定制图像上传到Amazon EC2 Container Service（ECS）。
4. 在ECS任务中加载图像。然后使用ELBv2启动负载平衡服务器，将所有外部请求转发给ECS。
5. （可选）在ELBv2中启用HTTPS。

一次的事情：

1. 图出ECS的机制。您需要为ECS创建至少一台主机服务器。我用了Amazon ECS-Optimized AMI。
2. 在ECS上创建Docker存储库，以便您可以上传自定义的Docker镜像。
3. 为您的服务创建ECS任务定义。
4. 创建ECS集群并添加任务。
5. 配置ELBv2，以便将流量转发到您的内部ECS动态端口。
6. （可选）编写脚本以自动进行日常部署。

如果有人要我为她/他做这些事，我会得到报酬。或者你可以根据这些线索自己找出答案。

但是，如果您的网站是一个简单的静态网站，我建议使用Github pages：它是免费和简单的。我的解决方案适用于可能涉及其他服务（例如Redis，ElasticSearch）和所需的每日/每小时部署的多个静态+动态应用程序。

Answer 2

您将不得不运行npm run build，然后将生成的文件复制到您的容器中。您可以使用单独的Dockerfile.build来构建文件，将其解压缩并添加到最终容器中。您的最终容器应该能够提供这些文件。您可以将其基于nginx或其他服务器。您也可以使用它作为data volume container in your existing server container。

最近的Docker版本允许您组合两个Dockerfiles，从而使这个过程更加简单。你可以有一个构建容器，然后在同一个文件中定义最终的容器。

这里是为您的使用情况下，一个简单的例子：

FROM node:onbuild AS builder 
RUN npm run build 

FROM nginx:latest 
COPY --from=builder /usr/src/app/build /usr/share/nginx/html 

你可能会希望在你自己的nginx的配置文件。

更多关于多级建立在这里：

https://docs.docker.com/engine/userguide/eng-image/multistage-build/