如何 Docker 化 React 應用程式
對 React 應用程式進行 Docker 化可以簡化您的開發工作流程，確保不同開發階段的環境一致，並簡化部署流程。本指南將引導您完成 Dockerize React 應用程式的步驟，從設定 Docker 環境到建置和執行 Docker 映像。
先決條件
-
Docker ：請確保您的電腦上安裝了 Docker。您可以從Docker官網下載。
-
React 應用程式：您應該使用
create-react-app或其他方法來建立一個 React 應用程式。如果您沒有，您可以使用create-react-app建立一個基本應用程式。
npx create-react-app my-react-app
cd my-react-apphttps://www.youtube.com/watch?v=S6fqsnkBd28
https://www.youtube.com/watch?v=0d6tf4te4lw
第 1 步：建立 Dockerfile
Dockerfile是一個腳本，其中包含一系列有關如何為應用程式建立 Docker 映像的說明。在 React 應用程式的根目錄中，建立一個名為Dockerfile的文件，其中包含以下內容：
# Use an official node runtime as a parent image
FROM node:16-alpine
# Set the working directory
WORKDIR /app
# Copy the package.json and package-lock.json files to the working directory
COPY package*.json ./
# Install the dependencies
RUN npm install
# Copy the rest of the application code to the working directory
COPY . .
# Build the React app
RUN npm run build
# Install a simple server to serve the React app
RUN npm install -g serve
# Set the command to run the server
CMD ["serve", "-s", "build"]
# Expose port 3000
EXPOSE 3000步驟 2：建立 .dockerignore 文件
.dockerignore檔案指定將檔案複製到 Docker 映像時應忽略哪些檔案和目錄。這可以幫助減小圖像大小並加快建造過程。在根目錄中建立一個.dockerignore文件，內容如下：
node_modules
build
.dockerignore
Dockerfile
.git
.gitignore第 3 步：建置 Docker 映像
若要為您的 React 應用程式建立 Docker 映像，請導航至應用程式的根目錄並執行以下命令：
docker build -t my-react-app .此命令告訴 Docker 使用目前目錄 ( . ) 作為上下文，建立帶有my-react-app標籤的映像。
第 4 步：執行 Docker 容器
建置 Docker 映像後，您可以使用以下命令在容器中執行它：
docker run -p 3000:3000 my-react-app此命令將本機電腦上的連接埠 3000 對應到容器中的連接埠 3000，讓您在瀏覽器中透過http://localhost:3000存取 React 應用程式。
第 5 步：Docker 撰寫（可選）
如果您想管理多個容器或新增更多配置，可以使用 Docker Compose。在根目錄下建立docker-compose.yml文件，內容如下：
version: '3'
services:
react-app:
build: .
ports:
- "3000:3000"若要啟動docker-compose.yml檔案中定義的服務，請執行以下命令：
docker-compose uphttps://www.youtube.com/watch?v=3Xm3KJSaH1A
結論
透過執行以下步驟，您已成功對 React 應用程式進行 Docker 化。對應用程式進行 Docker 化不僅可以確保不同環境之間的一致性，還可以簡化部署流程，從而更輕鬆地管理和擴展應用程式。
其他資源
您可以根據專案的特定需求隨意自訂 Dockerfile 和 Docker Compose 配置。快樂 Docker 化！
原文出處：https://dev.to/sh20raj/how-to-dockerize-a-react-application-19kc
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式