大前端之路 —— 使用 docker + Jenkins + nginx进行web自动化部署

前段时间无意间翻看某个大神的QQ个人说明,有句话突然点醒了迷途中的我 —— 知道 + 做到 = 得到。这句话在我当下的状况显得特别的符合语境,学习某个知识或者解决某个问题的时候,习惯性的总是通过大量的搜索来扩展自己的知识面,但是我发现,能够搜出来百分之50以上的东西,知识的重复性非常的大,因此萌生了做一些专题的知识性总结。这篇文章的目的是搭建前端项目的自动化部署,其中涉及到 docker 的安装部署,jenkins 和 nginx的相关配置。其中个人学习用来学习的成本大概是100块左右(服务器+域名)

目录

服务器环境

docker安装

Jenkins安装

Jenkins前端自动化构建配置

Jenkins插件安装

Jenkins插件配置

构建前端项目

创建自动化部署任务

nginx配置


服务器环境

服务器:腾讯云主机(1 核 1 GB 1 Mbps) Ubuntu 16.04.1,域名:hookyun.cn,远程连接工具:mobaxterm

服务器已有环境:nodejs v10.14.1,npm 6.5.0,nginx:1.10.3

docker安装

参考教程:docker安装

在安装前务必要检查下系统是否已经装了docker,可以使用 docker version 进行检查,安装成功会有如下相关信息:

如果在安装的过程中出现了 Warning: the "docker" command appears to already exist on this system 的失败信息,则表示系统可能已经安装了docker。

以下docker相关命令接下来可能会涉及:  

//查看所有的docker容器:
    docker container ls -a
//终止容器:
    docker container stop
//启动容器:
    docker container start
//重启容器:
    docker container restart
//删除容器:
    docker container rm

Jenkins安装

1、拉取docker jenkins镜像

docker pull jenkins:latest

2、配置jenkins相关目录,并给予对应的权限

mkdir -p /var/jenkins_home
chown -R 1000  /var/jenkins_home

实践中考虑在哪个目录下新建配置目录,可以参考Linux的目录结构

3、启动docker 
-d 代表后台运行 -p 指的是映射容器端口与服务器端口 --name 指对镜像所自定义的名称 ,-v 指的是自定义配置jenkins目录,最后的参数jenkins指的是使用的是本地的jenkins镜像

docker run -d -p 49002:8080 --name myjenkins -v /var/jenkins_home:/var/jenkins_home jenkins

启动成功后可以 docker container ls -a 来查看jenkins的状态,同时在对应的配置目录下可以看到很多生成的文件

4、初始化Jenkins

浏览器访问 http://94.191.33.76:49002,会出现如下界面,根据提示,到对应的目录下/var/jenkins_home/secrets/initialAdminPassword找到秘钥后在输入框内输入 

5、选择第一个安装配置

进入安装界面,这里需要等待比较久,实际安装过程中,可能是网络比较慢的原因,出现部分插件安装失败,不要慌,这里暂时忽略,因为不影响后续的流程。

6、配置Jenkins的admin用户

至此,Jenkins已经安装完毕,接下来就是前端自动化部署的相关配置操作了。

Jenkins前端自动化构建配置

在一般的前端开发流程中,我们先在本地完成前端项目的开发工作,接着将编译 (npm run build )好后的(dist)文件通过远程传输工具(mobaxterm)传输到服务器上,同时我们将本地的代码push到git上,在这样的流程中,都是通过人工(命令行)的方式去执行,这样流程每次都会有一些重复性 (编译 部署) 的东西,因此我们可以通过配置jenkins的相关插件,从而构建这样一套自动化部署流程,简化开发流程。一般的流程中,我们会有两台服务器,一台是进行自动化构建的Jenkins服务器,另外一台式用于存放项目的正式服务器。在此次实践中,我只用了同一台服务器同时作为构建以及正式服的发布用。

Jenkins插件安装

安装 Publish Over SSH Git plugin NodeJS Plugin

1、首页,点击系统管理 —> 管理插件

2、可选插件 —> 右上角过滤SSH —> 选择 Publish Over SSH —>  点击 直接安装

