背景
博客系统开发完成后,开始迭代阶段。每次发布更新都是重复打包,上传代码,构建,启动服务。 如此重复的任务是可以流程化的。
尝试把流程整合,做到一键发布,就有了这一系列的文章 Jenkins-GitHub自动化部署博客系统后端vue项目 Jenkins-GitHub自动化部署博客系统后端SpringBoot项目 Jenkins启动与关闭
这一篇是门户篇,也是终章。
前置条件
node git java vue-cli docker nginx jenkins
这些都是需要按照上面几篇文章一步一来。 只需要简单复制粘贴命令,或者做小改动,就能做出来的。
Jenkins新建任务
进入项目描述和git代码地址输入
我的项目是github托管的私有项目,共有项目也是可以的。
源码管理
输入GitHub地址,和选择账户密码配置之后,可能会显示无法访问。耐心等待。
或者你可以和我一样,尝试清空地址,然后再粘贴一次,再等待。
我开始以为无法访问,一直是红色提示错误,其实不是,可能是网络问题。多清空几次再粘贴进去,就会好了。
保存项目。初步设置完成了。我们先构建一次,看看能不能把GitHub的项目拉取到服务器中。
我们点击立即构建,尝试第一次运行任务。
任务开始了,我们可以点击这个#1任务,进入输出控制台看具体运行情况
点击控制台输出
这时候我们看到git执行拉取代码中。由于网络不太好,拉取的速度比较慢,耐心等待。
以下是拉取完成的日志。
也就是成功拉取了代码到服务器了,而且还显示了最后一条commit信息。
回到首页之后,我们看看这一次任务的运行时间。第一次拉取代码需要很长的时候,如果你是自己建立gitlab,拉取自己服务器的代码速度会很快的。
之前说过,我自己的服务器无法搭建gitlab(它运行就需要4gb内存起步)只能用GitHub托管代码。如果你有兴趣,也可以用国内的gitee仓库试试。
查看我们job工作目录中刚刚拉取的代码
我的工作目录在
/root/.jenkins/workspace
进入目录看看情况
到此,我们拉取代码成功了。接下来,就是编译我们nuxt镜像和启动了
构建镜像与启动
直接构建。
前置条件
主机已经具备node:10.15.3,npm正常使用。前面部署vue的时候,我已经准备好node环境。如果你还没有环境,请移步看看如何配置
https://www.sunofbeach.net/a/1359477549431869440
项目根目录中,我已经编写好了构建文件
docker file
查看具体内容:Dockerfile
#node,版本自己查看上面的链接
FROM node:10.15.3
#2、作者
MAINTAINER moonlightshadow.cn
#3、参数,node的环境为生产环境
ENV NODE_ENV=production
#4、任意ip
ENV HOST 0.0.0.0
#5、容器内创建目录sob-blog-nuxt
RUN mkdir -p /sobBlogNuxt
#6、复制当前的内容到容器内容部目录blog
COPY . /sobBlogNuxt
#7、切换工作目录到blog
WORKDIR /sobBlogNuxt
#8、暴露端口3000,默认端口
EXPOSE 3000
#9、配置npm的远程仓库
RUN npm install cnpm -g --registry=https://registry.npm.taobao.org
#10、清除缓存
RUN cnpm cache clean --force
#11、安装依赖
RUN cnpm install --no-package-lock
#12、构建,生成dist文件
RUN cnpm run build
#13、start
CMD ["npm","start"]
启动镜像的文件:docker-compose.yml
version: '2.1'
services:
nuxt:
restart: always
image: sob-blog-nuxt
container_name: sob-blog-nuxt
ports:
- 3000:3000
这2文件都是当前项目根目录下。我们切换到这里。尝试构建。
提交了构建文件,我们执行一次job。拉取最新的代码。
构建镜像
(因为镜像名字写死的,会覆盖前一次构建)后面可以自己修改脚本,每次构建版本不同,然后修改file里面的container name就行了。
//yml中的container_name:必须和下面构建的时候名字一致。
docker build -t sob-blog-nuxt .
//构建需要时间特别是第一次。下载各种依赖。
构建完成。查看我们镜像。
停止旧版本,启动新版本。
我们修改一次代码,整一点可以识别的,来区别是否成功了。
修改我们的首页的名字
原来的名字是这样的:
提交我们的代码,执行一次任务。
再构建一次
//yml中的container_name:必须和下面构建的时候名字一致。
docker build -t sob-blog-nuxt .
//构建需要时间特别是第一次。下载各种依赖。
启动新镜像
docker stop sob-blog-nuxt
docker rm sob-blog-nuxt
docker-compose up -d
访问我们的地址
http://moonlightshadow.cn/
成功修改了。
上面这个流程是我们直接在服务器中操作的。我们把这个流程,放到一个脚本中执行。
编写脚本放在项目根目录下。名字:build_nuxt.sh
#!/bin/bash -ilex
echo "--------blog system build------->"
pwd
whoami
#构建
docker build -t sob-blog-nuxt .
echo "启动新镜像{目前就暂定写死}"
docker stop sob-blog-nuxt
docker rm sob-blog-nuxt
docker-compose up -d
配置Jenkins构建
配置之后,我们把sh提交到master,成功之后,我们点击立即构建。
成功部署了?我们去看看网站情况
配置GitHub构建触发器
配置GitHub通知Jenkins
和之前我们配置java和vue项目一样,到GitHub中,设置Jenkins的地址。
配置你自己Jenkins的访问入口。然后后面增加/github-webhook/
http://0.0.19.172:8080/jenkins/github-webhook/
保存之后,我们在提交一次代码,把之前多余的02移除。
如果你遇到这个情况,那就是网络不行,访问不了,很大可能是网络问题。先到这里,过一段时间再试试。 正常情况下,如果公司项目会有自己的gitlab或者其他国内的仓库做版本管理。网络问题自然不会出现了。
过一段时间之后再构建。
整个博客门户部署完成了
End
- vue的项目,就先安装好需要的环境,本地尝试构建 -> 组合脚本
- nuxt一样的
- spring boot就是需要maven环境
总的下来,你的项目需要什么环境构建,就给他需要的环境。 看到有童鞋说Android的打包也来一套。哈哈,如果你看完这文章,应该知道如何处理Android的打包了。 但是,Android的打包更苛刻,平时我们电脑打包已经够呛的了。你可能需要一个8gb内存的服务器。
Android环境和平时电脑一样的。gradle,java,Android sdk。
剩下的都是体力活了。
这是一个简单的部署nuxt项目的例子。也就是整个系列完了 这些步骤还有很多可以优化的地方,就等着自己挖掘了,如果我发现了新的更优雅的,也会更新 如果对你有帮助,一键三连~
再会~