前端实现自动化部署docker+Jenkins-平芜编程栈

一、环境

部署环境为Ubuntu18.04版本

二、下载docker

1.安装命令
sudo apt-get install docker-ce
2.启动
sudo systemctl start docker
3.检查是否成功
docker --version

三、下面所需用到的docker命令

1.查找镜像名称
docker search 镜像名称
2.查看本地镜像
docker images
3.远程仓库拉镜像
docker pull 镜像名
4.使用镜像生成容器
docker run 镜像名
5.进入容器
docker exec -it 容器ID /bin/bash:进入容器
6.退出容器
ctrl+P+Q
7. 删除所有容器
docker rm $(docker ps -a -q)
8.重新启动已停止的容器
docker start 容器名(也可以使用容器ID)
附：常用参数
-i：以交互模式运行容器，通常与 -t 同时使用
-t：为容器重新分配一个伪输入终端，通常与 -i 同时使用
-p : 端口映射格式为[主机端口：容器端口]
-d : 后台模式运行
-name : 给容器一个新的名称
-v：挂载主机的目录
-e： username="ritchie": 设置环境变量
-m：设置容器使用内存最大值
--env-file=[]：从指定文件读入环境变量

四、拉取并创建Jenkins镜像和做对应的配置

1.拉取jenkins

docker pull jenkins/jenkins

2.查看拉取

docker pull jenkins/jenkins

3.启动jenkins

docker run -d -it -p 9090:8080 -v /var/jenkins_home:/opt/jenkinsData --name jenkensTest jenkins/jenkins

注：

-p 9090:8080 是将8080端口映射到9090端口
-v /opt/jenkinsData:/var/jenkins_home 是将jenkins工作目录映射到服务器/opt/jenkinsData目录下

4.查看访问jenkins（服务器ip+映射端口）http://服务器ip:9090/

5.如图所示将管理员密码复制到输入框（管理员密码将在启动jenkins生成）

6.点击继续后进入安装所需插件页面，默认选择推荐插件点击安装

7.安装好后，创建用户（记住密码和用户以后登录要用）

填写完成点击保存并完成

8.实例配置（一般默认）点击保存并完成即可

9.开始使用jenkins（完成jenkins安装配置）

五、安装node和 Generic Webhook Trigger 插件

1.点击Manage Jenkins

2.选择Plugins

3.选择Available plugins勾选node并点安装

同样步骤安装Generic Webhook Trigger

安装成功如下图所示

4.配置node

在Manage Jenkins中选择tools

然后点击新增node

选择版本和项目使用版本一致避免打包报错然后保存应用

注：需要填写别名用来区分不同版本

六、配置自动打包（新建item）

1.选择新建item

2.选择Freestyle project和填写任务名称

点击确定进入任务配置

3.任务配置（General）

General中填写描述和勾选丢弃旧的构建

配置git账号和密码

选择配置的账号信息

4.任务配置（源码管理）

源码管理需要填写git提交代码地址

注：指定分支（为空时代表any）具体打包分支以自己代码需部署为准

4.任务配置（Triggers）

配置Triggers

4.1 勾选Generic Webhook Trigger

4.2配置token

先点击save保存一下配置

点击设置进入Manage Jenkins然后点击Users

点击用户列表中设置

点击Security在点击生成新的Token

输入名称并得到token

4.3设置token

复制设置的token然后回到任务列表在名称中点击配置继续配置

将得到的token填入token输入框中

5.任务配置（Environment）

勾选Provide Node & npm bin/ folder to PATH并选择之前配置的node（项目所使用的node版本）

6.任务配置（Build Steps）

在增加构建步骤中选择执行shell

填写shll脚本

cd /var/jenkins_home/workspace/testAutoBuild node -v npm -v echo '开始安装依赖' npm i echo '依赖安装完毕' echo '开始打包' npm run build echo '打包完毕'

注： cd /var/jenkins_home/workspace/testAutoBuild /var/jenkins_home/workspace后面必须为配置的任务名称不然打包报错（cd /var/jenkins_home/workspace/任务名称）

7.测试配置

点击构建即可实现拉取代码并打包

可选择在控制台查看构建流程日志

构建成功

8.查看打包

在服务器映射文件夹中查看拉取代码及打包（文件地址为启动jenkins配置映射的地址）

具体地址在workspace+任务名称及映射地址+workspace+任务名称即可

9.配置nginx (服务器端口为8003)

server { listen 8003; server_name localhost; root /opt/jenkinsData/workspace/testAutoBuild/dist; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Headers' 'Origin,X-Requested-Width,Content-Type,Accept'; add_header 'Access-Control-Allow-Methods' '*'; if ($request_method = 'OPTIONS') { return 204; } #解决Router(mode: 'history')模式下，刷新路由地址不能找到页面的问题 location / { index index.html index.htm index.php; try_files $uri $uri/ /index.php?$query_string; if (!-e $request_filename) { rewrite ^(.*)$ /index.html?s=$1 last; break; } } location ~ \.php(.*)$ { fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; fastcgi_split_path_info ^((?U).+\.php)(/?.+)$; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param PATH_INFO $fastcgi_path_info; fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info; include fastcgi_params; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }

将root文件地址配置为打包dist路径即可

测试

七、在gitee中配置WebHooks（实现push后自动构建）

1.在所配置项目git上选择管理

2.在管理中找到WebHooks并选择添加WebHooks

3.配置触发链接及密码

触发链接为http://JENKINS_URL/generic-webhook-trigger/invoke?token=TOKEN_HERE
http://服务器地址:Jenkens映射端口/generic-webhook-trigger/invoke?token=TOKEN_HERE
TOKEN_HERE为之前配置的token（如下图所示）

如：http://127.0.01:9090/generic-webhook-trigger/invoke?token=11e90c04d5cbf6ab3034cb749316f27f81

webhook密码为Jenkens登录密码

配置成功后push即可实现自动化构建

八、优化

为了避免出现打包过程中出现403现象

在shell脚本中将打包后的代复制到其他文件夹就可以避免在打包过程中删除dist目录出现网站403

cd /var/jenkins_home/workspace/testAutoBuild node -v npm -v echo '开始安装依赖' npm i echo '依赖安装完毕' echo '开始打包' npm run build echo '打包完毕' echo '准备部署' cp -r /var/jenkins_home/workspace/testAutoBuild/dist/* /var/jenkins_home/workspace/web/testAutoBuild echo '部署完成'

只需要添加 cp -r /var/jenkins_home/workspace/testAutoBuild/dist/* /var/jenkins_home/workspace/web/testAutoBuild

注：需要在映射文件夹创建好web文件夹和web文件夹下新建号testAutoBuild文件夹并设置可读写权限

修改后需重新修改nginx配置文件路径

前端实现自动化部署docker+Jenkins