前端通过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 nginx;
# 工作进程的数量
worker_processes auto;
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;
events {worker_connections 1024; # 每个工作进程连接数
}
http {include /etc/nginx/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 /var/log/nginx/access.log main; # 日志输出目录sendfile on;#tcp_nopush on;# 链接超时时间，自动断开keepalive_timeout 65;gzip on; # 开启gzip 压缩优化加载速度server {listen 21015;//端口号server_name localhost; # 浏览器访问域名# root html;# 路由location /文件名 { # 静态资源转发alias /usr/share/nginx/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;# } }# 引入其他的配置文件include /etc/nginx/conf.d/*.conf;
}
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"