win环境Jenkins部署前端项目

清疚 2024-02-18 09:21 143阅读 0赞

今天分享win环境Jenkins部署前端vue项目，使用的版本jenkins版本Jenkins 2.406版本。

前提是jenkins安装好了，通用配置已经配置好了，可以参考上两篇博客。

1、前端项目依赖nodejs，需要安装相关插件

7e325db3fc9649bd9e9a16767fc6101d.png

点击进入

0350ebe9bde7473eae5ed2ac1aa7429c.png安装成功标准

6d9cd9dbe4284ac4be95d356da8c9e9a.png

jenkins重启后生效， 重新登陆

2、配置nodejs

e1e4baea918a4a4f91d9dffe3ae626f4.png

点击进入

3cca9e8bf7d04416831e32016362aff8.png

点击后，写上别名、选上版本

a9e8b2d095094b79a12853cc45740b60.png

然后点击保存

3、开始创建前端项目任务，点击

73e9b85025de400cb0e439f8c5ffb8d2.png

点击后创建

d70b2a1fb48d46ae8339dbc8ec005a6a.png

4、配置分支

d315ce51dfce495b961cc63c2454c3bb.png

进入

94764380ae4a413daf135dc7eb644364.png

继续配置

5fa29e599a2a42fca9a233322569d456.png

5、配置源码地址

a5f58bb653544bdb8850dd74aa0244b2.png

6、配置构件环境

9163ba0b415d4787935d498a31bc038f.png

7、开始构建

5ec18b4e6dbe4c7f858713b3bf9bc6db.png

点击，选择环境

2f7ed455feb143cdb5f1878b93961d57.png

填脚本：

1）每次打包前先强制删除项目下的node_modules文件夹及下面的文件

2）安装依赖

  1. rd/s/q C:\Users\admin\.jenkins\workspace\test_vue_project\node_modules
  2. npm install

3）build打包

  1. npm run build

如图

399423c0138f45709bad4f5e719ccb3c.png

继续一步构建命令

1）删除nginx站点下dist文件夹

2）复制粘贴jenkis打包好的dist文件及内容，强制覆盖至nginx站点下的dist文件夹

  1. rd/s/q E:\sh\nginx\nginx\nginx-1.15.2\html\dist
  2. xcopy /s C:\Users\admin\.jenkins\workspace\test_vue_project\dist E:\sh\nginx\nginx\nginx-1.15.2\html\dist\

如图

d4f7ae5970444871862451dca67d9a8a.png

8、先启动好nginx

配置nginx

cf3302030dc148549ba01ea23c4e10aa.png

点击启动

593d37a8f3de4b04a01229777f2b39fc.png

这时候访问，没有前端页面

79be5a7c86c74aadbf735453ea405c37.png

9、最后打包前端文件、选择响应的分支

5f119855d3dc4e16ab807a59a6a04417.png

执行后文件多了

3f3062ae97c84401bdfb2ce4606740fa.png

注意：nginx启动后如果更新前端文件，不需要重启nginx,因此更新完文件后，就可以直接访问最新服务了。

这时候访问前端项目就ok了，到此前端部署完成，后面会分享linux环境部署前后端服务，敬请期待！

发表评论

表情：
评论列表 （有 0 条评论，143人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Jenkins部署开发环境

    【前言】 现在打字练习的项目只有生产环境，所有的改动都在生产环境上进行，这明显是不合理的，所以就得部署一套开发环境。 【过程】 为什么要用Jenkins部署呢？因为Jen

    我会带着你远行我会带着你远行/ 0 赞/ 465 阅读