這不上週搭了個 Jenkins 來部署專案，自從使用上這個工具後，每個後端同學臉上都洋溢著喜悅。這不，在茶水間打杯熱水的功夫

“小x，我也想要”一陣聲音從身後飄過，著實嚇了我一跳，心跳不禁加快了幾下，腦子瞬間閃過幾百個畫面

“你想要啥啊你要”我強行鎮定下來，問了下

“就是你們後端部署的那個神器啊，我們前端每次最新的包也都得打包完上傳到 Nginx 下，可麻煩了！”

“害，你說這個啊，我還以為你想啥呢，放心放心，我等會就給你整個！”

剛說完，那妹子臉上就笑開了花，道了聲謝就走了，看著漸遠的背影不禁想著：原來女孩子也有這麼容易滿足的時候啊！

那咱們就話不多說，直接來看一下 Jenkins如何部署前端專案，畢竟不能讓前端妹子久等了。

Jenkins前端專案部署

老樣子我們畫張圖來了解下部署的一個大致過程：

從圖中我們可以看出來我們需要的內容：

兩臺伺服器（一臺伺服器也行，這樣就可以不用進行 SSH 遠端呼叫了）Jenkins 、Nginx 和 Node 三個工具的安裝

準備好以上需要的內容，部署前端那就是 手捏把掐了

1. 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 -vnpm -v3. 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:        '[email protected]: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

以上便是前端專案的部署，掌握了這個軟技能後，趕緊為你們的前端妹子搭建一下吧！也許可以優先獲取擇偶權哦！