0%

jenkins自动化部署github上的vue项目

前段时间在服务器上安装了docker,同时也在docker里面部署了一个jenkins容器,由于我的服务器在刚买的时候已经装好了lnmp环境,所以我就没有在docker里面部署nginx服务器了,本次实践就是直接修改nignx配置,网站的根目录直接使用vue项目打包后的dist目录,当然如果后期要继续玩jenkins自动化部署以及灾备相关实践的话,我估计还会得在docker里面部署一个nignx容器,这个后面再说。这篇博客我先简单说说如何自动化部署托管在github上的vue项目。

jenkins插件安装

安装 Publish Over SSH 、Git plugin 、NodeJS Plugin 插件

在jenkins管理面板新建一个任务

输入任务名称,并选择构建一个自由风格的软件项目,然后点击OK.

选中General,然后选填你的任务描述,然后点击Source Code Management,

选择git,并把vue项目地址填入项目URL,再点击Build Triggers,

勾选GitHub hook trigger for GITScm polling,然后点击Build Environment,

勾选Provide Node & npm bin/ folder to PATH,并选择NodeJS Installation版本,然后点击Build,

选择【执行shell】,然后输入以下命令:

然后点击save即完成jenkins任务的创建,但现在还无法部署vue项目,因为jenkins跟github还没有关联上。

jenkins管理面板点击系统管理,再点击系统设置,

覆盖Hook URL处勾选为Github指定另外一个Hook URL,然后把这个URL设置到Github的Webhooks里面:

到这里就完成jenkin对github上的vue项目的自动化部署配置了。

执行构建任务并部署到nginx服务器

点击立即构建,看构建日志:

红色圈住的目录就是项目在jenkins构建的目录,构建完成后会增加一个dist目录,配置Nginx的网站目录指向这里就可以通过浏览器访问部署后的项目了: