如何 Docker 化 React 应用程序

获取当前 Git 提交哈希

使用提交哈希作为标签构建 Docker 镜像

什么是docker？

Docker 是全球使用最广泛的平台之一。借助 Docker，开发人员可以将应用程序源代码与运行应用程序所需的操作系统和库相结合，从而实现应用程序（后端或前端）的容器化，从而使容器化的镜像文件可以在任何环境中运行。因此，开发人员无需局限于单一的云平台。只要有任何平台支持 Docker，他们就可以根据需要轻松切换平台。

先决条件

本指南要求你有一个 React 项目。最好对 Docker 镜像和容器等概念有一个简单的了解。不过，我们也会讨论这些内容。

另一件事是 Docker 桌面。这不是必需的。您不需要 Docker 桌面应用程序来运行 Docker 命令。但有它总是好的。

什么是 docker 镜像？

简单来说，Docker 镜像是一个模板，其中包含应用程序以及在 Docker 上运行该应用程序所需的所有依赖项。镜像是最重的内容。Docker 镜像有多个层。

基础镜像- 这是我们用 docker build 命令从头构建的层

父镜像- 父镜像可以是 Docker 镜像的第一层。它是一个可重复使用的镜像，可作为所有其他层的基础。

层- 使用代码将层添加到基础镜像，使其能够在容器中运行。Docker 的默认状态是显示所有顶层镜像，包括存储库、标签和文件大小。

容器层- Docker 镜像不仅会创建一个新的容器，还会创建一个可写或容器层。该层托管对正在运行的容器所做的更改，并存储新写入和删除的文件以及对现有文件的更改

Docker 清单- Docker 镜像的这一部分是一个附加文件。它使用 JSON 格式描述镜像，包含镜像标签和数字签名等信息。

什么是docker容器？

容器是软件的标准单元，它打包代码及其所有依赖项，以便应用程序能够从一个计算环境快速可靠地运行到另一个计算环境。

Docker 镜像在 Docker Engine 上运行时会变成容器。容器化软件适用于 Linux 和 Windows 应用程序，无论其基础架构如何，都能以相同的方式运行。

现在我们已经知道接下来要做什么了。那就开始吧。

步骤

步骤 1 - 创建 ReactJS 项目

这对你来说应该很容易。要创建一个 ReactJS 项目，你只需要运行以下命令。
npx create-react-app react-docker-training

步骤 2 - 创建 .dockerignore 文件
下一步是创建一个 .dockerignore 文件。它和 .gitignore 文件有点类似。其目的是告诉 Docker 在构建 Docker 镜像时避免使用这些文件。

有两种创建文件的方法。最简单的方法是手动创建并命名为“.dockerignore”。

或者您可以使用以下命令来执行此操作

touch .dockerignore

由于这是一个简单的项目，我们没什么需要忽略的。但有一点我们必须忽略，那就是 node_modules 文件夹。因此，让我们将其添加到 .dockerignore 文件中。

步骤 3 - 创建 Dockerfile
要从 ReactJS 项目创建 Docker 镜像，我们需要告诉 Docker 要做什么。换句话说，我们需要提供构建指令。这些就是我们要写入 Dockerfile 的内容。

就像第一步一样，您可以手动创建文件，也可以使用以下命令

touch Dockerfile

现在让我们添加构建说明。

如您所见，这是一个多阶段构建过程。在第 1 阶段，我们使用 node:17-alpine 创建一个镜像。在第 2 阶段，我们将创建另一个镜像。但这次使用的是之前的镜像和 Nginx。

Nginx 主要用于生产环境。它可以减少镜像的大小。

步骤 4 - 构建 Docker 镜像
既然我们已经准备好所有文件，那就开始创建镜像吧。您可以通过两种方式创建镜像。如果您使用的是 VS Code，则有一个 Docker 扩展。安装该扩展后，您只需右键单击 Dockerfile 即可构建镜像。

但这不是一个好方法。所以在本文中，我将使用 docker 命令来实现这一点。

在 VS Code 中打开终端。运行以下命令

docker build -t docker-react-image:1.0 .

docker-react-image 是镜像的名称。你可以使用任何你喜欢的名称。1.0 是镜像的标签。

构建完成后，运行

docker image ls

列出所有镜像。您应该能够看到新创建的镜像。

步骤 5 - 使用镜像创建并运行容器。
现在我们有了镜像，让我们创建一个容器。这样我们就可以访问应用程序了。

为此，您需要执行 docker run 命令。在终端中，按如下方式执行命令。

docker run -d -p 4000:80 --name docker-react-container docker-react-image:1.0

让我们来讨论一下这个命令。

• -d 表示在后台运行容器并打印容器ID。
• -p 表示端口映射。端口映射用于访问 Docker 容器内运行的服务。我们打开主机端口，以便访问 Docker 容器内相应的开放端口。上述命令启动了一个 httpd 容器，并将主机的 4000 端口映射到该容器内的 80 端口。默认情况下，httpd 服务器监听 80 端口。现在，我们可以使用主机上的 4000 端口访问应用程序了。
• - -name 是容器名称。这里你可以使用任何你喜欢的名称。
• 最后是我们之前创建的镜像的名称。记住，在 docker run 命令中，最后一个参数必须是镜像名称。所以准备好后，请继续运行该命令。容器创建后，您应该会获得一个 ID。

Step 6 - Running the application
现在我们已经创建了一个镜像，以及一个使用该镜像的容器。因此，我们应该能够看到应用程序正在运行。让我们访问 localhost:4000 进行检查。

答对了。现在我们的 React 应用已经在 docker 容器上运行了。