前端項目自動化部署——超詳細教程（Jenkins、Github Actions）

時間  2020-10-27
標籤 前端 node linux git github web shell 數據庫 express npm 欄目 測試自動化 简体版
原文   原文鏈接

本教程主要講解了怎麼使用 Jenkins 和 Github Actions 部署前端項目。前端

  1. 第一部分是使用 Gitea 配置局域網 git 服務器，再使用 Jenkins 將 Gitea 下的項目部署到局域網服務器。
  2. 第二部分是使用 Github Actions 將 Github 項目部署到 Github Page 和阿里雲。

閱讀本教程並不須要你提早了解 Jenkins 和 Github Actions 的知識，只要按照本教程的指引，就可以實現自動化部署項目。node

PS：本人所用電腦操做系統爲 windows，即如下全部的操做均在 windows 下運行。其餘操做系統的配置大同小異，不會有太大差異。linux

Gitea + Jenkins 自動構建前端項目並部署到服務器

Gitea 用於構建 Git 局域網服務器，Jenkins 是 CI/CD 工具，用於部署前端項目。git

配置 Gitea

  1. 下載 Gitea，選擇一個喜歡的版本，例如 1.13，選擇 gitea-1.13-windows-4.0-amd64.exe 下載。
  2. 下載完後，新建一個目錄（例如 gitea），將下載的 Gitea 軟件放到該目錄下，雙擊運行。
  3. 打開 localhost:3000 就能看到 Gitea 已經運行在你的電腦上了。
  4. 點擊註冊，第一次會彈出一個初始配置頁面，數據庫選擇 SQLite3。另外把 localhost 改爲你電腦的局域網地址，例如個人電腦 IP 爲 192.168.0.118。

在這裏插入圖片描述
在這裏插入圖片描述

  1. 填完信息後，點擊當即安裝，等待一會，便可完成配置。
  2. 繼續點擊註冊用戶，第一個註冊的用戶將會成會管理員。
  3. 打開 Gitea 的安裝目錄，找到 custom\conf\app.ini，在裏面加上一行代碼 START_SSH_SERVER = true。這時就可使用 ssh 進行 push 操做了。

在這裏插入圖片描述

  1. 若是使用 http 的方式沒法克隆項目，請取消 git 代理。
git config --global --unset http.proxy
git config --global --unset https.proxy

配置 Jenkins

  1. 須要提早安裝 JDK，JDK 安裝教程網上不少，請自行搜索。
  2. 打開 Jenkins 下載頁面。

在這裏插入圖片描述

  1. 安裝過程當中遇到 Logon Type 時，選擇第一個。

在這裏插入圖片描述

  1. 端口默認爲 8080，這裏我填的是 8000。安裝完會自動打開 http://localhost:8000 網站，這時須要等待一會，進行初始化。
  2. 按照提示找到對應的文件（直接複製路徑在個人電腦中打開），其中有管理員密碼。

在這裏插入圖片描述

  1. 安裝插件，選擇第一個。

在這裏插入圖片描述

  1. 建立管理員用戶，點擊完成並保存，而後一路下一步。

在這裏插入圖片描述

  1. 配置完成後自動進入首頁，這時點擊 Manage Jenkins -> Manage plugins 安裝插件。

在這裏插入圖片描述

  1. 點擊 可選插件，輸入 nodejs，搜索插件，而後安裝。
  2. 安裝完成後回到首頁，點擊 Manage Jenkins -> Global Tool Configuration 配置 nodejs。若是你的電腦是 win7 的話，nodejs 版本最好不要過高，選擇 v12 左右的就行。

在這裏插入圖片描述

建立靜態服務器

  1. 創建一個空目錄，在裏面執行 npm init -y，初始化項目。
  2. 執行 npm i express 下載 express。
  3. 而後創建一個 server.js 文件，代碼以下：
const express = require('express')
const app = express()
const port = 8080

app.use(express.static('dist'))

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

它將當前目錄下的 dist 文件夾設爲靜態服務器資源目錄，而後執行 node server.js 啓動服務器。github

