前端镜像部署和启动

项目简介

• 采用 docker 前端部署和启动

使用

启动准备

安装docker环境
1、运行项目下的 Dockerfile 文件，构建镜像。(命令在Dockerfile上层目录执行)
docker文件中包含的文件：

这个命令是在 Docker 中构建一个镜像，名称为 report-ui，标签为 1.0.0，使用位于当前目录下的 docker/Dockerfile 文件来构建。
执行命令：

  docker build -t report-ui:1.0.0 -f docker/Dockerfile .

(注意：report-ui:1.0.0 为 镜像名称 : 镜像版本号，可以自定义）

2、生成docker容器，并映射容器端口到主机端口。（后续挂载前端的配置文件，如后端地址等，弃用nginx转发）

执行命令：

docker run -d \
          --restart=always \
          --name "front" \
          --add-host=host.docker.internal:host-gateway \
          -p "9999:80"  \
          -v "/opt/cx/report/nginx/default.conf:/etc/nginx/conf.d/default.conf" \ #挂载配置
          -v "/opt/cx/report/log:/var/log/nginx" \ #挂载log日志
          report-ui:1.0.0

(注意：这个命令是在 Docker 中运行一个容器，具体解释如下：

• docker run: 运行 Docker 容器的命令。
• -d: 在后台（detached mode）运行容器。
• –restart=always: 指定容器停止后总是重新启动。
• –name “front”: 为容器指定一个名称为 “front”。
• –add-host=host.docker.internal:host-gateway: 将 host.docker.internal 映射到宿主机的网关地址。这对于容器内部需要访问宿主机的服务时非常有用。
• -p “9999:80”: 将容器的 80 端口映射到主机的 9999 端口，允许通过主机的 9999 端口访问容器内的服务。
• -v “/opt/cx/report/nginx/default.conf:/etc/nginx/conf.d/default.conf”:
  将主机上的 /opt/cx/report/nginx/default.conf 文件挂载到容器内的
  /etc/nginx/conf.d/default.conf 文件，这样可以通过挂载的方式提供自定义的 Nginx 配置。
• -v “/opt/cx/report/log:/var/log/nginx”: 将主机上的 /opt/cx/report/log 目录挂载到容器内的 /var/log/nginx 目录，用于存储 Nginx 的日志文件。
• report-ui:1.0.0: 指定要运行的容器镜像名称及标签。 ）

修改后端接口地址 IP/域名

1. 进入docker运行后，进入容器

   命令： docker exec -it report-ui /bin/sh

2. 根据路径找到配置文件

   命令： cd /etc/nginx/conf.d

3. 修改 proxy_pass 后的地址为自定义后端接口地址

   命令： vi default.conf

4. 重新运行容器

   命令： docker restart report-ui

前端自定义修改（修改挂载目录中的配置文件nginx.conf）

1、修改前端容器映射端口：UI_PORT=9999（自定义），
后端容器映射端口API_PORT =9009（自定义），同时修改前端nginx.conf中后端接口转发的端口号

例如 ：将API_PORT 设置为 9010，再将nginx.conf中的proxy_pass
http://host.docker.internal:9009/api/report/v1;
修改为：proxy_pass http://host.docker.internal:9010/api/report/v1;

2、修改后端项目的地址（若前后端没有部署在同服务器中）修改前端nginx.conf中后端接口转发的地址为正确的IP或域名

例如 ：将nginx.conf中的代理地址proxy_pass http://host.docker.internal:9009/api/report/v1;
    修改为：proxy_pass http://10.5.32.88:9009/api/report/v1;

修改后重启docker容器

导出导入镜像

1. 导入镜像

   命令： docker save -o <输出文件名>.tar <镜像名>

   例如：docker save -o my_image.tar my_image

2. 导出镜像

   命令： docker load -i <输入文件名>.tar

   例如：docker load -i my_image.tar

Dockerfile命令脚本

FROM node:16-alpine as build-stage

# 设置工作目录
WORKDIR /app

# 复制 package.json 到工作目录
COPY ../package.json ./

#  安装 pnpm，并设置 registry 地址
RUN npm install -g pnpm@7 \
     && npm config set registry https://registry.npmmirror.com

# 安装项目依赖
RUN pnpm install

COPY . .

#  运行构建命令
RUN pnpm run build

## -- stage: dist => nginx --
FROM nginx:alpine

ENV TZ=Asia/Shanghai

COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /app/dist /usr/share/nginx/html

Dockerfile 文件是用于构建一个前端项目的 Docker 镜像。它分为两个阶段：

1. 第一个阶段（build-stage）使用了 Node.js 16 的 Alpine 版本作为基础镜像，用于构建前端项目。
2. 第二个阶段使用了 Nginx 的 Alpine 版本作为基础镜像，用于托管前端项目的静态文件。 下面是每个阶段的具体操作：

第一个阶段 (build-stage)

• FROM node:16-alpine as build-stage：使用 Node.js 16 的 Alpine 版本作为构建阶段的基础镜像，并命名为 build-stage。
• WORKDIR /app：设置工作目录为 /app。
• COPY …/package.json ./：复制项目根目录下的 package.json 文件到工作目录。
• RUN npm install -g pnpm@7 \ && npm config set registry https://registry.npmmirror.com：安装 pnpm 包管理工具，并设置 registry 地址为
  https://registry.npmmirror.com 以加速安装依赖。
• RUN pnpm install：安装项目的依赖。
• COPY . .：将项目的所有文件复制到工作目录。
• RUN pnpm run build：运行构建命令，这里假设项目中的 package.json 文件中配置了一个名为 build 的脚本来构建项目。

第二个阶段 (Nginx)

• FROM nginx:alpine：使用 Nginx 的 Alpine 版本作为托管静态文件的基础镜像。
• ENV TZ=Asia/Shanghai：设置时区为亚洲/上海。
• COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf：将项目中的 Nginx 配置文件 nginx.conf 复制到 Nginx 的默认配置目录。
• COPY --from=build-stage /app/dist /usr/share/nginx/html：从第一个阶段（build-stage）的构建结果中拷贝生成的静态文件到 Nginx
  的默认静态文件目录。