前端通过jenkins和docker打包部署流程

通过jenkins实现镜像打包和上传

1.在jenkins上创建流水线任务

点击新建任务

填写任务名称 选多分支流水线

增加分支源 选git

添加并选择凭据（有项目权限的git账号密码）

填写分支的正则表达式，多分支使用^(分支名|分支名)$

保存

2.项目根目录创建Jenkinsfile文件：如下更改

1.分支名称的正则表达式
2.下方token字段 按项目的名称起token也行 需要任务唯一值
3.nodejs的版本根据项目的nodejs版本更改版本

安装依赖并打包 根据项目结构和静态资源打包命令适配
制作docker镜像 根据项目结构和项目经理和开发经理的要求 更改镜像的名称和版本号

pipeline {agent anytriggers {GenericTrigger (causeString: 'Triggered by $ref',genericVariables: [[key: 'ref', value: '$.ref']],printContributedVariables: true,printPostContent: true,regexpFilterExpression: '^refs/heads/(分支名)$',regexpFilterText: '$ref',token: 'token值')}stages {stage('下载并安装nodejs版本') {steps {sh 'rm -rf /usr/lib/node_modules/npm/'dir('/root/.cache/downloads') {sh 'wget -nc "https://nodejs.org/dist/v16.14.0/node-v版本号-linux-x64.tar.xz" -O node-v版本号-linux-x64.tar.xz | true'sh 'tar -xf node-v版本号-linux-x64.tar.xz -C /usr --strip-components 1'}// sh 'npm install yarn -g'    // 用yarn装依赖时使用}}stage('安装依赖并打包') {steps {sh 'npm install --registry https://registry.npmmirror.com'sh 'cd packages/文件名/ && 打包命令'echo '打包成功'}}stage('制作docker镜像后上传镜像仓库') {steps {sh 'cd packages/文件名/ && docker build -t 镜像仓库地址/镜像名:版本号 -f Dockerfile .'echo '制作镜像成功'sh 'docker push 镜像仓库地址/镜像名:版本号'echo '上传成功'}}stage('删除上一版本的同名镜像') {steps {sh '/root/jenkins/clean.sh'}}}
}

3. 项目主结构里创建Dockerfile文件

根据打包后的静态资源目录名称更改下面的路径名称

FROM 镜像仓库地址/nginx镜像名:版本号
COPY 文件名/ /usr/share/nginx/html/文件名/
RUN chown -R nginx:nginx /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
RUN echo 'echo init ok!!'

4.创建nginx.conf文件

根据静态资源目录和路由文件的配置的baseUrl 配置前端访问路径

#user  nobody;
worker_processes  1;  # 工作进程的数量#error_log  logs/error.log  notice;
#pid        logs/nginx.pid;events {worker_connections  1024; # 每个工作进程连接数
}http {include       mime.types;default_type  application/octet-stream;# 日志格式# log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '#                   '$status $body_bytes_sent "$http_referer" '#                  '"$http_user_agent" "$http_x_forwarded_for"';# access_log  logs/access.log  main; # 日志输出目录sendfile        on;#tcp_nopush     on;keepalive_timeout  65; # 链接超时时间，自动断开gzip  on; # 开启gzip 压缩优化加载速度server {listen       7002;server_name  localhost;location / { # 静态资源转发root   html;index  index.html index.htm; # 入口文件try_files $uri $uri/ /文件名/index.html;}  # location /api/ { # 接口转发，通过反向代理实现跨域# proxy_pass 接口地址;# proxy_set_header  Host  $host; # 传递域名# proxy_set_header  X-Real-IP  $remote_addr;  # 传递ip# proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;# } }
}

5.设置push和合并代码自动触发流水线 需要在gitlab上配置webhook

token为jenkinsfile里填写的token字段

点击保存，测试推送事件，显示200则完成，若显示404，需要找后端重启一下jenkins

6.服务器版本发布，前端镜像起服务 8048 外部端口 80 内部端口

 docker run --name 镜像名 -d -p 8048:80 --restart=always --label=com.centurylinklabs.watchtower.enable=true //没有这句话先重启，再删掉镜像服务，再手动执行命令运行
镜像仓库地址/镜像名:版本号

通过本地实现镜像打包和导出

项目主结构里创建storage_conservation_build.sh文件

# 设置变量
IMAGE_NAME="jcn-web-test"         # 镜像名称
IMAGE_TAG="1.0.0"            # 镜像标签
EXPORT_PATH="./jcn-web-test.tar" # 导出路径和文件名
PUTH_NAME="coding" # 导出路径和文件名# 执行 Docker 构建
# docker rmi "$IMAGE_NAME"
docker build -t "$IMAGE_NAME:$IMAGE_TAG" .
# docker buildx build -t "$IMAGE_NAME:$IMAGE_TAG" --platform=linux/arm64 -o type=docker .
#删除没有名字的镜像
docker image prune -f # docker push "$IMAGE_NAME:$IMAGE_TAG"
# echo "镜像已push到 $PUTH_NAME"
# 导出镜像为 tar 文件
docker save "$IMAGE_NAME:$IMAGE_TAG" -o "$EXPORT_PATH"echo "镜像已导出到 $EXPORT_PATH"

在package.json文件中增加命令

"docker_build": "./storage_conservation_build.sh",
"no_auto_build": "打包命令 && npm run docker_build"