因爲如今沒有 dist 文件夾，因此訪問網站是空頁面。
在這裏插入圖片描述
不過不要着急，一會就能看到內容了。web

自動構建 + 部署到服務器

  1. 下載 Jenkins 提供的 demo 項目 building-a-multibranch-pipeline-project，而後在你的 Gitea 新建一個倉庫，把內容克隆進去，並提交到 Gitea 服務器。

在這裏插入圖片描述

  1. 打開 Jenkins 首頁，點擊 新建 Item 建立項目。

在這裏插入圖片描述

  1. 選擇源碼管理，輸入你的 Gitea 上的倉庫地址。

在這裏插入圖片描述

  1. 你也能夠嘗試一下定時構建，下面這個代碼表示每 5 分鐘構建一次。

在這裏插入圖片描述

  1. 選擇你的構建環境，這裏選擇剛纔配置的 nodejs。

在這裏插入圖片描述

  1. 點擊增長構建步驟，windows 要選 execute windows batch command，linux 要選 execute shell。

  1. 輸入 npm i && npm run build && xcopy .\build\* G:\node-server\dist\ /s/e/y，這行命令的做用是安裝依賴，構建項目，並將構建後的靜態資源複製到指定目錄 G:\node-server\dist\ 。這個目錄是靜態服務器資源目錄。

在這裏插入圖片描述

  1. 保存後，返回首頁。點擊項目旁邊的小三角，選擇 build now。

在這裏插入圖片描述

  1. 開始構建項目，咱們能夠點擊項目查看構建過程。

在這裏插入圖片描述

  1. 構建成功，打開 http://localhost:8080/ 看一下結果。

在這裏插入圖片描述
在這裏插入圖片描述

  1. 因爲剛纔設置了每 5 分鐘構建一次，咱們能夠改變一下網站的內容，而後什麼都不作，等待一會再打開網站看看。

在這裏插入圖片描述

  1. 把修改的內容提交到 Gitea 服務器，稍等一會。打開網站，發現內容已經發生了變化。

在這裏插入圖片描述

使用 pipeline 構建項目

使用流水線構建項目能夠結合 Gitea 的 webhook 鉤子，以便在執行 git push 的時候，自動構建項目。shell

  1. 點擊首頁右上角的用戶名，選擇設置。

在這裏插入圖片描述

  1. 添加 token，記得將 token 保存起來。

在這裏插入圖片描述

  1. 打開 Jenkins 首頁，點擊 新建 Item 建立項目。

在這裏插入圖片描述

  1. 點擊構建觸發器，選擇觸發遠程構建，填入剛纔建立的 token。

在這裏插入圖片描述

  1. 選擇流水線，按照提示輸入內容，而後點擊保存。

在這裏插入圖片描述

  1. 打開 Jenkins 安裝目錄下的 jenkins.xml 文件，找到 <arguments> 標籤，在裏面加上 -Dhudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION=true。它的做用是關閉 CSRF 驗證，不關的話，Gitea 的 webhook 會一直報 403 錯誤，沒法使用。加好參數後，在該目錄命令行下輸入 jenkins.exe restart 重啓 Jenkins。

在這裏插入圖片描述

  1. 回到首頁，配置全局安全選項。勾上匿名用戶具備可讀權限，再保存。

在這裏插入圖片描述
在這裏插入圖片描述

  1. 打開你的 Gitea 倉庫頁面，選擇倉庫設置。

在這裏插入圖片描述

  1. 點擊管理 web 鉤子，添加 web 鉤子，鉤子選項選擇 Gitea。
  2. 目標 URL 按照 Jenkins 的提示輸入內容。而後點擊添加 web 鉤子。

在這裏插入圖片描述
在這裏插入圖片描述

  1. 點擊建立好的 web 鉤子，拉到下方，點擊測試推送。不出意外，應該能看到推送成功的消息，此時回到 Jenkins 首頁，發現已經在構建項目了。

在這裏插入圖片描述

  1. 因爲沒有配置 Jenkinsfile 文件，此時構建是不會成功的。因此接下來須要配置一下 Jenkinsfile 文件。將如下代碼複製到你 Gitea 項目下的 Jenkinsfile 文件。jenkins 在構建時會自動讀取文件的內容執行構建及部署操做。
