大家好,我是小菜,一个渴望在互联网行业做到蔡不菜的小菜。可柔可刚,点赞则柔,白嫖则刚! 死鬼~看完记得给我来个三连哦!
本文主要介绍Jenkins部署前端项目
如有需要,可以参考
如有帮助,不忘 点赞
微信公众号已开启,小菜良记,没关注的同学们记得关注哦!
这不上周搭了个 Jenkins 来部署项目,自从使用上这个工具后,每个后端同学脸上都洋溢着喜悦。这不,在茶水间打杯热水的功夫
“小菜,我也想要”一阵声音从身后飘过,着实吓了我一跳,心跳不禁加快了几下,脑子瞬间闪过几百个画面
“你想要啥啊你要”我强行镇定下来,问了下
“就是你们后端部署的那个神器啊,我们前端每次最新的包也都得打包完上传到 Nginx 下,可麻烦了!”
“害,你说这个啊,我还以为你想啥呢,放心放心,我等会就给你整个!”
刚说完,那妹子脸上就笑开了花,道了声谢就走了,看着渐远的背影不禁想着:原来女孩子也有这么容易满足的时候啊!
Jenkins 的安装已经在上篇后端项目部署中详细介绍过了,没看过的小伙伴可以前往学习一番别当工具人了,手摸手教会你 Jenkins,那咱们就话不多说,直接来看一下 Jenkins 如何部署前端项目,毕竟不能让前端妹子久等了。
Jenkins前端项目部署
老样子我们画张图来了解下部署的一个大致过程:
从图中我们可以看出来我们需要的内容:
两台服务器(一台服务器也行,这样就可以不用进行 SSH 远程调用了)
Jenkins 、Nginx 和 Node 三个工具的安装
准备好以上需要的内容,部署前端那就是 手捏把掐了
1. Nginx 安装
如果服务器上已经安装了 Nginx ,这一个步骤可以跳过
Nginx下载地址: 点击下载
我们将下载好的 nginx-1.9.9.tar.gz
上传到服务器上的 /usr/local
下
执行以下命令:
# 解压 tar -zxvf nginx-1.9.9.tar.gz #进入nginx目录 cd nginx-1.9.9 # 配置 ./configure --prefix=/usr/local/nginx # 编译 make && make install
执行以上命令后,我们可以在 /usr/local/nginx
中看到以下目录结构:
然后我们进入 conf/nginx.conf
文件中修改下默认的监听的端口号:
然后输入 ./sbin/nginx
进行启动,然后我们在网页上访问http://服务器IP:8090/
,看到以下页面说明 Nginx 启动成功:
2. Node 安装
然后我们需要在我们的 Jenkins 所在的服务器上也安装上 NodeJS 工具,步骤如下:
首先我们需要从官网中下载 Node,点击下载
下载完我们把安装包放到服务器上的
/usr/local
目录下(存放目录没有要求)然后输入以下指令
# 解压 tar -xvf node-v14.15.1-linux-x64.tar.xz # 建立软连接 ln -s /usr/local/node-v14.15.1-linux-x64/bin/node /usr/local/bin/ ln -s /usr/local/node-v14.15.1-linux-x64/bin/npm /usr/local/bin/
测试是否安装成功
node -v npm -v
![](https://cbuc.top/1608355786031.png)
3. Jenkins 配置
完成 Nginx 和 Node 的安装后,我们就可以进行下一步操作了。我们需要在 Jenkins 中安装上 NodeJS 插件:
然后依次点击 Manage Jenkins -> Global Tool Configuration
,进行 NodeJS 的配置
配置里面选择我们/usr/local/node-v14.15.1-linux-x64/
,因为我们已经自己安装了 Node,所以这个自动安装的选项可以取消勾选。
4. 前端部署
以上都是前期的准备工作,到这里我们就完成了前期工作的准备,接下来我们就可以来部署项目了!
首先创建一个前端流水线项目:
然后建立Jenkinsfile构建脚本,示例如下:
//gitlab的凭证 def git_auth = "89f2087f-a034-4d39-a9ff-1f776dd3dfa8" node { stage('拉取代码') { checkout([$class: 'GitSCM', branches: [[name: '*/master']], doGenerateSubmoduleConfigurations: false, extensions: [], submoduleCfg: [], userRemoteConfigs: [[credentialsId: "${git_auth}", url: 'git@192.168.66.100:cbuc_group/test_front.git']]]) } stage('打包,部署网站') { //使用NodeJS的npm进行打包 nodejs('nodejs12'){ sh ''' npm install npm run build ''' } //=====以下为远程调用进行项目部署======== sshPublisher(publishers: [sshPublisherDesc(configName: 'master_server', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '/usr/local/nginx/html', remoteDirectorySDF: false, removePrefix: 'dist', sourceFiles: 'dist/**')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)]) } }
保存后我们点击 Build Now,等待一会就可以看到项目已经成功部署上去啦!
END
以上便是前端项目的部署,掌握了这个软技能后,赶紧为你们的前端妹子搭建一下吧!也许可以优先获取择偶权哦!