3、同理 Git plugin 和 NodeJS Plugin 都是相同的安装步骤,安装完毕后可以在已安装列表中看到对应的插件

Jenkins插件配置

1、配置 Publish Over SSH 

点击 —> 系统管理 —> 系统设置,找到 Publish over SSH

  • Passphrase: 密码(目标机器的密码)

  • Path to key:key文件(私钥)的路径

  • SSH Server Name: 服务器标识名字

  • Hostname: 需要连接ssh的主机名或ip地址,此处填写应用服务器IP(建议ip)

  • Username: 用户名

  • Remote Directory: 远程目录(要发布的目录)

这里可以采用秘钥的形式,也可以直接输入目标机器密码的形式进行连接,这里采用直接输入密码的形式(比较简单方便)

2、配置nodejs版本

点击 —> 系统管理 —> Global Tool Configuration,找到 NodeJS 配置 ,这里安装了 11.6.0和 10.14.0 两个版本(根据项目自行调整),保存配置。

构建前端项目

这里选择vue-cli 搭建一个helloworld 的前端项目,目录结构如下:

前端界面如下:

 

创建自动化部署任务

1、点击左侧 — 新建

2、源码管理

这里我们通过vue-cli构建一个项目,并传到码云上,由于是私有项目,所以我们要添加一下Git账号

3、配置构建环境,选择node版本

4、配置构建脚本

rm -rf dist 移除原有dist文件 ,npm run build 执行编译命令,tar -zcvf dist.tar.gz * 压缩编译后的文件。

需要注意的是,我这里没有加入npm install 的执行操作,因为我的Linux主机本来配置就非常低,加入npm install的话会导致整个Linux主机直接陷入卡死,我在第一次实践的时候尝试加入了npm install的操作,结果整个机器卡死,最后只能重启机器来进行恢复。所以这里我通过mobaxterm远程连接服务器后,找到对应的目录,进行包的安装

cd /var/jenkins_home/workspace/helloworld/
npm install

 5、配置构建后操作

这里需要注意Remote directory的配置,传输后文件的路径是由这里的Remote directory和系统配置里Publish over SSH 配置中的Remote directory构成的,假设你在前面的Publish over SSH中配置了Remote directory为/var/www/test,而在这里配置为/home/ubuntu/workspace/,那么最终的传输路径将会是/var/www/test/home/ubuntu/workspace/。完成后点击保存,接下来就可以构建我们的项目了。

 6、执行构建操作

点击立即构建,等待一会,不出意外的话,项目构建成功,我们可以通过观察 Console Output 来观察项目的执行过程。

构建成功后的结构多了一个dist目录,至此,web自动化构建的实践便宣告完成了。

同时,我们通过mobaxterm远程连接到服务器后,可以通过/var/jenkins_home/workspace/helloworld 目录看到jenkins帮我们拉取的源项目文件,通过 /home/ubuntu/workspace/helloworld 目录看到我们发布好的编译文件

 

7、构建失败demo分析

上面算的构建过程算是比较顺利的,然后我在实际的操作中,失败的例子也不少,以下是一些失败的构建例子。

a、失败demo1 —— 权限不足

解决办法:

chmod -R 777 /var/jenkins_home/workspace

b、失败demo2 —— node版本错误

解决方法:更换合适的版本

总的来说,我们可以通过Console Output 中的打印信息来寻找错误原因从而找到解决办法。

nginx配置

这一步是可根据个人喜好来做,目的是将通过域名访问到Jenkins的构建页面。上面的过程我们已经可以通过http://94.191.33.76:49002 访问到Jenkins页面,接下来我们修改相关配置,从而通过 http://jenkins.hookyun.cn 访问到我们的Jenkins页面。

1、子域名配置

在域名供应商那里增加一个子域名,我这里在腾讯云增加了一条解析记录

 

2、配置nginx 

3、重启nginx,完成配置

nginx -s reload

4、浏览器访问 jenkins.hookyun.cn

 

 

发布了5 篇原创文章 · 获赞 6 · 访问量 2810
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览