如何 Docker 化 React 应用程序

什么是Docker？

Docker 是世界上最常用的平台之一。使用 Docker，开发人员可以通过将应用程序源代码与运行应用程序所需的操作系统和库相结合来容器化其应用程序（后端或前端），以便容器化的映像文件可以在任何环境中运行。因此，开发人员无需坚持使用单一云平台。如果任何平台支持 docker，那么他们可以在需要时轻松更改平台。

先决条件

在根据本文章进行实践的时候，您需要一个 React 项目。最好对 docker 镜像和容器之类的东西有一个简单的了解。但我们也会讨论这些。

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

什么是 Docker 镜像？

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

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

父映像- 父映像可以是 Docker 映像中的第一层。它是一个重复使用的图像，充当所有其他层的基础。

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

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

Docker manifest- Docker 映像的这一部分是一个附加文件。它使用JSON格式来描述图像，使用图像标签和数字签名等信息。

什么是 docker 容器？

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

docker 镜像在 Docker Engine 上运行时就成为容器。适用于基于 Linux 和 Windows 的应用程序，容器化软件将始终以相同的方式运行，无论基础设施如何

现在我们知道我们要做什么了。那么让我们开始吧。

Steps

第 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

现在让我们添加构建指令。

#Stage 1
FROM node:17-alpine as builder
WORKDIR /app
COPY package*.json .
COPY yarn*.lock .
RUN yarn install
COPY . .
RUN yarn build

#Stage 2
FROM nginx:1.19.0
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
COPY --from=builder /app/build .
ENTRYPOINT ["nginx", "-g", "daemon off;"]

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

Nginx 主要用于生产构建。它缩小了图像的尺寸。

第 4 步 - 构建 docker 镜像
既然我们已经拥有了所有文件，那么让我们继续创建一个镜像。您可以通过两种方式执行此操作。如果您使用 VS Code，则有一个 docker 扩展。安装完成后，您只需右键单击 Dockerfile 并构建镜像即可。

但这不是一个好方法。因此，在本文中，我将使用 docker 命令来执行此操作。

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

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

docker-react-image 是镜像的名称。您可以指定任何您喜欢的名称。1.0是image的标签。

构建完成后，我们来运行

docker image ls

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

第 5 步 - 创建并运行包含图像的容器
现在我们已经有了image，让我们创建一个容器。这样我们就可以访问该应用程序。

为此，您需要执行 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 容器上运行。