如何 Docker 化 React 应用程序

将 React 应用程序 Docker 化可以简化您的开发工作流程，确保不同开发阶段的环境一致，并简化部署流程。本指南将引导您完成将 React 应用程序 Docker 化的步骤，从设置 Docker 环境到构建和运行 Docker 镜像。

先决条件

Docker：确保你的机器上安装了 Docker。你可以从Docker 的官方网站下载它。
React 应用：你应该已经有一个使用或其他方法创建的 React 应用create-react-app。如果没有，可以使用创建一个基础应用create-react-app。

npx create-react-app my-react-app
cd my-react-app

步骤 1：创建 Dockerfile

ADockerfile是一个脚本，其中包含一系列有关如何为你的应用程序构建 Docker 镜像的说明。在你的 React 应用程序的根目录中，创建一个名为的文件，Dockerfile其内容如下：

# Use an official node runtime as a parent image
FROM node:20-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 .

my-react-app此命令告诉 Docker使用当前目录（.）作为上下文构建带有标签的映像。

步骤4：运行Docker容器

一旦构建了 Docker 镜像，您就可以使用以下命令在容器中运行它：

docker run -p 3000:3000 my-react-app

此命令将本地计算机上的端口 3000 映射到容器中的端口 3000，从而允许您在浏览器中访问 React 应用程序http://localhost:3000。

步骤 5：Docker Compose（可选）

如果要管理多个容器或添加更多配置，可以使用 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 愉快！

https://t.me/boost/sopbots

文章来源：https://dev.to/sh20raj/how-to-dockerize-a-react-application-19kc