使用 Docker 将 React 应用容器化并投入生产

Docker - 概述
Docker 是一个用于开发、交付和运行应用程序的开放平台。Docker 通过隔离应用程序和基础架构来确保软件的快速交付。Docker 在一个松散隔离的环境中（称为容器）打包并运行所有内容。

关键术语
图像 - 一个完整的包，包含运行应用程序所需的一切（应用程序代码、所需的库、软件依赖项、配置等）（就像 OOP 中的类一样）

容器——图像的一个实例，就像OOP中的对象一样

卷 - 镜像是只读的，为了持久化数据，必须使用卷。简单来说，就是将一个文件夹（在主机操作系统上）与 Docker 镜像共享，以便从该文件夹读取/写入数据。

Dockerfile - 镜像的蓝图。在这里，您可以定义要构建的镜像中包含的内容。例如操作系统（例如 Ubuntu 16）、软件（例如 Node）等。

标签 - 现在只需从字面意义上考虑它。

我假设您已经准备好了 React 应用程序并希望使用 docker 进行容器化，如果没有，您可以克隆这个示例 React 应用程序并继续操作。

步骤1：安装Docker

下载并安装docker

第 2 步：准备配置文件

您需要创建两个配置文件，用于：

1. Nginx（网络服务器）
2. Docker（用于构建 Docker 镜像）

Nginx
React 的构建文件只是静态文件（HTML、CSS、JS 等），您需要一个 Web 服务器来提供静态文件，例如 Nginx、Apache、OpenLiteSpeed 等。
在您的 React 应用程序中，创建另一个目录并将其命名为nginx。在 nginx 目录（您刚刚创建）内，创建一个新文件并将其命名为nginx.conf。您也可以使用以下命令（逐个执行以完成）。

cd my-app
mkdir nginx
cd nginx
touch nginx.conf

编辑“nginx.conf”文件并向其中添加以下代码。

server {

  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;

    # to redirect all the requests to index.html, 
    # useful when you are using react-router

    try_files $uri /index.html; 
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

该代码块的要点是告诉 Nginx 监听端口 80，将每个请求重定向到“index.html”，根目录是“/usr/share/nginx/html”（提供服务的目录）。

Dockerfile
在您的应用程序目录中创建一个新文件并将其命名为，Dockerfile.prod并在其中添加以下代码：

# stage1 - build react app first 
FROM node:12.16.1-alpine3.9 as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY ./package.json /app/
COPY ./yarn.lock /app/
RUN yarn
COPY . /app
RUN yarn build

# stage 2 - build the final image and copy the react build files
FROM nginx:1.17.8-alpine
COPY --from=build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

创建一个新文件，并将其命名为 ，.dockerignore并node_modules在其中添加内容。这只是告诉 Docker 忽略该node_modules目录。

所以你的目录结构应该是这样的

my-app
│   Dockerfile.prod
│   .dockerignore    
│
└───nginx
      nginx.conf

解释

第一阶段

1. 使用多阶段 Docker 构建（Docker v17+ 支持）
2. FROM告诉要使用什么基础镜像（必需），您可以在Docker Hub查看基础镜像
3. WORKDIR用于指定工作目录（在图像内部，而不是主机操作系统）
4. ENV PATH在 PATH 中添加 node_modules
5. COPY用于package.json从当前目录（在主机上）复制到工作目录（在图像中）。
6. RUN用于运行命令，这里我们要运行Yarn安装 package.json 中提到的依赖项
7. COPY再次运行，将所有代码从主机操作系统复制到镜像中的工作目录
8. 运行yarn build以构建我们的应用程序

先复制 package.json 文件并安装依赖项，无需复制node_modules到镜像中。这样做是为了利用 Docker 优秀的缓存系统，减少构建时间。

第 2 阶段

在第一阶段，您将 package.json 复制到工作目录，安装了依赖项，复制了代码，并构建了最终的静态文件。在第二阶段：

1. 用作Nginx基础镜像。（nginx是镜像，1.17.8-alpine是标签。就像您在告诉您想要使用哪个特定版本/发行版的 Nginx 基础镜像一样）。
2. 将第一阶段的构建文件复制到/usr/share/nginx/html（Nginx 服务的默认目录）
3. 删除默认的 Nginx 配置文件/etc/nginx/conf.d/default.conf
4. 将之前创建的配置文件复制到docker镜像中
5. 用于EXPOSE暴露容器的端口。这里有个缺陷，它实际上并没有暴露端口，而只是为了文档说明。
6. Nginx在前台运行，而不是作为守护进程运行（即在后台运行）。

和CMD都RUN用于运行命令。区别在于RUN是镜像构建步骤，而CMD是容器启动时默认执行的命令。

步骤 3：构建和标记图像
从应用程序的根目录运行以下命令来构建和标记您的 docker 图像：

docker build -f Dockerfile.prod -t my-first-image:latest .

1. -f用于指定文件名。如果不指定，则必须将文件重命名为Dockerfile- 默认情况下，build 命令会在当前目录中查找该文件。
2. -t用于标记镜像。您可以根据自己的喜好标记镜像（例如 v1.0.0、v2.0.0、production、latest 等）。
3. .最后的很重要，应该添加它来告诉 docker 使用当前目录。

**步骤 4：运行容器
最后一步是运行构建的镜像（作为容器）
docker run -it -p 80:80 --rm my-first-image:latest

1. -it用于交互模式
2. -p公开和绑定端口。这里我们公开容器的 80 端口，并将其与主机的 80 端口绑定。第一个端口是你的机器（主机操作系统）的端口，第二个端口是 Docker 镜像容器的端口。例如，如果你使用 ，则需要在浏览器中-p 1234:80访问。http://localhost:1234
3. --rm一旦容器停止，就将其移除
4. my-first-image:latest我们要运行容器的图像的名称：标签

现在打开浏览器，http://localhost你将看到你的应用程序正在从docker中运行。如果你对React应用程序代码进行了任何更改，则需要重建镜像（步骤3）并再次运行它（步骤4）。

额外的

1. 运行docker image ls即可查看机器上所有图像的列表
2. 运行docker container ls即可查看所有正在运行的容器
3. 运行docker system prune以修剪容器（使用此命令时要小心，在使用前请阅读文档了解选项）
4. 阅读Docker 入门指南

让我们连接：

领英：https://www.linkedin.com/in/mubbashir10/

推特： https: //twitter.com/littlehulk01