以下是簡單的步驟，向您展示如何從空的 React 應用程式開始（使用create-react-app ），建立該應用程式的生產版本，然後在 Docker 容器中執行它。
讓我們先建立一個新的 React 應用程式：
- 安裝 create-react-app
npm install create-react-app --global
- 建立一個新的 React 應用程式：
create-react-app react-docker-app
- 前往
react-docker-app資料夾並執行它，以確保一切正常：
cd react-docker-app && yarn start
yarn start指令編譯 React 應用程式並開啟瀏覽器。
現在我們已經執行了應用程式，讓我們在專案的根資料夾中建立一個Dockerfile 。以下是Dockerfile的內容：
https://gist.github.com/peterj/286b537f7948c0762220d7a8c60821d1
在繼續之前，我們先解釋一下這個Dockerfile中發生了什麼事。
第 1-4 行是建構的第一階段。在此階段，您將所有原始程式碼複製到容器並執行yarn run build ，以建立最佳化的生產建置。
第 6-10 行是建構的第二階段。安裝服務包並在第 9 行，將建置第一階段的輸出從資料夾/app/build複製到容器中的目前資料夾（ /app - 這是由WORKDIR /app指令設定的Dockerfile ）。
關於多階段建置：如果您想知道 Dockerfile 中的兩個 FROM 語句。這是因為您想使用多階段建置。在建置的第一階段，將原始程式碼複製到容器並執行建置命令。在第二個建置階段，您僅將建置的工件（HTML、JS...）複製到容器中。使用多階段建置會產生更小的 Docker 映像。範例中的第一個圖像約為 198MB，而第二個圖像只有 86.7MB。
在最後一行中，您執行serve命令以在連接埠80上提供目前資料夾的內容。
除了服務之外，你還可以使用 Nginx；但這可能需要更多配置。
若要建置映像，您可以從Dockerfile所在的專案根資料夾執行以下命令：
docker build -t react-docker-app .
使用-t指定圖像的名稱，使用.您指定建置上下文（例如目前資料夾）。建置完成後，最後一行應如下所示：
Successfully tagged react-docker-app:latest
最後，讓我們現在執行這個容器。要在本地執行它，您需要提供映像的名稱以及我們希望可以存取 React 應用程式的連接埠。請注意，我們在服務命令中使用了連接埠80 ，因此在指定容器連接埠時需要確保使用80如下所示：
docker run -it -p 8080:80 react-docker-app
容器執行後，您可以開啟http://localhost:8080 ，然後您將能夠存取在 Docker 容器內執行的 React 應用程式。
🔥 如果您想了解有關 Kubernetes、Istio、Docker 和雲原生的更多訊息，請查看我的《學習 Istio》電子書 📖。您可以在 👉 https://learnistio.com 👈 取得該書的免費預覽
原文出處：https://dev.to/peterj/run-a-react-app-in-a-docker-container-kjn
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
