碼上歡樂
相關內容    簡體    繁體

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

本文轉載自   查看原文   2020-10-26 10:38   5492    JavaScript/ 前端/ 前端工程化

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

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

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

PS：本人所用電腦操作系統為 windows，即以下所有的操作均在 windows 下運行。其他操作系統的配置大同小異，不會有太大差別。

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

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

配置 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。

在這里插入圖片描述
在這里插入圖片描述
5. 填完信息后，點擊立即安裝，等待一會，即可完成配置。
6. 繼續點擊注冊用戶，第一個注冊的用戶將會成會管理員。
7. 打開 Gitea 的安裝目錄，找到 custom\conf\app.ini，在里面加上一行代碼 START_SSH_SERVER = true。這時就可以使用 ssh 進行 push 操作了。

在這里插入圖片描述
8. 如果使用 http 的方式無法克隆項目，請取消 git 代理。

git config --global --unset http.proxy
git config --global --unset https.proxy

配置 Jenkins

  1. 需要提前安裝 JDK，JDK 安裝教程網上很多，請自行搜索。
  2. 打開 Jenkins 下載頁面。
    在這里插入圖片描述
  3. 安裝過程中遇到 Logon Type 時，選擇第一個。

在這里插入圖片描述

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

在這里插入圖片描述
6. 安裝插件，選擇第一個。

在這里插入圖片描述

  1. 創建管理員用戶，點擊完成並保存，然后一路下一步。

在這里插入圖片描述
8. 配置完成后自動進入首頁，這時點擊 Manage Jenkins -> Manage plugins 安裝插件。

在這里插入圖片描述
9. 點擊 可選插件，輸入 nodejs，搜索插件，然后安裝。
10. 安裝完成后回到首頁，點擊 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 啟動服務器。

由於現在沒有 dist 文件夾，所以訪問網站是空頁面。
在這里插入圖片描述
不過不要着急，一會就能看到內容了。

自動構建 + 部署到服務器

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

在這里插入圖片描述
2. 打開 Jenkins 首頁，點擊 新建 Item 創建項目。
在這里插入圖片描述
3. 選擇源碼管理，輸入你的 Gitea 上的倉庫地址。
在這里插入圖片描述

  1. 你也可以嘗試一下定時構建，下面這個代碼表示每 5 分鍾構建一次。
    在這里插入圖片描述
  2. 選擇你的構建環境，這里選擇剛才配置的 nodejs。
    在這里插入圖片描述
  3. 點擊增加構建步驟，windows 要選 execute windows batch command，linux 要選 execute shell。
  4. 輸入 npm i && npm run build && xcopy .\build\* G:\node-server\dist\ /s/e/y，這行命令的作用是安裝依賴，構建項目，並將構建后的靜態資源復制到指定目錄 G:\node-server\dist\ 。這個目錄是靜態服務器資源目錄。
    在這里插入圖片描述
  5. 保存后，返回首頁。點擊項目旁邊的小三角，選擇 build now。
    在這里插入圖片描述
  6. 開始構建項目，我們可以點擊項目查看構建過程。

在這里插入圖片描述
10. 構建成功，打開 http://localhost:8080/ 看一下結果。
在這里插入圖片描述
在這里插入圖片描述
11. 由於剛才設置了每 5 分鍾構建一次，我們可以改變一下網站的內容，然后什么都不做，等待一會再打開網站看看。
在這里插入圖片描述
12. 把修改的內容提交到 Gitea 服務器，稍等一會。打開網站，發現內容已經發生了變化。
在這里插入圖片描述

使用 pipeline 構建項目

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

  1. 點擊首頁右上角的用戶名，選擇設置。
    在這里插入圖片描述

  2. 添加 token，記得將 token 保存起來。
    在這里插入圖片描述

  3. 打開 Jenkins 首頁，點擊 新建 Item 創建項目。

在這里插入圖片描述
4. 點擊構建觸發器，選擇觸發遠程構建，填入剛才創建的 token。
在這里插入圖片描述
5. 選擇流水線，按照提示輸入內容，然后點擊保存。

在這里插入圖片描述
6. 打開 Jenkins 安裝目錄下的 jenkins.xml 文件，找到 <arguments> 標簽，在里面加上 -Dhudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION=true。它的作用是關閉 CSRF 驗證，不關的話，Gitea 的 webhook 會一直報 403 錯誤，無法使用。加好參數后，在該目錄命令行下輸入 jenkins.exe restart 重啟 Jenkins。

在這里插入圖片描述
7. 回到首頁，配置全局安全選項。勾上匿名用戶具有可讀權限，再保存。
在這里插入圖片描述
在這里插入圖片描述

  1. 打開你的 Gitea 倉庫頁面，選擇倉庫設置。
    在這里插入圖片描述
  2. 點擊管理 web 鈎子，添加 web 鈎子，鈎子選項選擇 Gitea。
  3. 目標 URL 按照 Jenkins 的提示輸入內容。然后點擊添加 web 鈎子。

