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

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

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

点击新建任务

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

增加分支源 选git

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

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

保存

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

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

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

pipeline {
	agent any
	triggers {
		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"