vue前端怎么使用docker做镜像 vue容器化部署
  QTNn6Bg9NR7H 2023年11月25日 31 0


一、jenkins job配置

源码管理配置

vue前端怎么使用docker做镜像 vue容器化部署_vue前端怎么使用docker做镜像

构建触发器配置

vue前端怎么使用docker做镜像 vue容器化部署_远程服务器_02

构建环境配置

vue前端怎么使用docker做镜像 vue容器化部署_vue前端怎么使用docker做镜像_03

构建脚本配置

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

vue前端怎么使用docker做镜像 vue容器化部署_docker_04

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

二、阿里云容器服务使用

创建命名空间

vue前端怎么使用docker做镜像 vue容器化部署_触发器_05

创建镜像仓库

vue前端怎么使用docker做镜像 vue容器化部署_远程服务器_06


vue前端怎么使用docker做镜像 vue容器化部署_docker_07

jenkins webhook 触发配置
触发器创建

Generic Webhook Trigger 支持的命名触发 URL 格式是这样的:

http://jenkins 登录用户名:token 授权码 @jenkins IP:8080/generic-webhook-trigger/invoke?token=触发器名称

vue前端怎么使用docker做镜像 vue容器化部署_触发器_08

jenkins 登录名和 token 在"账号-设置-API Token-Show API Token…"里面

vue前端怎么使用docker做镜像 vue容器化部署_远程服务器_09


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

vue前端怎么使用docker做镜像 vue容器化部署_远程服务器_10


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

vue前端怎么使用docker做镜像 vue容器化部署_vue前端怎么使用docker做镜像_11

三、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/
代码变更自动构建镜像

配置代码仓库后,代码变更会自动构建镜像

这里测试使用手动触发,点击构建-构建规则设置-添加

vue前端怎么使用docker做镜像 vue容器化部署_远程服务器_12


点击立即构建

vue前端怎么使用docker做镜像 vue容器化部署_vue前端怎么使用docker做镜像_13


构建日志在下方可以查看

vue前端怎么使用docker做镜像 vue容器化部署_触发器_14


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

vue前端怎么使用docker做镜像 vue容器化部署_触发器_15

四、流程说明

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

触发webhook

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

vue前端怎么使用docker做镜像 vue容器化部署_docker_16


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

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

配置远程服务器链接

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

vue前端怎么使用docker做镜像 vue容器化部署_远程服务器_17


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

vue前端怎么使用docker做镜像 vue容器化部署_远程服务器_18

配置自动部署任务

把打包好的项目文件发布到远程服务器,选择“构建后操作步骤”—“Send build artifacts over SSH”

Name:第三步创建的远程服务器名称

Source files:本地需要传输过去的文件路径

Remove prefix:过滤掉的目录名

Remote directory:远程服务器的保存路径

Exec command:传输完成后在远程服务器执行的sh命令

vue前端怎么使用docker做镜像 vue容器化部署_vue前端怎么使用docker做镜像_19


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月25日 0

暂无评论

推荐阅读
  EjBjm8WvfVM8   2023年12月23日   31   0   0 ImagedockerDockerImage
  HJwyUgQ6jyHT   2024年05月31日   31   0   0 dockerwebhook
  zNRyot8onCGb   2024年05月31日   35   0   0 容器docker
  zNRyot8onCGb   2024年05月31日   29   0   0 容器docker