在這里插入圖片描述
在這里插入圖片描述
11. 點擊創建好的 web 鈎子，拉到下方，點擊測試推送。不出意外，應該能看到推送成功的消息，此時回到 Jenkins 首頁，發現已經在構建項目了。
在這里插入圖片描述
12. 由於沒有配置 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 也許是更好的選擇。

部署到 Github Page

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

在你需要部署到 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。
    在這里插入圖片描述
  2. 點擊左下角的 developer settings。
    在這里插入圖片描述
  3. 在左側邊欄中，單擊 Personal access tokens（個人訪問令牌）。
    在這里插入圖片描述
  4. 單擊 Generate new token（生成新令牌）。
    在這里插入圖片描述
  5. 輸入名稱並勾選 repo。
    在這里插入圖片描述
  6. 拉到最下面，點擊 Generate token，並將生成的 token 保存起來。

在這里插入圖片描述
7. 打開你的 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。

ci.yml 配置文件講解

  1. name，表示這個工作流程（workflow）的名稱。
  2. on，表示監聽的意思，后面可以加上各種事件，例如 push 事件。

下面這段代碼表示要監聽 master 分支的 push 事件。當 Github Actions 監聽到 push 事件發生時，它就會執行下面 jobs 定義的一系列操作。

name: Build app and deploy to aliyun
on:
  #監聽push操作
  push:
    branches:
      # master分支，你也可以改成其他分支
      - master
jobs:
...
  1. jobs，看字面意思就是一系列的作業，你可以在 jobs 字段下面定義很多作業，例如 job1、job2 等等，並且它們是並行執行的。
jobs:
  job1:
  	...
  job2:
  	...
  job3:
	...

回頭看一下 ci.yml 文件，它只有一個作業，即 build，作業的名稱是自己定義的，你叫 good 也可以。

  1. runs-on，表示你這個工作流程要運行在什么操作系統上，ci.yml 文件定義的是最新穩定版的 ubuntu。除了 ubuntu，它還可以選擇 Mac 或 Windows。

  2. steps，看字面意思就是一系列的步驟，也就是說這個作業由一系列的步驟完成。例如先執行 step1，再執行 step2...

setps 步驟講解

setps 其實是一個數組，在 YAML 語法中，以 - 開始就是一個數組項。例如 ['a', 'b', 'c'] 用 YAML 語法表示為：

- a
- b
- c

所以 setps 就是一個步驟數組，從上到下開始執行。從 ci.yml 文件來看，每一個小步驟都有幾個相關選項：

  1. name，小步驟的名稱。
  2. uses，小步驟使用的 actions 庫名稱或路徑，Github Actions 允許你使用別人寫好的 Actions 庫。
  3. run，小步驟要執行的 shell 命令。
  4. env，設置與小步驟相關的環境變量。
  5. with，提供參數。

綜上所述，ci.yml 文件中的 setps 就很好理解了，下面從頭到尾解釋一邊：

    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
  1. 使用 actions/checkout@v1 庫克隆代碼到 ubuntu 上。
  2. 使用 actions/setup-node@v1 庫安裝 nodejs，with 提供了一個參數 node-version 表示要安裝的 nodejs 版本。
  3. 在 ubuntu 的 shell 上執行 npm install 下載依賴。
  4. 執行 npm run build 打包項目。
  5. 使用 easingthemes/ssh-deploy@v2.1.5 庫，這個庫的作用就是用 SSH 的方式遠程登錄到阿里雲服務器，將打包好的文件夾復制到阿里雲指定的目錄上。

從 env 上可以看到，這個 actions 庫要求我們提供幾個環境變量：

  1. SSH_PRIVATE_KEY: 阿里雲密鑰對中的私鑰（需要你提前寫在 github secrets 上），
  2. ARGS: '-rltgoDzvO --delete'，沒仔細研究，我猜是復制完文件就刪除掉。
  3. SOURCE：打包后的文件夾名稱
  4. REMOTE_HOST: 阿里雲公網 IP 地址
  5. REMOTE_USER: 阿里雲服務器的用戶名
  6. TARGET: 你要拷貝到阿里雲服務器指定目錄的名稱

如果你想了解一下其他 actions 庫的實現，可以直接復制 actions 庫的名稱去搜索引擎搜索一下，例如搜索 actions/checkout 的結果為：

都看到這了，給個贊再走吧。

參考資料

更多文章，敬請關注


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jenkins之自動化部署github上maven項目 Jenkins 自動化部署入門詳細教程 Jenkins自動化部署入門詳細教程 GitHub Actions教程 使用selenium自動化 前端 Jenkins 自動化部署 自動化部署（一）jenkins+github+maven+docker(通過Dockerfile腳本部署項目) Ansible自動化部署詳細教程 新手入門Jenkins自動化部署入門詳細教程 Jenkins+SVN 前端自動化部署 【分享】Jenkins自動化部署全套視頻教程
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM