使用GitHub Actions和GitHub pages實現前端專案的自動打包部署

当时明月在曾照彩云归發表於2024-04-23
Github前端

1. 引言

As we all know，前端部署專案是比較簡單的，通常情況下只需要將打包的產物（index.html、.js檔案、.css檔案等）放在Web伺服器下就🆗，這種叫靜態資源託管，成本是比較低的

那有沒有免費的靜態資源託管方案？

答曰：有，典型如：GitHub Pages、Gitee Pages、Vercel等

這裡筆者使用的是GitHub Pages，官方文件：GitHub Pages 使用入門 - GitHub 文件

現在的前端工程，通常都是基於React、Vue等前端框架，基於Vite、webpack等打包工具構建，必須要構建才能生成前端靜態資原始檔

有沒有能自動將專案打包並部署的方案？

答曰：有，如：GitHub Actions

GitHub Actions的官方文件：GitHub Actions 文件 - GitHub 文件

所以，使用GitHub Actions和GitHub Pages就能實現前端專案的自動部署，每次提交程式碼都會自動構建並更新網站

這裡筆者簡要記錄使用GitHub Actions和GitHub Pages實現Vue專案的自動構建與釋出，詳細的使用文件請參考官方文件

2. 專案準備

建立一個Vue3專案

npm create vue@latest

根據提示完成專案初始化

E:\Code>npm create vue@latest
Need to install the following packages:
  create-vue@3.10.3
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

√ 請輸入專案名稱： ... actions_pages_test
√ 是否使用 TypeScript 語法？ ... 否 / 是
√ 是否啟用 JSX 支援？ ... 否 / 是
√ 是否引入 Vue Router 進行單頁面應用開發？ ... 否 / 是
√ 是否引入 Pinia 用於狀態管理？ ... 否 / 是
√ 是否引入 Vitest 用於單元測試？ ... 否 / 是
? 是否要引入一款端到端（End to End）測試工具？ » - 使用箭頭切換按Enter√ 是否要引入一款端到端（End to End）測試工具？ » 不需要
√ 是否引入 ESLint 用於程式碼質量檢測？ ... 否 / 是
√ 是否引入 Vue DevTools 7 擴充套件用於除錯? (試驗階段) ... 否 / 是

正在初始化專案 E:\Code\actions_pages_test...

專案初始化完成，可執行以下命令：

  cd actions_pages_test
  npm install
  npm run dev

執行npm isntall後執行專案npm run dev

image

一個Vue3的初始介面，沒啥特別的

3. 建立打包部署指令碼

首先在專案裡建立.github資料夾，然後建立workflows資料夾

在workflows資料夾下建立一個.yml檔案，筆者這樣叫deploy.yml，任意名字都行

image

在剛才建立的.yml編寫打包部署的程式碼

name: Build and Deploy
on: [push]
permissions:
  contents: write
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v4

      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm ci
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: dist # The folder the action should deploy.

上面的指令碼參考自：Deploy to GitHub Pages · Actions · GitHub Marketplace

這些配置也很容易理解，這裡有一點要說明，GitHub Actions支援直接複用別人寫的指令碼，上面的actions/checkout@v4和JamesIves/github-pages-deploy-action@v4就是官方和別人倉庫使用的GitHub Actions指令碼

通常情況下，找個合適的GitHub Actions指令碼就能滿足使用

現在去GitHub建立一個空專案

image

根據空專案的提示，現在在Vue專案裡面執行Git初始化和關聯遠端倉庫並推送專案

git init
git add .
git commit -m "first commit"
git branch -M master
git remote add origin <遠端Git倉庫地址>
git push -u origin master

現在，GitHub倉庫裡應該就有了程式碼

image

Github Actions會自動執行deploy.yml裡的檔案，進行打包和部署（自動建立gh-pages分支）

此時，離釋出到網站還需要開啟GitHub Pages，開啟步驟如下圖所示

在Settings裡的Pages下配置從gh-pages分支部署網站

image

此時提交程式碼，就會自動推送到網站https://<GitHub賬戶名>.github.io/actions_pages_test/

此時還需要配置一點東西，就是Vite的打包路徑，不然資源會訪問不到

image

把這次修改推送到GitHub倉庫，就會自動觸發打包部署

image

點選右側的github-pages就能看到部署的網站

image

點選網址即可訪問

image

後續的修改，只要push到GitHub，都會自動打包部署

4. 參考資料

[1] GitHub Actions 文件 - GitHub 文件

[2] GitHub Pages 使用入門 - GitHub 文件

[3] GitHub Actions 入門教程 - 阮一峰的網路日誌 (ruanyifeng.com)

相關文章