共计 2712 个字符，预计需要花费 7 分钟才能阅读完成。
大家好，我是小菜，一个渴望在互联网行业做到蔡不菜的小菜。可柔可刚，点赞则柔，白嫖则刚！死鬼~ 看完记得给我来个三连哦！
本文次要介绍
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
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
以上便是前端我的项目的部署，把握了这个软技能后，连忙为你们的前端妹子搭建一下吧！兴许能够优先获取择偶权哦！
更加具体的 Jenkins 应用，请点击 链接 跳转学习应用哦，路漫漫，小菜与你一起求索！
明天的你多致力一点，今天的你就能少说一句求人的话！
我是小菜，一个和你一起学习的男人。
????微信公众号已开启，小菜良记，没关注的同学们记得关注哦！
