为什么以及何时使用 Docker，使用 Docker 容器开发 React 应用并实现实时重载

为什么要使用 Docker？
Docker 是一个开放平台，为在不同环境中开发、交付和运行应用程序提供可移植性、一致性和可扩展性。Docker 使您能够将应用程序与基础架构分离，从而快速交付软件。与
虚拟机不同，Docker 容器不需要单独的操作系统。这使得 Docker 容器具有轻量级、占用空间更小、可移植性更高、启动时间更短等优势。

何时使用 Docker？
1. 如果您的业务不断发展，每隔几个月就会有新的开发人员加入团队。与其浪费宝贵的时间搭建他们的本地开发环境（例如数据库或第三方库，这些可能需要几个小时到几天的时间，具体取决于项目的复杂程度），不如使用 Docker 来自动化这些设置，让新开发人员能够快速上手。

2. 如果同一软件需要在不同的环境中运行：例如，开发人员需要在两台电脑上工作，一台是开发电脑，一台是生产服务器，或者开发人员的电脑和测试人员的电脑。使用 Docker，您可以将应用程序运行在独立的容器中，从而确保应用程序在每个环境中都能以一致且可预测的方式运行。

3. 如果您需要测试程序的新技术，例如新的数据库、不同的编程语言或新的工具，则可以利用 Docker Hub 将所需的软件包、工具或数据库拉取到隔离的容器中进行测试。

4. 如果你的软件需要在服务器上运行多个应用程序怎么办？那么，使用 Docker，即使每个应用程序共享相同的资源，你也可以将每个应用程序的组件放在单独的容器中。

何时应避免使用 Docker？
1. 开发桌面应用程序时。因为 Docker 更适用于运行在服务器上的 Web 应用程序。此外，丰富的 GUI 也需要额外的解决方案才能与 Docker 配合使用。

2- 开发一个不需要任何额外工具或服务的小型应用程序。

3. 如果你的开发团队只有一名开发人员，那么使用 Docker 的好处就不那么明显，你可以等到软件规模扩大后再开始使用 Docker。

4- 如果您的团队中大多数开发人员使用 MacBook，因为 Docker 在 Mac 操作系统上运行时会面临许多性能问题。

在 Docker 容器中运行 React 应用以测试新环境：
1- 从官方网站
https://docs.docker.com/desktop/install/windows-install/在您的电脑上安装 Docker。

2. 将 Dockerfile 添加到项目目录中，该文件将用于构建 Docker 镜像（将 React 应用容器化）。



# Stage 1
# Use the desired Node.js runtime as the base image
FROM node:18-alpine AS build
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
# Set the working directory in the container
WORKDIR /app

# Copy package.json and pnpm-lock.yaml to the working directory
COPY package.json ./
COPY pnpm-lock.yaml ./

# Install project dependencies
RUN pnpm install

# Copy the entire React app code to the container
COPY . .

# Stage 2
# Expose the port of your application to bind with the host port
EXPOSE 3000

# run your app
CMD ["pnpm", "run", "start"]

3. 添加 .dockerignore 文件：



/node_modules
/.history
/build
npm-debug.log
.git
.gitignore

4. 基于 Dockerfile 构建 Docker 镜像
：`docker image build -t :
` `-t` 选项指定镜像的名称和标签（默认为 latest）。`/path` 表示运行命令的路径（末尾的点号表示当前目录）。

镜像构建完成后，您可以在 Docker Desktop 软件中查看结果，如下所示：

5. 基于生成的镜像运行 Docker 容器。点击运行按钮或使用以下命令：
`docker run --name -p 3005:3000 -d -v ${pwd}`。
例如：`docker run --name ecommerce-website-react-reactquery-redux -p 3005:3000 -d -v ${pwd} ecommerce-website-react-reactquery-redux`。在浏览器中
访问http://localhost:3005/即可查看应用。

运行基于 Docker 镜像的容器的另一种方法是，单击 Docker Desktop 软件中镜像名称旁边的运行按钮：