一、jenkins job配置

源码管理配置

构建触发器配置

构建环境配置

构建脚本配置

jenkins从阿里云容器服务的仓库拉取镜像，然后自动部署

docker stop aliyun-vue-test
docker rm aliyun-vue-test
docker login --username=271177385@qq.com registry.cn-hangzhou.aliyuncs.com --password=!@#123qwe
docker pull registry.cn-hangzhou.aliyuncs.com/rstar/lvyequan_test:1.0
#docker run --restart=always --name aliyun-vue-test -p 8002:80 registry.cn-hangzhou.aliyuncs.com/rstar/lvyequan_test:1.0
docker run -d --name aliyun-vue-test -p 8002:80 registry.cn-hangzhou.aliyuncs.com/rstar/lvyequan_test:1.0

二、阿里云容器服务使用

创建命名空间

创建镜像仓库

jenkins webhook 触发配置

触发器创建

Generic Webhook Trigger 支持的命名触发 URL 格式是这样的:
http://jenkins 登录用户名:token 授权码 @jenkins IP:8080/generic-webhook-trigger/invoke?token=触发器名称
jenkins 登录名和 token 在"账号-设置-API Token-Show API Token…"里面

最后一个 token 参数其实就是"构建触发器"中"触发远程构建"的参数,建议使用 job 名字

最后我们还需要在 jenkins 全局安全设置中取消勾选“防止跨站点请求伪造（ Prevent Cross Site Request Forgery exploits)"选项,这样阿里云 webhook 才能过得来

三、Dockerfile文件编译打包docker镜像

Dockerfile文件

FROM node:alpine as build-stage
#FROM node:10.16.3-alpine as build-stage
# RUN npm install -g http-server
WORKDIR /app
COPY package*.json ./
RUN npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
RUN npm config set registry https://registry.npm.taobao.org
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
RUN npm install
COPY . .
RUN npm run build:prod
# EXPOSE 8080
# CMD [ "http-server", "dist" ]

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

代码变更自动构建镜像

配置代码仓库后，代码变更会自动构建镜像
这里测试使用手动触发，点击构建-构建规则设置-添加

点击立即构建

构建日志在下方可以查看

点击镜像版本可以查看到构建成功的镜像

四、流程说明

流程：git 仓库代码变化 ->阿里云容器构建服务启动 -> 构建好镜像之后触发 webhook -> jenkins 收到阿里云的 webhook 之后触发 job 执行部署脚本 ->部署脚本使用阿里云镜像 run 起来 ->完成.

触发webhook

手动在浏览器中访问一下 http://jenkins 登录用户名:token 授权码 @jenkins IP:8080/generic-webhook-trigger/invoke?token=触发器名称 如果对应的 jenkins Job 能正常开始执行,说明整个流程已经 ok 了.

可以在触发器-访问记录中查看到访问详情

五、vue项目构建打包完成后发布到远程服务器

配置远程服务器链接

打开“系统管理”–“系统设置” 找到 “Publish over SSH”，如果是帐号密码登录的Passphrase填写密码Username填写用户名，path to key 为空就可以了

点击 Test Configuration 按钮测试连接是否成功

配置自动部署任务

把打包好的项目文件发布到远程服务器，选择“构建后操作步骤”—“Send build artifacts over SSH”
Name：第三步创建的远程服务器名称
Source files：本地需要传输过去的文件路径
Remove prefix：过滤掉的目录名
Remote directory：远程服务器的保存路径
Exec command：传输完成后在远程服务器执行的sh命令