pipeline {
    agent any
    stages {
        stage('Build') {
            steps {  // window 使用 bat， linux 使用 sh
                bat 'npm i'
                bat 'npm run build'
            }
        }
        stage('Deploy') {
            steps {
                bat 'xcopy .\\build\\* D:\\node-server\\dist\\ /s/e/y' // 這裏須要改爲你的靜態服務器資源目錄
            }
        }
    }
}
  1. 每當你的 Gitea 項目執行 push 操做時，Gitea 都會經過 webhook 發送一個 post 請求給 Jenkins，讓它執行構建及部署操做。

在這裏插入圖片描述

小結

若是你的操做系統是 Linux，能夠在 Jenkins 打包完成後，使用 ssh 遠程登陸到阿里雲，將打包後的文件複製到阿里雲上的靜態服務器上，這樣就能實現阿里雲自動部署了。具體怎麼遠程登陸到阿里雲，請看下文中的 《Github Actions 部署到阿里雲》 一節。數據庫

Github Actions 自動構建前端項目並部署到服務器

若是你的項目是 Github 項目，那麼使用 Github Actions 也許是更好的選擇。express

部署到 Github Page

接下來看一下如何使用 Github Actions 部署到 Github Page。npm

在你須要部署到 Github Page 的項目下，創建一個 yml 文件，放在 .github/workflow 目錄下。你能夠命名爲 ci.yml，它相似於 Jenkins 的 Jenkinsfile 文件，裏面包含的是要自動執行的腳本代碼。

這個 yml 文件的內容以下：

name: Build and Deploy
on: # 監聽 master 分支上的 push 事件
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 構建環境使用 ubuntu
    steps:
      - name: Checkout
        uses: actions/checkout@v2.3.1  
        with:
          persist-credentials: false

      - name: Install and Build # 下載依賴 打包項目
        run: |
          npm install
          npm run build

      - name: Deploy # 將打包內容發佈到 github page
        uses: JamesIves/github-pages-deploy-action@3.5.9 # 使用別人寫好的 actions
        with:  # 自定義環境變量
          ACCESS_TOKEN: ${{ secrets.VUE_ADMIN_TEMPLATE }} # VUE_ADMIN_TEMPLATE 是個人 secret 名稱，須要替換成你的
          BRANCH: master
          FOLDER: dist
          REPOSITORY_NAME: woai3c/woai3c.github.io # 這是個人 github page 倉庫
          TARGET_FOLDER: github-actions-demo # 打包的文件將放到靜態服務器 github-actions-demo 目錄下

上面有一個 ACCESS_TOKEN 變量須要本身配置。

  1. 打開 Github 網站，點擊你右上角的頭像，選擇 settings。

在這裏插入圖片描述

  1. 點擊左下角的 developer settings。

在這裏插入圖片描述

  1. 在左側邊欄中，單擊 Personal access tokens（我的訪問令牌）。

在這裏插入圖片描述

  1. 單擊 Generate new token（生成新令牌）。

在這裏插入圖片描述

  1. 輸入名稱並勾選 repo。

在這裏插入圖片描述

  1. 拉到最下面，點擊 Generate token，並將生成的 token 保存起來。

在這裏插入圖片描述

  1. 打開你的 Github 項目，點擊 settings。

在這裏插入圖片描述
點擊 secrets->new secret。
在這裏插入圖片描述
建立一個密鑰，名稱隨便填（中間用下劃線隔開），內容填入剛纔建立的 token。
在這裏插入圖片描述

在這裏插入圖片描述
將上文代碼中的 ACCESS_TOKEN: ${{ secrets.VUE_ADMIN_TEMPLATE }} 替換成剛纔建立的 secret 名字，替換後代碼以下 ACCESS_TOKEN: ${{ secrets.TEST_A_B }}。保存後，提交到 Github。

之後你的項目只要執行 git push，Github Actions 就會自動構建項目併發布到你的 Github Page 上。

Github Actions 的執行詳情點擊倉庫中的 Actions 選項查看。

