jenkins部署vue,jekins 前端自动化部署vue

　　本文主要介绍Jenkins的Vue项目自动部署的实现，通过实例代码详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　詹金斯简介1。环境准备2。首先登录服务器更新系统软件3。安装Java和git4。安装nginx5。安装jenkins6。用Jenkins 7创建一个构建任务。填写在Jenkins的build 8期间执行的shell脚本。安装nodeJs9。打开服务器10。部署nginx，用docker 11访问项目。实现代码提交以自动触发Jenkins的构建。

jenkins介绍

　　Jenkins是用Java编写的开源、持续集成的工具，可以通过yum命令行直接安装在Centos上。詹金斯只是一个平台。真正管用的是插件。这就是詹金斯受欢迎的原因，因为詹金斯有各种各样的插件。

1. 环境准备

　　Centos 7。*服务器，Pagoda远程连接工具3.2版

2. 首先登录服务器更新系统软件

　　云更新

3. 安装Java和git

　　yum安装javayum安装git

4. 安装nginx

　　安装yum nginx//install

　　服务nginx启动//启动

　　出现重定向到/bin/systemctlstartnginx . service。

　　说明nginx已经成功启动，访问你的ip/at http://，安装成功就会出来nginx默认的欢迎界面。

5. 安装Jenkins

　　wget-O/etc/yum . repos . d/Jenkins . repo http://pkg.jenkins-ci.org/redhat/jenkins.repo rpm-进口https://jenkins-ci.org/redhat/jenkins-ci.org.key

　　安装yum Jenkins//完成后使用yum命令直接安装Jenkins。

　　servicekinsrestart//启动jenkins

　　jenkins成功启动后，默认为端口8080。浏览器可以通过输入您的服务器ip地址和端口8080来访问它。

　　等待一段时间后，系统会提示您输入管理员密码。

　　//服务器

　　[root @ VM _ 0 _ 2 _ centos ~]# cat/var/lib/Jenkins/Secrets/initial admin密码//cat查看文件

　　进入系统安装插件，点击安装推荐插件。

　　点击推荐安装，稍等片刻，就会出现。

　　这个时候会安装更多的插件，时间稍微长一点。耐心等待。

　　安装插件后，创建第一个管理员用户。

　　继续单击保存并完成。

　　点击开始使用jenkins，此时jenkins已经配置成功。

6. 用jenkins创建一个构建任务

　　我这里的代码仓库用的是代码云(github也是一样)。

　　输入仓库地址。因为仓库是私有的，所以会有错误提示。此处应添加凭据。是你的代码云或者github账号。

　　选择要生成的代码分支。

　　此时会创建一个构建任务。

　　回到首页==会看到一个llgtfoo的构造任务。

　　点击名称进入当前任务配置页面，点击工作区。

　　点击工作区==

　　詹金斯的建造任务已经完成。

7. 填写jenkins构建时执行的shell脚本

　　输入shell命令==

　　节点v

　　npm安装

　　Rm -rf。/dist/*移除工作区分布文件

　　Nrun构建包项目

　　RM-RF/www/web/site/* delete/www/web/site最后一个构建文件

　　Cp -rf。/dist/* /www/web/site将打包的dist文件复制到/www/web/site，而/www/web/site是nginx文件目录。

　　再次回到我的_test项目。

　　点击Build Now==发现构建报错(红点表示构建失败，蓝点表示构建成功)。

　　单击错误的构建历史，进入并单击控制台输出。

　　检查错误问题。

　　npm:找不到命令

　　Jenkins默认没有安装节点插件，所以没有npm命令。

　　安装节点插件====

8. 安装nodeJs

　　安装成功。

　　单击全局工具配置===

　　选择nodeJS安装。

　　保存，返回配置

　　保存并再次单击立即构建。在构建过程中，您可以单击控制台输出来查看构建过程。

　　脚本执行了，但并不是所有的都执行成功。

　　当我们在服务器上安装jenkins时，我们将在服务器上创建一个jenkins用户。但是这个jenkins没有权限操作/www/web/site文件夹。

　　将/www/web/site文件夹的所有权限添加到jenkins用户==

　　[root @ VM 0 2 centos/]# chown-R Jenkins:Jenkins/www/web/site

　　再次单击构建。

　　已完成：成功意味着施工成功。

9.打开服务器

　　检查server /www/web/site/folder的内容。

　　/www/web/site/已经包含打包的内容。

10.利用docker部署nginx访问项目

　　Centos安装docker环境

　　Centos官网安装步骤

　　厄拉nginx #拉镜

　　Mkdir -p /www/web/conf #创建配置文件目录

　　将nginx.conf和default.conf复制到/www/web/conf中

　　#复制配置文件

　　docker运行名称nginx01 -d nginx:最新

　　docker CP nginx 01:/etc/nginx/nginx.conf/www/web/conf #将容器中的nginx . conf文件复制到conf目录中。

　　docker CP nginx 01:/etc/nginx/conf . d/default.conf/www/web/conf #将容器中的default . conf文件复制到conf目录中。

　　Docker rm -f nginx01 #删除镜像

　　/www/web/site为Jenkins构建dist文件输出目录。

　　创建web项目容器

　　docker run-it-d-name myng inx-p 8888:80-v/www/web/site:/usr/share/nginx/html-v/www/web/conf/nginx . conf:/etc/web/conf/default . conf:/nginx/conf . d/default . conf-v/www/web/logs:/var/log/nginx nginnx

　　命令描述：

　　Dockrun-it-d-name mynginx # name

　　-p 8888:80 #端口映射

　　-v/www/web/site:/usr/share/nginx/html #挂载资源路径

　　-v/www/web/conf/nginx . conf:/etc/nginx/nginx . conf #挂载主配置文件

　　-v/www/web/conf/default . conf:/etc/nginx/conf . d/default . conf #挂载配置反向代理的默认配置文件。

　　-v/www/web/logs:/var/log/nginxnginx #挂载日志文件

　　3358 IP: 3000成功访问

11.实现代码提交自动触发Jenkins构建

　　在gitee上开发本地推送代码后，触发Webhook，jenkins自动执行构造。

　　Jenkins安装通用Webhook触发器插件github并添加触发器配置方法

　　1.在刚才的llgtfoo项目中，点击build trigger，选择Generic Webhook Trigger，填入token。

　　2.gitee配置Webhook

　　选择设置webhook在gitee项目中添加webhook。

　　按照上面红框中的格式，选择推送代码时触发webhook，成功后底部会出现一个绿色小勾。

　　测试请求成功。

　　修改后的代码被推送到gitee，Jenkin成功地自动添加了一条新的构建记录。

　　关于Jenkins的Vue项目自动部署实现的这篇文章到此为止。关于Jenkins自动部署Vue的更多信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录