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/