jenkins部署前端web项目简直简单到令人发指!

新建一个前端任务

点击创建新任务

输入项目名称，选择freestyle

不好意思，放错了

点击确定

然后填写一些项目的基本信息，如描述，github项目地址等。比较关键的是源代码管理里面选择Git

输入自己的项目地址，然后下方选择刚才配置的全局的凭据，如果有问题的话，输入框下方会提示相应的内容。

构建环境选择：Provide Node & npm bin/ folder to PATH如果jenkins中没有安装NodeJs插件的话，就看不到这个选项

接下来就是配置shell，点击增加构建步骤，选择执行shell

命令中输入

cd /root/.jenkins/workspace/blog_admin_web #定位到当前项目目录
npm install
npm run build
cd dist
rm -rf blog_admin_web.tar.gz #删除上次打包生成的压缩文件
tar -zcvf blog_admin_web.tar.gz * #把生成的项目打包成test方便传输到远程服务器
cp blog_admin_web.tar.gz /web/blogAdminWeb #将压缩包拷贝到/www/wwwroot/blogAdminWeb下(下一步会创建,莫慌)
cd /web/blogAdminWeb
tar -xzvf blog_admin_web.tar.gz # 解压

将blog_admin_web修改成你创建的这个任务的名称就行,每个任务jenkins都会在/root/.jenkins/workspace下创建两个文件夹,从git拉下来的项目就存在其中.

然后打开finalShell,去创建我们前端项目打包后的静态资源路径

cd /
mkdir web
cd web
mkdir blogAdminWeb

以后我们的前端项目就都可以放在/web下方便管理

现在我们就把前端的项目自动化构建任务创建好了,点击立即部署,就会看到/web/blogAdminWeb会生成我们前端项目打包后的文件,至此,前端的自动部署就算搞定了,下一回,我们将在centOs下安装Nginx,让我们在浏览器中可以访问到我们的前端项目
访问我的博客,查看文章原文和代码示例: 使用Jenkins部署前端vue项目
更多原创Vue/React/ES6系列学习笔记可以访问我的网站importnull.com