使用 Docker 在 CentOS 上构建并运行 Nginx 镜像以托管 NPM 前端项目

本文介绍了如何使用 Docker 在 CentOS 系统上构建和运行 Nginx 镜像，以托管基于 NPM 的前端项目。我们采用了多阶段构建的方法，优化了镜像大小和构建过程。文章详细说明了 Dockerfile 的内容，包括构建和运行阶段，并提供了构建参数和 Nginx 配置的优化。最后，我们给出了构建和运行 Docker 容器的具体命令。

Dockerfile 内容

# 第一阶段：构建
FROM node:16.15.0 AS builder

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

ARG build_goal="build:test"
ARG build_tag="latest"

RUN npm run ${build_goal} && \
    echo "" >> dist/index.html

# 第二阶段：打包 & 运行
FROM nginx:1.21.6

WORKDIR /usr/share/nginx/html

RUN rm -rf ./*

COPY --from=builder /app/dist .

RUN sed -i '/index  index.html index.htm;/a \ \ \ \ \ \ \ \ try_files $uri $uri/ /index.html;' /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

优化解释

1. 多阶段构建：我采用了多阶段构建的方法，这样可以显著减少最终镜像的大小。在第一阶段，我们使用 Node.js 镜像来构建前端项目；在第二阶段，我们只将构建好的文件复制到 Nginx 镜像中。这种方式避免了将构建工具和依赖项包含在最终镜像中。

2. 缓存利用：我优化了 Docker 的缓存机制。通过先复制 package.json 和 package-lock.json 并运行 npm install，可以在这些文件没有变化的情况下重用之前的缓存层，大大加快了构建速度。

3. 构建参数：我使用了 ARG 指令来定义构建参数。这使得构建过程更加灵活，可以根据不同的需求来构建不同版本的镜像。

4. Nginx 配置：我修改了 Nginx 的默认配置，添加了 try_files 指令。这确保了单页应用程序可以正确地处理客户端路由，避免了刷新页面时出现 404 错误的问题。

构建和运行

要构建 Docker 镜像，我在项目根目录下运行以下命令：

docker build -t my-frontend-app .

构建完成后，我使用以下命令来运行容器：

docker run -d -p 80:80 my-frontend-app

这样，我的前端应用就会在 Docker 容器中运行，并通过 Nginx 服务器在 80 端口上提供服务。

通过这种方式，我成功地将我的 NPM 前端项目部署到了基于 CentOS 的 Docker 环境中，并使用 Nginx 作为 Web 服务器。这种部署方式不仅简化了部署过程，还提高了应用的可移植性和一致性。