Docker化 React 應用程式可以簡化您的開發工作流程，確保不同開發階段的環境一致，並簡化部署流程。本指南將引導您完成 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-app
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
.dockerignore 檔案指定將檔案複製到 Docker 映像時應忽略哪些檔案和目錄。這可以幫助減小圖像大小並加快建造過程。在根目錄中建立一個 .dockerignore 文件，內容如下：
node_modules build .dockerignore Dockerfile .git .gitignore
要為您的 React 應用程式建立 Docker 映像，請導航至應用程式的根目錄並執行以下命令：
docker build -t my-react-app .
此指令告訴 Docker 使用目前目錄 (.) 作為上下文，建立帶有 my-react-app 標籤的映像。
建置 Docker 映像後，您可以使用以下命令在容器中執行它：
docker run -p 3000:3000 my-react-app
此命令將本機電腦上的連接埠 3000 對應到容器中的連接埠 3000，讓您在瀏覽器中透過 http://localhost:3000 存取 React 應用程式。
如果您想要管理多個容器或新增更多配置，可以使用 Docker Compose。在根目錄下建立 docker-compose.yml 文件，內容如下：
version: '3'
services:
react-app:
build: .
ports:
- "3000:3000"
要啟動 docker-compose.yml 檔案中定義的服務，請執行以下命令：
docker-compose up
透過執行以下步驟，您已成功對 React 應用程式進行 Docker 化。對您的應用程式進行 Docker 化不僅可以確保不同環境之間的一致性，還可以簡化部署流程，從而更輕鬆地管理和擴展您的應用程式。
您可以根據專案的特定需求隨意自訂 Dockerfile 和 Docker Compose 配置。快樂 Docker 化！
以上是如何 Docker 化 React 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
