GitHub Actions 自動(dòng)部署前端 Vue 項(xiàng)目

一. 概述

作為前端技術(shù)人員，如果要部署一個(gè)項(xiàng)目大體要經(jīng)過：代碼開發(fā)、代碼推送、打包dist文件、scp到服務(wù)器、服務(wù)器nginx配置、完成部署這幾個(gè)流程，現(xiàn)實(shí)中我們希望項(xiàng)目部署盡可能自動(dòng)且簡單，因此誕生了各種CI/CD工具，比如：Jenkins、gitlab ci、gitlab runner等，其實(shí)我們最熟悉的 GitHub 也提供了CI/CD 的能力：GitHub Actions,它于2019年11月正式發(fā)布，現(xiàn)已經(jīng)支持多種的語言和框架：Node.js, Python, Java, PHP, Ruby, Go, Rust, C/C++, .NET, Android, iOS.當(dāng)然在利用GitHub Actions自動(dòng)部署項(xiàng)目之前，先要利用GitHub Pages來發(fā)布我們的前端項(xiàng)目。

二. GitHub Pages

image

什么是 GitHub Pages？官網(wǎng)的介紹：Websites for you and your projects.Hosted directly from your GitHub repository. Just edit, push, and your changes are live. 說的很明確了，可以利用它,將我們托管在 GitHub 倉庫的項(xiàng)目部署為一個(gè)可以對(duì)外訪問的網(wǎng)站，免去了我們自己購買與配置服務(wù)器的麻煩。

  • 首先創(chuàng)建一個(gè)項(xiàng)目，以Vue項(xiàng)目為例，利用 Vue 腳手架創(chuàng)建一個(gè)項(xiàng)目
npm init vue@latest

這里假設(shè)你已經(jīng)熟悉了 Vue 項(xiàng)目創(chuàng)建，如果不熟悉Vue可以去查看
執(zhí)行如下命令：

> cd <your-project-name>
> npm install
> npm run dev

運(yùn)行后在瀏覽器中打開本地地址，得到如下頁面：


image
  • 在GitHub上創(chuàng)建一個(gè)新的Repository,將項(xiàng)目上傳到GitHub倉庫
git init
git add .
git commit -m "備注信息"
git remote add origin 你的遠(yuǎn)程倉庫地址
git push -u origin master
  • 配置 GitHub Actions
    回到GitHub,點(diǎn)擊Setting->Pages，看到如下界面
    image

    image

    并沒有展示網(wǎng)址，別急！此時(shí)還需要我們?nèi)バ陆ㄒ粋€(gè)名為gh-pages的分支，創(chuàng)建完成后再次打開Pages，可以看到頁面發(fā)生了變化
    image

Source: 選擇Deploy from a branch, Branch：github pages 默認(rèn)只能識(shí)別項(xiàng)目根目錄的 index 文件，我們這里選擇新建的gh-pages的root根目錄，意思是去這個(gè)分支的根目錄加載index.html文件.

  • 打包應(yīng)用，并發(fā)布到 gh-pages 分支
    打包應(yīng)用，執(zhí)行npm run build ，在項(xiàng)目根目錄下得到打包后的產(chǎn)物dist文件夾,

    image

    切換當(dāng)前分支到gh-pages,并且將原有內(nèi)容全部刪除, 最后將dist文件夾下的內(nèi)容全部拷貝到gh-pages上，push到遠(yuǎn)端.

    image

    再次點(diǎn)擊Setting->Pages ,稍等一會(huì)兒，下面出現(xiàn)了一個(gè)網(wǎng)址,這就是項(xiàng)目線上地址
    image

  • 遇到問題
    點(diǎn)擊查看網(wǎng)址，并沒有像我們預(yù)期的那樣展示頁面，而是一片空白。打開調(diào)試版查看錯(cuò)誤信息：

    image

    如果有項(xiàng)目部署經(jīng)驗(yàn)的一看就知道是怎么回事了，這是打包編譯后的文件路徑配置有問題，資源文件css、js，加載的路徑地址不對(duì)，加載的是根路徑
    https://<用戶名>.github.io/assets/index.bf782a5b.js,而我們的資源文件在/vue-pages/目錄下，所以當(dāng)然報(bào)錯(cuò)404，修復(fù)也很簡單，如果你的Vue項(xiàng)目是基于 Vite 的構(gòu)建的，需要修改vite.config.js，添加base:'./'

export default defineConfig({
  plugins: [vue(), vueJsx()],
  base:'./',// 將根路徑換成相對(duì)路徑
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
})

如果是基于webpack構(gòu)建，修改vue.config.js添加publicPath: './'.

