开箱即用的自动构建部署Vue镜像-下篇

·  阅读 553

前言

本文章基于镜像 xmolan/ubuntu:0.2 ,所有设置兼容 xmolan/ubuntu:0.1 ,想要了解本镜像的相关信息,请浏览 一个不熟悉Docker的前端,做了一个Vue自动化部署镜像上一章 。上一章,我讲解了如何配置本镜像的Jenkins设置并安装配置了Gitee插件。本章讲述如何结合 Gitee 正式开始自动构建一个 Vue 项目。

本镜像持续更新,详情请关注 docker-hub

0.1和0.2 版本存在bug,现已废弃,请下载0.3版本,即docker pull xmolan/ubuntu:0.3,使用详情请关注上方的docker-hub链接。

正文

新建项目和仓库

利用 @vue/clivue create frontend 了一个项目,然后在 gitee 上创建了一个仓库,将这个项目上传到了 giteeGitee地址

frontend 文件夹里的内容:

新建 jenkins 任务

打开 jenkins 管理页面的新建任务,选择自由风格。

配置任务

找到 源码管理 -> Git 。

URL 部分 输入你的项目git地址。

Credentials 部分创建一个你的用户名密码凭证

触发构建器选择 Gitee webHook

生成 WebHook 密码

在 Gitee 项目中添加一个 WebHook

输入在 Jenkins 中提示你输入的 Post URL 和 密码。

构建命令执行 shell ,你可以参照我的输入。

cd frontend
sudo npm run build || (sudo npm install && sudo npm run build)
sudo rm -rf /var/www/html/*
sudo mv -f dist/* /var/www/html
复制代码

应用、保存。

尝试第一次构建

失败了,不用担心,点击检查错误。

我的错误提示是

sh: 1: node: Permission denied
复制代码

如果你也遇到同样的错误,请在服务器中输入

docker exec -it vue-deploy-1 bash
su jenkins
npm config set user 0
npm config set unsafe-perm true
exit
exit
复制代码

然后再次构建

拿下。

测试push是否能触发自动构建

拿下

查看网页

小结

这个教程通过教导你使用 jenkins+gitee 来帮助你使用我的镜像 xmolan/ubuntu

在这个镜像中,我默认帮你配置了nginx Gzip压缩缓存 ,大大减少了你配置花费的多余时间。

如果你从这篇文章中获得了一些启发,还请点赞。如果有任何疑问,请在评论下方留言,我会尽快回复。

本镜像持续更新,详情请关注 docker-hub

分类:
前端
标签: