《大前端進階 Node.js》系列 P6必備腳手架/CI構建能力（下）

時間 2020-04-05

標籤大前端進階 Node.js 系列 p6 必備腳手架構建能力欄目 Node.js 简体版

原文原文鏈接

前言

Coding 應當是一輩子的事業，而不只僅是 30 歲的青春🍚
本文已收錄 Github https://github.com/ponkans/F2E，歡迎 Star，持續更新💧javascript

P6 前端必備腳手架 /CI 構建能力，順着怪怪的思路往下看，而後獲取文章末尾的源碼，跟着源碼操做一遍，就是一個完整的前端腳手架構建、發佈、部署工程化項目。css

本文中 cli 已發佈至 npm 倉庫，以下：html

每篇文章都但願你能收穫到東西，這篇是前端項目的自動化構建部署，但願你看完，可以有這些收穫：前端

CLI 建立遠端倉庫
CLI 打包
Nginx 部署
Webhook 觸發 Jenkins 打包部署服務
Jenkins 打包部署
CI 構建

架構圖

下圖中左邊部分的項目初始化、模板拉取、項目運行部分，在《大前端進階 Node.js》系列 P6 必備腳手架/CI 構建能力（上）中，已經實現了。java

今天實現右邊部分，也就是 CI 部分（你們平時常常用的前端項目發佈系統，大體就是這麼個東西）。node

前期準備

GitHub 帳號

項目若是隻是存儲在本地很容易由於一些意外狀況（好比咖啡倒了、和媳婦吵架電腦摔了等等）致使代碼丟失，並且不方便多人合做開發維護，因此咱們都是須要遠端倉庫存儲項目的，本文使用的是 GitHub 倉庫，若是你們想要跟蹤實踐，要先準備好 GitHub 帳號。webpack

server

爲了讓用戶能夠經過網絡瀏覽器之類的客戶端在因特網上訪問咱們的網頁，咱們須要一臺 server 來部署項目，這樣用戶就能夠經過公網 IP 訪問咱們的網頁了。nginx

本文用的是 aliyun server，有條件的話也能夠準備一個，固然沒條件也不要慌，咱們電腦也是一臺 server，有它在手四海八荒均可以走一朝。git

server 部署

安裝 Nginxgithub
安裝 node
安裝 yum

PS：yum 是一個 Shell 前端軟件包管理器。基於 RPM 包管理，可以從指定的 server 自動下載 RPM 包而且安裝，能夠自動處理依賴性關係，而且一次安裝全部依賴的軟體包，無須繁瑣地一次次下載、安裝。

好比，Jenkins 使用 yum 安裝就很方便快捷。

CLI 建立遠端倉庫

命令行建立倉庫

有時候爲了將本地的項目倉庫同步到 Github，咱們還得打開瀏覽器去本身的 Github 帳戶下建立一個空倉庫，打斷了本身的工做流，若是咱們能夠經過命令行的形式建立 Github 倉庫並關聯本地項目豈不是完美，而且命令行還能夠集成到咱們的 CLI 工具裏，只要想不到沒有作不到的，下面咱們就介紹下如何經過命令行建立倉庫。

首先在你的 Github 上建立一個 token 建立地址，在命令行建立項目的時候須要這個 token 作校驗

（select scopes 我所有勾上了，畢竟加班加點趕文章，來不及仔細研究，見諒見諒）

必定要把生成的 personal access token 保存下來，只會顯示一遍，不記下來之後就找不到了

經過命令行建立 Github 倉庫

curl -u "$username:$token" https://api.github.com/user/repos -d '{"name":"$repo_name"}'
複製代碼

這裏須要把上述 username 和 token 分別換成實際的用戶名和剛纔記住的 personal access token，把 repo_name 換成任何想要的倉庫名。

將命令行建立 Github 倉庫的功能集成到 CLI 工具裏

咱們上期文章有介紹到 CLI 有個初始化的功能，接下來咱們將命令行建立 Github 倉庫的功能補充到初始化命令裏，先列 yi 一下 CLI 初始化要作的事情：

Git 初始化
建立 Github 倉庫
關聯 Github 倉庫
更新 package.json 的 repository 配置
提交代碼到 Github 倉庫
安裝依賴

相關代碼在 little-bird-cli/src/init.js

try {
  await loadCmd(`git init`, 'git初始化');
  if (username === '' || token === '') {
    console.log(symbol.warning, chalk.yellow('缺乏入參沒法建立遠端倉庫'));
  } else {
    const projectName = process.cwd().split('/').slice(-1)[0];

    await loadCmd(`curl -u "${username}:${token}" https://api.github.com/user/repos -d '{"name": "${projectName}"}'`, 'Github倉庫建立')
    await loadCmd(`git remote add origin https://github.com/${username}/${projectName}.git`, '關聯遠端倉庫')
    let loading = ora();
    loading.start(`package.json更新repository: 命令執行中...`);
    await updateJsonFile('package.json', {
      "repository": {
        "type": "git",
        "url": `https://github.com/${username}/${projectName}.git`
      }
    }).then(() => {
      loading.succeed(`package.json更新repository: 命令執行完成`);
    });

    await loadCmd(`git add .`, '執行git add')
    await loadCmd(`git commit -a -m 'init'`, '執行git commit')
    await loadCmd(`git push --set-upstream origin master`, '執行git push')
  }
  await loadCmd(`npm install`, '安裝依賴')
} catch (err) {
  console.log(symbol.error, chalk.red('初始化失敗'));
  console.log(symbol.error, chalk.red(err));
  process.exit(1);
}
複製代碼

爲了方便你們體驗，我這裏是把 username 和 token 做爲命令行入參傳進來的，若是是你本身的項目，能夠將其直接寫死在代碼裏，在你的項目目錄下執行 lbc init -u username -t token 若是獲得如下結果，那麼恭喜你成功啦，快去 Github 遠程倉庫查看你的項目代碼

至此，你們就能夠直接跨越千山和萬水，開始 Coding 啦，兩耳不聞窗外事，一心只用寫代碼，果真是很爽

手動打包 & 部署

打包

打包能夠理解爲上線發佈時的預處理工做，會將瀏覽器不能識別的語法作預處理轉換，把全部的 js 文件, css 文件都分別壓縮合併爲一個 All in One 的 .js 和 .css 文件。

這樣瀏覽器就能夠經過少許的 HTTP 請求獲取到所須要的前端資源了, 節省流量, 加快頁面加載速度，目前比較流行的打包工具備 Gulp, Grunt, Webpack 等。

咱們的 CLI 工具已經引入了 webpack，因此打包這一步仍是使用 webpack 來實現。

lbc build

在little-bird-cli/src/main.js命令管理文件裏增長打包命令lbc build

webpack.build.js

增長 webpack 打包配置文件webpack.build.js，它和咱們的本地項目啓動 webpack 配置文件的主要區別是增長了打包輸出，減小一些不須要的方法好比監聽。

output: {
  filename:'[name].[hash].js',
  path: process.cwd() + '/dist',
  publicPath: '/',
}
複製代碼

執行腳本

增長 build 執行腳本文件 little-bird-cli/src/build.js

let build = () => {
    webpack(config, (error) => {
        if (error !== null){
            console.log(symbol.error, chalk.red(error));
        } else {
            console.log(symbol.success, chalk.green('打包完成'));
        }
        process.exit(1);
    });
}
複製代碼

在項目目錄下執行lbc build，查看 dist 目錄就能夠看到打包生成的 html/js 文件了

部署

在開始自動打包部署以前咱們先來體驗下手動打包部署，正好能夠校驗下咱們的 CLI 打包命令在 server 端是否能夠正常使用。

接下來的操做都是在 server 環境哦~😯

登陸

登陸你的 server，將項目代碼 clone 到你的 server（ clone 後別忘了安裝依賴npm install）

安裝腳手架 npm 包

全局安裝 CLI 包 npm i -g little-bird-cli@latest

lbc build 打包

在項目目錄執行 lbc build 打包命令，查看在你 clone 的項目的 dist 目錄是否是生成了 html/js 文件，若是有的話表明 CLI 打包功能在服務端正常運轉。

Nginx

修改 Nginx 配置，打開配置文件vim /etc/nginx/nginx.conf，root 爲你 clone 項目的 dist 目錄

啓動 Nginx 服務，重啓 Nginx 服務 nginx -s reload，經過 ip:80 端口就能夠訪問你的頁面了

雖然經過手動操做也可以提供咱們的項目網頁給用戶使用，可是每次有代碼更新的時候，都須要本地 push 代碼到遠端倉庫，而後登陸 server pull 代碼再打包代碼，重複性的工做能省則省，工具都是懶人發明的😆，下面懶人法寶就要登場了，一勞永逸 ~

不少公司有本身的一套前端發佈系統，並非自動部署滴，須要手動去觸發打包、部署

自動打包 & 部署基礎建設

接下咱們經過使用 Jenkins+Github+Webhook 自動打包部署項目，實現 master 分支進行提交的時候，自動執行腳本進行打包部署操做。

你們可能會疑問 Jenkins 是什麼

Jenkins 是一款開源 CI 軟件，用於自動化各類任務，包括構建、測試和部署軟件。想了解更多你們能夠去官網查看。

Webhook 又是什麼呢

一般稱其爲鉤子（不是 React Hook，hhhh~~），經過定製 Webhook 來檢查 Github 上的各類事件，最多見的就是 push 事件了。

若是你設置了一個監聽 push 事件的 Webhook，每次你的項目有任何提交，這個 Webhook 都會被觸發，這時 Github 會發送一個 HTTP POST 請求到你配置好的地址。