module.exports = {
  /**
   * publicPath 默認(rèn)是 / 是根路徑，這個(gè)是指服務(wù)的根路徑：https://xxx.github.io/，發(fā)布后會(huì)從這個(gè)路徑下找 js.css 等資源，而生成的網(wǎng)站路徑是這個(gè) https://xxx.github.io/Vue-Element/，顯然是找不到的
   * 我們需要修改為 相對(duì)路徑'./' 或是‘.’ 或是 直接設(shè)置的項(xiàng)目子路徑 :/項(xiàng)目名稱/ 就可找到資源了
   */
  publicPath: './',
  outputDir: 'dist', // dist
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
...

重新打包，將dist文件夾下內(nèi)容拷貝到gh-pages分支下，并重新打開pages鏈接：https://<用戶名>.github.io/vue-pages/
成功部署！

每一次修改后都要重新打包，切換分支拷貝dist文件夾，實(shí)屬麻煩，能不能讓GitHub自動(dòng)檢測push動(dòng)作,自動(dòng)進(jìn)行打包部署嗎？那就是GitHub Actions的工作了.

三. GitHub Actions

什么是GitHub Actions?

GitHub Actions是GitHub推出的一款持續(xù)集成（CI/CD）服務(wù)，它給我們提供了虛擬的服務(wù)器資源，讓我們可以基于它完成自動(dòng)化測試、集成、部署等操作。這里簡單介紹一下它的幾個(gè)基本概念，更多內(nèi)容可以去官網(wǎng)查看

基本概念

  • Workflows（工作流程）
    持續(xù)集成的運(yùn)行過程稱為一次工作流程，也就是我們項(xiàng)目開始自動(dòng)化部署到部署結(jié)束的這一段過程可以稱為工作流程.

  • job （任務(wù)）
    一個(gè)工作流程中包含多個(gè)任務(wù)，簡單來說就是一次自動(dòng)部署的過程需要完成一個(gè)或多個(gè)任務(wù).

  • step（步驟）
    部署項(xiàng)目需要按照一個(gè)一個(gè)的步驟來進(jìn)行，每個(gè)job由多個(gè)step構(gòu)成.

  • action（動(dòng)作）
    每個(gè)步驟step可以包含一個(gè)或多個(gè)動(dòng)作，比如我們在一個(gè)步驟中執(zhí)行打包命令這個(gè)Action.

語法簡介

  • name
    name字段是workflow的名稱。如果省略該字段，默認(rèn)為當(dāng)前workflow的文件名.
name: GitHub CI
  • on
    on字段指定觸發(fā)workflow的條件，通常是某些事件,比如代碼推送push,拉取pull_request,可以是事件的數(shù)組.
on: push
or
on: [push, pull_request]

指定觸發(fā)事件時(shí)，可以限定分支或標(biāo)簽:

on:
  push:
    branches:    
      - master

上面代碼表示：只有master分支發(fā)生push事件時(shí)，才會(huì)觸發(fā)workflow.

  • jobs
    workflow的核心就是jobs，任務(wù)job放在jobs這個(gè)集合下，每一個(gè)job都有job_id，用job_id標(biāo)識(shí)一個(gè)具體任務(wù)
  • jobs.<job_id>.name
    任務(wù)說明
jobs:
  my_first_job: // job_id
    name: My first job 
  my_second_job:// job_id
    name: My second job

上面的jobs字段包含兩項(xiàng)任務(wù)，job_id分別是my_first_job和my_second_job。

  • jobs.<job_id>.runs-on
    runs-on字段指定運(yùn)行所需要的虛擬機(jī)環(huán)境,它是必填字段。
runs-on: ubuntu-18.04

GitHub Actions給我們提提供的運(yùn)行環(huán)境主要有以下幾種：
ubuntu-latest，ubuntu-18.04或ubuntu-16.04
windows-latest，windows-2019或windows-2016
macOS-latest或macOS-10.14

  • jobs.<job_id>.steps
    任務(wù)步驟，一個(gè)job可以包含多個(gè)步驟，我們需要分為多個(gè)步驟來完成這個(gè)任務(wù)，每個(gè)步驟包含下面三個(gè)字段：
jobs.<job_id>.steps.name：步驟名稱。
jobs.<job_id>.steps.run：該步驟運(yùn)行的命令或者 action。
jobs.<job_id>.steps.env：該步驟所需的環(huán)境變量。

使用介紹

  • 新建.yml文件
    點(diǎn)擊主頁Actions -> New workflow -> set up a workflow yourself，當(dāng)然你也可以選擇一個(gè)模板，點(diǎn)擊start commit則會(huì)自動(dòng)在我們項(xiàng)目目錄下新建.github/workflows/main.yml文件.
    image

整個(gè)workflow的核心就是yml腳本的書寫。如果你需要某個(gè)action，不必自己寫復(fù)雜的腳本，直接引用他人寫好的 action即可，整個(gè)持續(xù)集成過程，就變成了一個(gè)actions的組合，你可以在GitHub的官方市場，可以搜索到他人提交的actions. 下面是我們要自動(dòng)發(fā)布GitHub pages所寫的腳本：

name: CI Github Pages
on:
  #監(jiān)聽push操作
  push:
    branches:
      - main # 這里只配置了main分支，所以只有推送main分支才會(huì)觸發(fā)以下任務(wù)
jobs:
  # 任務(wù)ID
  build-and-deploy:
    # 運(yùn)行環(huán)境
    runs-on: ubuntu-latest
    # 步驟
    steps:
      # 官方action，將代碼拉取到虛擬機(jī)
      - name: Checkout  ? 
        uses: actions/checkout@v3

      - name: Install and Build   # 安裝依賴、打包，如果提前已打包好無需這一步
        run: |
          npm install
          npm run build

      - name: Deploy   # 部署
        uses: JamesIves/github-pages-deploy-action@v4.3.3
        with:
          branch: gh-pages # 部署后提交到那個(gè)分支
          folder: dist # 這里填打包好的目錄名稱

上面整個(gè)workflow的說明：

  • 只有當(dāng)main分支有新的push推送時(shí)候才會(huì)執(zhí)行整個(gè)workflow.
  • 整個(gè)workflow只有一個(gè)job,job_id是build-and-deploy,name被省略.
  • job 有三個(gè)step： 第一步是Checkout,獲取源碼，使用的action是GitHub官方的actions/checkout.
  • 第二步：Install and Build,執(zhí)行了兩條命令：npm install,npm run build,分別安裝依賴與打包應(yīng)用.
  • 第三步：Deploy 部署，使用的第三方action：JamesIves/github-pages-deploy-action@v4.3.3,它有兩個(gè)參數(shù)：分別是branch、folder，更多關(guān)于這個(gè)action的詳情可以去查看.

當(dāng)點(diǎn)擊Start commit，GitHub Actions 會(huì)自動(dòng)運(yùn)行workflow. 修改工程文字歡迎文字：

<HelloWorld msg="You did it!" />

改為:

<HelloWorld msg="GitHub Actions CI Succeed!" />

push可以點(diǎn)擊Actions查看工作流的運(yùn)行情況

image

當(dāng)這個(gè)黃色加載動(dòng)畫變成綠色后表示workflow運(yùn)行完成，看下最終效果：
image

達(dá)到了自動(dòng)部署的目的.

四. 設(shè)置Custom domain

其實(shí)經(jīng)過上面的三步已經(jīng)可以實(shí)現(xiàn)自動(dòng)部署的目的了，但是還是有點(diǎn)瑕疵。我們部署后的項(xiàng)目地址是：https://<用戶名>.github.io/vue-pages/,域名還是GitHub的,能不能改成我們自己的專屬域名呢？比如改成http://<用戶名>.com/,那就需要設(shè)置Custom domain了。

1. 購買域名

如果想將項(xiàng)目地址改成自己的專屬域名，首先需要你去購買一個(gè)域名，目前阿里云,騰訊云都支持域名的購買，搜索自己喜歡的域名直接付款就好了。

domain

2. 購買域名后，還需要我們進(jìn)行實(shí)名認(rèn)證以及備案，按照平臺(tái)的提示進(jìn)行操作就好了，這里不再涉及.

3. 進(jìn)行DNS解析配置

這里以阿里云為例，打開域名解析控制臺(tái)，點(diǎn)擊解析按鈕

image

點(diǎn)擊添加記錄按鈕，將下面兩種類型的記錄值添加上，記錄類型是：CNAME，記錄值就是你GitHub的主域名.
image

4. 設(shè)置Custom domain

返回到項(xiàng)目的GitHub pages設(shè)置頁面，將我們購買的域名添加在Custom domain中，點(diǎn)擊save，可以看到pages的地址變成了我們自己的域名，訪問它就會(huì)看到你的網(wǎng)站了.

image

五. 小結(jié)

GitHub Actions給我們提供了一站式的自動(dòng)化部署體驗(yàn)，加上Custom domain的設(shè)置，完全可以用于搭建我們的個(gè)人博客，最重要的是這完全免費(fèi). 你也可以用它來部署其他框架的項(xiàng)目，當(dāng)然這里的重點(diǎn)是的yml腳本的書寫.

一些參考：

https://pages.github.com

https://github.com/features/actions

https://blog.csdn.net/formula10000/article/details/98946098

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容