Docker React在 Docker 容器中运行 React 应用程序

运行 yarn run build

以下是一些简单的步骤，向您展示如何从一个空的 React 应用程序开始（使用create-react-app），创建该应用程序的生产版本，然后在 Docker 容器中运行它。

让我们从创建一个新的 React 应用程序开始：

1. 安装 create-react-app

npm install create-react-app --global

1. 创建一个新的 React 应用：

create-react-app react-docker-app

1. 转到react-docker-app文件夹并运行它，以确保一切正常：

cd react-docker-app && yarn start

该yarn start命令编译 React 应用程序并打开浏览器。

现在我们已经运行了应用程序，让我们Dockerfile在项目的根文件夹中创建一个。以下是其内容Dockerfile：

在我们继续之前，让我们先解释一下这里发生了什么Dockerfile。

第 1-4 行是构建的第一阶段。在此阶段，您将所有源代码复制到容器中并执行yarn run build该操作，以创建优化的生产构建。

第 6-10 行是构建的第二阶段。安装serve 包，并在第 9 行将构建第一阶段的输出从文件夹复制/app/build到容器中的当前文件夹（ - 这是由中的指令/app设置的）。WORKDIR /appDockerfile

关于多阶段构建：如果您对 Dockerfile 中的两个 FROM 语句感到疑惑，这是因为您想使用多阶段构建。在构建的第一阶段，您将源代码复制到容器并运行构建命令。在第二个构建阶段，您仅将构建的构件（HTML、JS 等）复制到容器。使用多阶段构建可以显著减小 Docker 镜像的大小。示例中的第一个镜像约为 198MB，而第二个镜像只有 86.7MB。

使用最后一行，运行serve命令在端口上提供当前文件夹的内容80。

除了服务之外，您还可以使用 Nginx；然而这可能需要更多的配置。

要构建图像，您可以从项目根文件夹运行以下命令，您的文件夹位于Dockerfile：

docker build -t react-docker-app .

使用-t指定镜像名称，使用.指定构建上下文（例如当前文件夹）。构建完成后，最后一行应该如下所示：

Successfully tagged react-docker-app:latest

最后，让我们运行这个容器。要在本地运行它，你需要提供镜像名称以及我们希望 React 应用可访问的端口。注意，我们80在 serve 命令中使用了 port ，因此在指定容器端口时也需要使用80port ，如下所示：

docker run -it -p 8080:80 react-docker-app

一旦容器运行，您就可以打开http://localhost:8080并能够访问在 Docker 容器内运行的 React 应用程序。

🔥 如果你想了解更多关于 Kubernetes、Istio、Docker 以及云原生的知识，可以看看我的《Learn Istio》电子书 📖。你可以在 👉 https://learnistio.com 👈免费预览这本书。