windows服务器下使用jenkins部署vue项目

本文详细介绍如何通过Jenkins实现从代码仓库自动拉取、构建、部署的全过程。涵盖Jenkins安装配置、Git集成、Node.js环境搭建及Nginx代理配置等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

准备:

        1.gitee代码仓库

        2.服务器下载jenkins,我这里用的是2.375.1版本

        3.下载git版本控制系统,我用的是2.38.1版本

        4.下载jdk,我安装的是11.0.17版本

        5.安装nginx高性能的HTTP和反向代理web服务器

1.首先下载jdk,网址是Java Downloads | Oracle,下载64位的安装程序

 2.点击同意,然后下载

 3.点击之后需要登陆oracle账户,没有的话注册一个,点击登录后就会自动下载

 4.下载完成后双击打开,我没有更改路径,一直下一步安装至完成,然后开始安装jenkins

5.下载jenkins,网址是Jenkins

 点击download下载

6.点击windows版,然后等待下载完成

 7.下载完成后打开,点击next

 8.这里的地址我就不改了,可以改成自己想存放的目录,然后点击next

 9.选择第一个,点击next

 10.填写端口号,填上之后点击Text Port测试端口是否被占用,没被占用的话会显示绿色箭头,然后点击next

 11.点击change,改变为我们刚安装jdk的目录,点击next

 12.默认,点击next

13.点击install,等待安装完成,完成后点击finish

 14.进入浏览器输入localhost:6379,端口号是10中自己填写的端口号,然后会进入到这个页面

 根据红字提示,找到该文件(ProgramData是隐藏的项目,需要在电脑上设置显示)

 15.用记事本打开,复制密码到管理员密码处,点击继续

 16.然后点击  安装推荐的插件,等待安装的完成

17.安装完成,按照提示注册管理员用户,点击保存并完成,然后回出现这个界面,点击保存并完成

 18.开始使用jenkins,到此jenkins就已经安装完成

 19.然后安装Git,网址是Git,点击downloads,然后点击windows,选择64位的安装程序

 20.下载完成后,一直默认next安装即可

 21.在jenkins里点击Manage Jenkis选中Global Tool Configuration设置服务器git安装路径,然后点击应用

 22.在Manage Plugins下搜索NodeJS插件并安装

 23、“安装完成后重启Jenkins(空闲时) ” 这个一定要勾选,重启才能有效

 重启慢的话,进入计算机管理,点击jenkins重启动,然后进入浏览器刷新页面重新登陆

 24.在Global Tool Configuration选项下设置NodeJS版本,等下打包构建的时候要用到。填一个别名,点击应用

25.安装nginx,下载地址是nginx

 选择稳定版下载,下载后解压缩即可

 进入到解压后的目录,输入cmd

 运行nginx start

打开浏览器输入localhost:80,若出现一下界面则安装成功

 在nginx的html文件夹下新建mall,dist文件夹

 然后打开nginx.conf文件进行项目代理配置

 ​​​​​

 配置完成后在cmd里面输入 nginx -s load 重启nginx

  26.创建项目,首页点击  新建item

 输入gitee仓库代码地址,点击添加(报错先不用管)

 输入仓库用户名和密码

 这里选择写好的仓库用户(报错就消失了)

 在构建环境选择nodejs构建

 点击build steps下的  增加构建步骤

命令解释:

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

        2.安装依赖

        3.build打包

再增加一步构建命令

        命令解释:

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

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

  然后点击应用

进入到自己创建的文件夹里面,点击build now,开始构建

 27.显示绿色对号就是构建成功,同时nginx下的dist文件夹里也有文件了​​​​​​​

 28.最后在浏览器上输入localhost:8999即可访问,服务器的话输入自己的ip+8999(自己的端口)

 OK!完事

### 如何在Ubuntu上使用Jenkins部署Vue项目 #### 准备工作 为了成功配置CI/CD管道,在开始之前需确保安装并设置好必要的工具和服务。这包括但不限于Node.js环境以及Git版本控制系统。 #### 安装与配置Jenkins 首先,需要在Ubuntu服务器上安装Jenkins。可以按照官方文档中的说明完成此操作[^1]。一旦Jenkins被正确安装和启动,则可通过浏览器访问其Web界面来进行进一步的配置。 #### 创建新的Jenkins Job 进入Jenkins主页后点击新建任务按钮来建立一个新的Pipeline job用于管理Vue应用的持续集成流程。命名该job,并选择自由风格软件项目作为类型。 #### 配置源码仓库 在General选项卡下指定GitHub上的Vue应用程序存储库链接;接着切换至Source Code Management部分,选择Git并将远程URL设为目标仓库地址。同时记得添加凭证以便能够拉取私有库内的资源文件。 #### 设置构建触发器 为了让每次推送都能触发自动化过程,可以在Build Triggers里勾选`GitHub hook trigger for GITScm polling`项。如果采用的是其他托管平台比如Bitbucket或Gitee等,则应相应调整此处的选择。 #### 编写Jenkinsfile 对于现代JavaScript框架如Vue而言,建议利用多阶段Docker镜像配合pipeline-as-code的方式实现更灵活高效的流水线控制逻辑。下面给出一段适用于大多数场景下的简化版Jenkinsfile脚本: ```groovy pipeline { agent { docker 'node:lts' } stages { stage('Install Dependencies') { steps { sh 'npm ci' } } stage('Run Tests') { when { expression { return params.RUN_TESTS == true } // 可选参数,默认开启单元测试执行开关 } steps { sh 'npm run test:unit' } } stage('Build Project') { steps { sh 'npm run build' } } stage('Deploy Application') { when { branch 'master' } steps { sshagent(['your-private-key-id']) { sh ''' ssh -o StrictHostKeyChecking=no user@remote.server.com << EOF cd /path/to/deploy/ git pull origin master pm2 restart ecosystem.config.js EOF ''' } } } } } ``` 上述代码片段展示了如何定义一个多步骤的工作流,涵盖了依赖包安装、运行测试案例集、打包生产环境可用的应用程序以及最终向目标主机分发更新后的静态资产等一系列动作。值得注意的是,实际应用场景可能更加复杂多样,因此可根据具体需求对以上模板做出适当修改优化。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bangbang给你两锤

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值