目的：
1.利用Jenkins，在前端代码提交代码到远程git仓库后，在jenkins所在的服务器自动构建docker镜像，并运行容器。
2.所需资源：
- 一台Ubuntu PC 装 Jenkins Docker
- 远端Git仓库 github gitee 均可
- 一个Vue前端项目
大致流程：
Jenkins + Docker + Nginx
1.Jenkins
1.安装Jenkins
1.下载Jenkins的war包
清华源 Jenkins 2.298下载地址
2.下载tomcat包
下载Tomcat9地址
2.启动tomcat
tomcat压缩包，解压后，将下载的jenkins.war拷贝到 Tomcat/webapps下，并将webapps的其他文件全部删除。 启动tomcat在终端执行：
bin/startup.sh
在logs/catalina.out中查看启动日志。
注意：在日志中有jenkins默认生成的登录密码，要在启动jenkins后输入。所以我们先把这串随机密码复制下载：edf8911d8dca42e88ed67e00d9af3816
*************************************************************
*************************************************************
*************************************************************
Jenkins initial setup is required. An admin user has been created and a password generated.
Please use the following password to proceed to installation:
edf8911d8dca42e88ed67e00d9af3816
This may also be found at: /home/fanyao/.jenkins/secrets/initialAdminPassword
*************************************************************
*************************************************************
*************************************************************
浏览器访问：localhost:8080/jenkins
输入刚才复制的初始密码 edf8911d8dca42e88ed67e00d9af3816
选择安装推荐插件
进入主界面
3.替换国内源
由于jenkins默认的插件源地址，网络原因，我们将地址替换为国内源（清华源）。
在Manage Jenkins ==> Manage Plugins ==> Advance ==> 最下方的升级站点
替换为https://mirror.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json
再点击提交，再点击立即获取即可
4.安装必要的插件
Blue Ocean 可视化流水线工具 NodeJS 用于npm打包前端项目 Publish Over SSH 用于jenkins 远程登录其他服务器
5.配置全局配置
在Manage Jenkins ==> Global Tool Configuration
Git
image-20210618131519353 JDK
image-20210618131400300 MAVEN
image-20210618131430801 NodeJS
image-20210618131458067 这些全部配置为当前电脑上的具体路径，所以要求在这之前当前电脑已安装了JDK MAVEN NodeJS等
2.准备前端项目
我们使用Vue-Cli 来构建一个初始程序
安装Vue-Cli,在终端执行
npm install -g @vue/cli @vue/cli-service-global
# or
yarn global add @vue/cli @vue/cli-service-global创建Hello-World程序
vue create hello-world启动程序
cd hello-world
npm run serve测试访问是否成功,出现如下画面
image-20210618130932913 项目准备好build后，进入生成的dist文件夹，浏览器打开index.html,没问题
npm run build
3.安装docker
# 更换国内软件源（略）
# 安装所需要的包
sudo apt install apt-transport-https ca-certificates software-properties-common curl
# 添加 GPG 密钥，并添加 Docker-ce 软件源，这里中国科技大学的 Docker-ce 源
curl -fsSL https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu \
$(lsb_release -cs) stable"
# 添加成功后更新软件包缓存
sudo apt update
# 安装 Docker-ce
sudo apt install docker-ce
# 设置开机自启动并启动 Docker-ce（安装成功后默认已设置并启动，可忽略）
sudo systemctl enable docker
sudo systemctl start docker
# 测试运行
sudo docker run hello-world
# 添加当前用户到 docker 用户组，可以不用 sudo 运行 docker（可选）
sudo groupadd docker
sudo usermod -aG docker $USER
# 测试添加用户组
docker run hello-world
4.在项目中构建dockerfile
项目目录：
1.添加Dockerfile
引用nginx镜像 ，暴露 80端口
FROM nginx
EXPOSE 80
2.添加.dockerignore,用于忽略其他文件
**/node_modules
**/dist
5.项目中添加nginx.conf
user root;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
6.提交到GitHub上
https://github.com/PittYao/vuedocker
7.设置Jenkins
7.1创建自由风格项目
7.2配置
7.2.1添加 git配置
7.2.2添加 node配置
因为要编译前端需要node环境
7.3 构建执行脚本
7.3.1 编译项目
选择增加构建步骤按钮：
写构建脚本
#!/bin/bash
echo $PATH
node -v
npm -v
cnpm -v
cnpm install
cnpm i vue-loader-v16
npm run build
echo "=============编译完成=========="
7.3.2 构建为docker镜像并运行
构建docker镜像并运行的脚本
#!/bin/bash
docker stop vuenginxapp || true \
&& docker rm vuenginxapp || true \
&& cd /home/fanyao/.jenkins/workspace/vuedocker \
&& docker build -t vuenginxapp . \
&& docker run -d -p 8083:80 --name vuenginxapp -v /home/fanyao/.jenkins/workspace/vuedocker/dist:/usr/share/nginx/html -v /home/fanyao/.jenkins/workspace/vuedocker/nginx.conf:/etc/nginx/nginx.conf vuenginxapp
注意: 其中的 /home/fanyao/.jenkins/workspace/vuedocker 为jenkins的workspace路径。需根据自己安装的jenkins来修改为自己电脑的jenkins的工作路径。
如何看自己电脑的jenkins的工作路径？
不要7.3.2的一步，直接构建程序，在控制台会输出Jenkins的工作路径
脚本具体意义：
停止、删除之前运行的镜像 进入到Jenkins工作路径，用Dockerfile构建镜像 启动刚刚构建的镜像 挂载workspace中的dist到容器中nginx的/usr/share/nginx/html中 挂载workspace中的nginx.conf到容器中nginx的默认配置路径 /etc/nginx/nginx.conf 8083代理了容器里的80端口
7.3.3 可能会遇到的问题
7.3.3.1 执行docker报错
控制台输出：
dial unix /var/run/docker.sock: connect: permission denied
方案一：只要docker服务重启，就需要重新设置一次。
# 修改docker权限
cd /var/run
sudo chmod 666 docker.sock
#重启docker
service docker restart
第二种：只需要操作一次
#添加docker用户组
groupadd docker
#把当前用户加入docker用户组
gpasswd -a ${USER} docker
#查看是否添加成功
cat /etc/group | grep ^docker
#重启docker
service docker restart
#更新用户组
newgrp docker
7.3.3.2 npm build报错
控制台输出：
Error: Cannot find module ‘vue-loader-v16/package.json‘
由于vue3，构建项目没有使用vite，而是通过vue cli来构建。vue cli 搭建vue3项目跟以前vue2差不多，但需要把vue cli升级为最新版本。
升级npm
npm i -g npm
使用cnpm的也要升级一下cnpm
cnpm i -g cnpm
重新安装node_modules依赖包
rm -rf node_modules // 先删除原来的依赖包
cnpm i // 重新安装
重新下载
cnpm i -D vue-loader-v16
7.3.4 测试访问
访问 localhost:8083,见到如下画面则成功
7.3.5 查看docker镜像
至此，开发人员提交代码到远程Git仓库的master上，Jenkins点击构建即可完成部署。但是我们希望的是Git提交后，Jenkins自动构建，不需要我们来点击，这就需要webhook
8.Webhook
我这里用的内部git仓库 gitea，所以以此为例，Github和Gitee也类似：
8.1首先安装Gogs插件
Manage Jenkins ==> Manage Plugins ==> 可选插件 ==> 搜索gogs，安装即可
8.2 gitea配置webhook
URL配置规则为：
http(s)://<你的Jenkins地址>/gogs-webhook/?job=<你的Jenkins任务名>
设置钩子成功后，点击测试推送，看到测试成功：
8.3 测试
修改源码首页添加 fanyao, 提交git后。看到Jenkins自动开始构建了。
访问访问 localhost:8083,见到如下画面则成功，看到首页新增了fanyao。表明自动化构建成功。
9.shell参数化
上面我们固定了docker代理端口是8083，我们想如果能构建的时候自己指定就更方便了，这个用到This project is parameterized属性
9.1添加WorkspacePath参数
9.2添加git项目名参数
9.3添加docker对外端口参数
9.4添加启动docker容器的名称参数
9.5修改docker的脚本
#!/bin/bash
echo "WorkspacePath:$WorkspacePath"
echo "GitProjectName:$GitProjectName"
echo "DockerPort:$DockerPort"
echo "DockerContainerName:$DockerContainerName"
echo "workPath:$WorkspacePath$GitProjectName"
docker stop $DockerContainerName || true \
&& docker rm $DockerContainerName || true \
&& cd $WorkspacePath$GitProjectName \
&& docker build -t $DockerContainerName . \
&& docker run -d -p $DockerPort:80 --name $DockerContainerName -v $WorkspacePath$GitProjectName/dist:/usr/share/nginx/html -v $WorkspacePath$GitProjectName/nginx.conf:/etc/nginx/nginx.conf $DockerContainerName
将之前脚本的固定参数都替换为上述的变量即可。
9.6测试变量
构建后访问
localhost:8082仍然能看到首页，证明参数化成功。这样其他想要变更的变量均可这样执行。
现在只在一台服务间做部署，后续介绍一台Jenkins部署多台服务器的服务示例
下一章介绍Jenkinsfile 流水线的方式部署
