Docker化生产环境React.js

欢迎，炼金术士！🧙‍♂️

随着云计算的普及，容器化已成为中大型项目常用的技术，因为它为我们提供了一种隔离、可扩展且易于部署应用程序的方式。

今天我们将学习并创建一个可用于生产环境的 React.js 应用 Docker 镜像。我对此非常兴奋，那么，让我们开始吧😼。

要求

• Docker
• Node.js

首先，请确保您的计算机上已安装 Docker。如果没有安装，请先安装，然后再来这里。

docker -v

然后，请确保您的计算机上也安装了 Node.js。我们需要它来启动我们的 React.js 应用程序。

node -v

初始化项目

初始化 React.js 应用程序的方法有很多种，可以手动初始化，也可以使用预构建的模板或前端工具。

本文我们将使用名为Vite 的前端工具，因为它速度快且可配置。

暗示

您可以使用Create React App (CRA)来初始化您的应用程序。它也很好用，而且是由 Facebook 开发的开源工具。

打开终端并输入以下命令。

npm create vite@latest docker-production-react

会出现一个提示。只需选择 React 和 JavaScript 即可。

现在切换到该文件夹docker-production-react​​并运行以下命令。


npm i


暗示

npm i只是 的别名命令npm install。

为了确保初始化过程顺利进行，我们启动本地服务器。

npm run dev

用浏览器打开http://localhost:5173，你应该会看到类似这样的内容。

创建自定义 Docker 镜像

在本文中，我们将使用一种称为多阶段构建的技术。我们的目标是将 React.js 应用程序本身的构建过程与 Web 服务器（用于提供网站服务）的构建过程分开。

构建过程设置

首先，在文件内docker-production-react创建一个Dockerfile文件，并按照下面的代码片段操作。

这里我们使用16.17.1-alpine3.16Alpine Linux。我选择 Alpine Linux 是因为它体积小，这样可以加快构建过程。

FROM node:16.17.1-alpine3.16 as build
WORKDIR /usr/app
COPY . /usr/app
RUN npm ci
RUN npm run build

上面的代码片段告诉 Docker 从 Docker Hub 拉取（当尚未拉取时）或使用拉取的镜像作为node:16.17.1-alpine3.16构建阶段的基础镜像，将当前目录设置为/usr/app，运行npm ci并最后使用命令构建应用程序npm run build。

Web 服务器设置

由于 React.js 应用是静态文件应用，我们需要一个简单而高效的 Web 服务器，以便用户能够访问该应用。因此，我选择 Nginx 来承担这项任务。

请根据前面的内容Dockerfile，继续阅读以下片段。

FROM nginx:1.23.1-alpine
EXPOSE 80
COPY ./docker/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
COPY --from=build /usr/app/dist /usr/share/nginx/html

在这里，我们告诉 Docker 使用nginx:1.23.1-alpine该镜像作为基础镜像，并暴露端口 80（Nginx 的默认端口），复制配置文件并复制我们打包的应用程序。

暗示

因为 Nginx 只是一个普通的 Web 服务器，只服务于我们的应用程序，所以运行时不绑定配置文件是可以的。

对于 Nginx 配置文件，default.conf请在 . 目录下创建文件docker/nginx/conf.d。

mkdir -p docker/nginx/conf.d; touch docker/nginx/conf.d/default.conf

……并请参考以下片段。

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

此配置仅适用于我们的应用程序，但您可以根据需要进行自定义。

这是我们的最终Dockerfile……

FROM node:16.17.1-alpine3.16 as build
WORKDIR /usr/app
COPY . /usr/app
RUN npm ci
RUN npm run build

FROM nginx:1.23.1-alpine
EXPOSE 80
COPY ./docker/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
COPY --from=build /usr/app/dist /usr/share/nginx/html

.dockerignore

它与 类似.gitignore，但它是在构建 Docker 镜像时使用的。

touch .dockerignore

把它放进去.dockerignore

.git
.DS_Store
.env
node_modules

重要的

切勿将敏感信息放入 Docker 镜像中。请使用 `.` 将其排除在外.dockerignore。

建设阶段

执行此命令以构建我们的镜像。

docker build -t web:0.1.0 .

请确保图片可用。

docker image ls

测试

让我们来验证一下我们的工作。

docker run --rm --name web-1 -p 80:80 -d web:0.1.0

现在http://localhost用浏览器打开，你应该会看到类似这样的内容。

耶！成功了……

附赠：源代码

点击这里查看。

也请关注我的最新实验。