大家好，我是小菜，一个渴望在互联网行业做到蔡不菜的小菜。可柔可刚，点赞则柔，白嫖则刚！ 死鬼~看完记得给我来个三连哦！

本文主要介绍 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

以上便是前端项目的部署，掌握了这个软技能后，赶紧为你们的前端妹子搭建一下吧！也许可以优先获取择偶权哦！

更加具体的 Jenkins 使用，请点击 链接 跳转学习使用哦，路漫漫，小菜与你一同求索！

今天的你多努力一点，明天的你就能少说一句求人的话！

我是小菜，一个和你一起学习的男人。 💋

微信公众号已开启，小菜良记，没关注的同学们记得关注哦！