尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

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

前端实现自动化部署docker+Jenkins 一、环境部署环境为Ubuntu18.04版本二、下载docker1.安装命令sudo apt-get install docker-ce2.启动sudo systemctl start docker3.检查是否成功docker --version三、下面所需用到的docker命令1.查找镜像名称docker search 镜像名称2.查看本地镜像docker images3.远程仓库拉镜像docker pull 镜像名4.使用镜像生成容器docker run 镜像名5.进入容器docker exec -it 容器ID /bin/bash:进入容器6.退出容器ctrlPQ7. 删除所有容器docker rm $(docker ps -a -q)8.重新启动已停止的容器docker start 容器名(也可以使用容器ID)附常用参数-i以交互模式运行容器通常与 -t 同时使用-t为容器重新分配一个伪输入终端通常与 -i 同时使用-p : 端口映射 格式为[主机端口容器端口]-d : 后台模式运行-name : 给容器一个新的名称-v挂载主机的目录-e usernameritchie: 设置环境变量-m设置容器使用内存最大值--env-file[]从指定文件读入环境变量四、拉取并创建Jenkins镜像和做对应的配置1.拉取jenkinsdocker pull jenkins/jenkins2.查看拉取docker pull jenkins/jenkins3.启动jenkinsdocker 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 Jenkins2.选择Plugins3.选择Available plugins勾选node并点安装同样步骤安装Generic Webhook Trigger安装成功如下图所示4.配置node在Manage Jenkins中选择tools然后点击新增node选择版本和项目使用版本一致避免打包报错然后保存应用注需要填写别名用来区分不同版本六、配置自动打包新建item1.选择新建item2.选择Freestyle project和填写任务名称点击确定进入任务配置3.任务配置GeneralGeneral中填写描述和勾选丢弃旧的构建配置git账号和密码选择配置的账号信息4.任务配置源码管理源码管理需要填写git提交代码地址注指定分支为空时代表any具体打包分支以自己代码需部署为准4.任务配置Triggers配置Triggers4.1 勾选Generic Webhook Trigger4.2配置token先点击save保存一下配置点击设置进入Manage Jenkins然后点击Users点击用户列表中设置点击Security在点击生成新的Token输入名称并得到token4.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并选择添加WebHooks3.配置触发链接及密码触发链接为http://JENKINS_URL/generic-webhook-trigger/invoke?tokenTOKEN_HEREhttp://服务器地址:Jenkens映射端口/generic-webhook-trigger/invoke?tokenTOKEN_HERETOKEN_HERE为之前配置的token如下图所示如http://127.0.01:9090/generic-webhook-trigger/invoke?token11e90c04d5cbf6ab3034cb749316f27f81webhook密码为Jenkens登录密码配置成功后push即可实现自动化构建八、优化为了避免出现打包过程中出现403现象在shell脚本中将打包后的代复制到其他文件夹就可以避免在打包过程中删除dist目录出现网站403cd /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配置文件路径
返回列表