概念先簡單瞭解下（具體的自行 Google），接下來咱們要正式開始了哦~

部署 server

咱們第一步先來部署 server，首先要登陸你的 server（我好像廢話了，哈哈😝）。

接下來爲你的 server 安裝 Jenkins。由於 jenkins 的運行須要 JDK 環境，因此咱們還須要在本身的 server 上安裝 java 運行環境。

安裝 java 運行環境

查看你的 server 是否安裝了 JDK

java -version
複製代碼

若是出現以上信息則表示沒有按照 JDK。能夠經過 yum 安裝，步驟以下

執行命令 yum -y list java* 查看可安裝 java 版本

選擇一個 java 版本進行安裝 yum install java-1.8.0-openjdk-devel.x86_64，根據提示完成安裝。

輸入java -version 查看是否安裝成功

安裝 Jenkins

yum 的 repos 中默認是沒有 Jenkins 的，須要先將 Jenkins 存儲添加到 yum repos

sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
複製代碼

執行 yum install jenkins 安裝 Jenkins

修改 Jenkins 配置

默認狀況下 Jenkins 是使用 Jenkins 用戶啓動的，可是這個用戶目前系統是沒有賦予權限的，因此咱們將啓動用戶改成 root，另外 Jenkins 默認端口 8080，若是你沒有其餘服務佔用 8080 端口能夠不修改。

vim /etc/sysconfig/jenkins
複製代碼

修改配置

JENKINS_USER = 'root'
JENKINS_PORT = '8001'
複製代碼

執行 service jenkins start 啓動 Jenkins 服務

出現上述信息表示 Jenkins 啓動成功，在瀏覽器輸入*ip:8001訪問 Jenkins 登陸頁面。

然而~然而~一直在轉圈圈，訪問不了，我是誰我在哪發生了什麼❓

懵逼 1 秒鐘，開始排查問題

首先確認下 Jenkins 是否真的啓動成功了，執行 systemctl status jenkins 查看 Jenkins 狀態

Jenkins 運行正常，爲什麼沒法訪問呢，噢！！！

再來檢測下防火牆，執行systemctl status firewalld查看防火牆狀態

防火牆未啓動，好的，沒問題，讓咱們來啓動它 systemctl start firewalld

防火牆已啓動，讓咱們來查看防火牆有沒有開放咱們設置的 Jenkins 端口，執行 firewall-cmd --list-ports 發現沒有 Jenkins 的端口，沒有也沒問題咱們開啓就行了

firewall-cmd --permanent --zone=public --add-port=80/tcp  // 開啓已配置好的Jenkins端口
systemctl reload firewalld // 重啓防火牆，重啓上一步纔會生效
複製代碼

當我滿懷但願，信誓旦旦去訪問時，又心痛了~~~

接着查看 aliyun 防火牆，aliyun server 自帶防火牆，默認只開發 80 端口，咱們用了其餘端口須要去 aliyun 防火牆開放端口才行

再試試，淚目~~ 總算能夠訪問了

配置 Jenkins

Jenkins 給咱們提供了網頁配置界面愛了愛了

進入登陸頁面後，Jenkins 提示咱們須要輸入超級管理員密碼進行解鎖。根據提示，咱們能夠在/var/lib/jenkins/secrets/initialAdminPassword文件裏找到密碼。

tail /var/lib/jenkins/secrets/initialAdminPassword
複製代碼

找到密碼後，複製密碼，粘貼到 Jenkins 解鎖頁面，點擊Continue繼續初始化配置。短暫的等待後，進入插件安裝頁面。

這裏咱們點擊的 Install suggested plugins，安裝默認插件，固然你也能夠點擊另外一個按鈕安裝指定的插件。點擊後，頁面進入了插件下載安裝頁面。

所有安裝完成後，頁面自動進入管理員帳戶註冊頁面。

輸完信息點擊 save and finish，進入 Jenkins 歡迎頁（此圖省了），而後點擊 start using Jenkins，進入 Jenkins 主頁面。

至此，Jenkins 基本配置完成，你們不要慌~不要慌~，還有事情要作，接下來咱們還要對 Jenkins 全局作些其餘配置。

在 Github 插件的配置中，點擊「高級」按鈕，啓用 Hook URL，並將 Hook URL 複製出來，並保存剛纔的設置，這樣他讓它能夠接受 Github 的請求。

配置 Github 倉庫

由於 Github 常常有代碼處理動做，須要配置 Github 項目倉庫在處理這些動做的同時會發送信號至 Jenkins，才能觸發 Jenkins 自動構建。

在"Webhooks"選項卡中，點擊"Add webhook"，將在 Jenkins 生成的 Hook URL 填入至 Payload URL 中，另外，選擇自主事件，events 裏選擇了 pushes，當 Github 收到了客戶端有 Push 動做時，會觸發一個 Hook