在這裏插入圖片描述
在這裏插入圖片描述
具體詳情能夠參考一下個人 demo 項目 github-actions-demo。

構建成功後，打開 Github Page 網站，能夠發現內容已經發布成功。

在這裏插入圖片描述

Github Actions 部署到阿里雲

初始化阿里雲服務器

  1. 購買阿里雲服務器，選擇操做系統，我選的 ubuntu
  2. 在雲服務器管理控制檯選擇實例->更多->密鑰->重置實例密碼（一會登錄用）
  3. 選擇遠程鏈接->VNC，會彈出一個密碼，記住它，之後遠程鏈接要用（ctrl + alt + f1~f6 切換終端，例如 ctrl + alt + f1 是第一個終端）
  4. 進入後是一個命令行 輸入 root（默認用戶名），密碼爲你剛纔重置的實例密碼
  5. 登錄成功， 更新安裝源 sudo apt-get update && sudo apt-get upgrade -y
  6. 安裝 npm sudo apt-get install npm
  7. 安裝 npm 管理包 sudo npm install -g n
  8. 安裝 node 最新穩定版 sudo n stable

建立一個靜態服務器

mkdir node-server // 建立 node-server 文件夾
cd node-server // 進入 node-server 文件夾
npm init -y // 初始化項目
npm i express
touch server.js // 建立 server.js 文件
vim server.js // 編輯 server.js 文件

將如下代碼輸入進去（用 vim 進入文件後按 i 進行編輯，保存時按 esc 而後輸入 :wq，再按 enter），更多使用方法請自行搜索。

const express = require('express')
const app = express()
const port = 3388 // 填入本身的阿里雲映射端口，在網絡安全組配置。

app.use(express.static('dist'))

app.listen(port, '0.0.0.0', () => {
    console.log(`listening`)
})

執行 node server.js 開始監聽，因爲暫時沒有 dist 目錄，先不要着急。

注意，監聽 IP 必須爲 0.0.0.0 ，詳情請看部署Node.js項目注意事項。

阿里雲入端口要在網絡安全組中查看與配置。

在這裏插入圖片描述

建立阿里雲密鑰對

請參考建立SSH密鑰對和綁定SSH密鑰對 ，將你的 ECS 服務器實例和密鑰綁定，而後將私鑰保存到你的電腦（例如保存在 ecs.pem 文件）。

打開你要部署到阿里雲的 Github 項目，點擊 setting->secrets。

在這裏插入圖片描述
點擊 new secret
在這裏插入圖片描述
secret 名稱爲 SERVER_SSH_KEY，並將剛纔的阿里雲密鑰填入內容。

在這裏插入圖片描述
點擊 add secret 完成。

在你項目下創建 .github\workflows\ci.yml 文件，填入如下內容：

name: Build app and deploy to aliyun
on:
  #監聽push操做
  push:
    branches:
      # master分支，你也能夠改爲其餘分支
      - master
jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1
    - name: Install Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '12.16.2'
    - name: Install npm dependencies
      run: npm install
    - name: Run build task
      run: npm run build
    - name: Deploy to Server
      uses: easingthemes/ssh-deploy@v2.1.5
      env:
          SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
          ARGS: '-rltgoDzvO --delete'
          SOURCE: dist # 這是要複製到阿里雲靜態服務器的文件夾名稱
          REMOTE_HOST: '118.190.217.8' # 你的阿里雲公網地址
          REMOTE_USER: root # 阿里雲登陸後默認爲 root 用戶，而且所在文件夾爲 root
          TARGET: /root/node-server # 打包後的 dist 文件夾將放在 /root/node-server

保存，推送到 Github 上。

之後只要你的項目執行 git push 操做，就會自動執行 ci.yml 定義的腳本，將打包文件放到你的阿里雲靜態服務器上。

這個 Actions 主要作了兩件事：

  1. 克隆你的項目，下載依賴，打包。
  2. 用你的阿里雲私鑰以 SSH 的方式登陸到阿里雲，把打包的文件上傳（使用 rsync）到阿里雲指定的文件夾中。

若是仍是不懂，建議看一下個人 demo。

參考資料

更多文章，敬請關注

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程