使用Docker创建并运行一个create-react-app应用

创建并运行一个使用 Create React App (CRA) 创建的应用程序的 Docker 容器涉及几个步骤。以下是一个详细的过程，包括创建一个简单的 React 应用、编写 Dockerfile、构建镜像以及运行容器。

步骤 1: 创建一个新的 React 应用

如果你还没有一个 React 应用，可以使用 Create React App 快速创建一个：

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

步骤 2: 添加 Dockerfile

在你的 React 应用根目录中创建一个名为 Dockerfile 的文件，没有文件扩展名。添加以下内容到你的 Dockerfile 中：

# 使用官方 Node.js 作为构建环境
FROM node:14 AS build

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 yarn.lock 文件
COPY package.json yarn.lock ./

# 安装项目依赖
RUN yarn install

# 复制项目文件
COPY . .

# 构建应用
RUN yarn build

# 运行环境使用 nginx
FROM nginx:stable-alpine

# 从构建阶段复制构建产物到 nginx 目录
COPY --from=build /app/build /usr/share/nginx/html

# 暴露 80 端口
EXPOSE 80

# 启动 nginx
CMD ["nginx", "-g", "daemon off;"]

这个 Dockerfile 使用了多阶段构建：第一阶段使用 Node.js 镜像构建 React 应用，第二阶段使用 nginx 镜像来服务构建产物。

步骤 3: 构建 Docker 镜像

在你的应用根目录下，运行以下命令来构建 Docker 镜像：

docker run -d -p 8080:80 my-react-app

这个命令会在后台运行一个新的容器实例，将容器的 80 端口映射到宿主机的 8080 端口。

步骤 5: 访问应用

现在，你可以通过浏览器访问 http://localhost:8080 来查看你的 React 应用了。

这个过程概述了如何使用 Docker 容器化一个简单的 React 应用。你可以根据需要调整 Dockerfile 中的指令，例如使用不同的基础镜像或暴露不同的端口。

如果在 Docker 容器内部安装了 Nginx，宿主机就不需要再安装 Nginx。容器技术旨在将应用及其依赖打包在一起，从而实现应用的隔离和移植性。因此，只要容器正在运行，并且你已经正确配置了容器内的 Nginx 以及容器和宿主机之间的网络（例如，通过端口映射），你就可以直接使用容器内的 Nginx，无需在宿主机上安装相同的服务。