github actions自動部署

zonglinlee發表於2021-04-04
Github

github主頁

每個GitHub賬號擁有一個主頁站點和無數個專案站點

You get one site per GitHub account and organization, and unlimited project sites.

部署的時候需要注意公共路徑的配置，否則會出現 404

If you are not using a custom domain name, then do not forget to specify that your project is not hosted at the server root.

// vue 專案，在部署的時候需要加入倉庫字首作為publicPath
module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/repository-name/'
        : '/'
}
// react專案在package.json中加入homepage欄位，並更換使用者名稱和倉庫名稱
"homepage":"https://yourusername.github.io/repository-name"
複製程式碼

github flow

在專案根目錄下建立 .github/workflows/ 路徑，其中配置一個 yaml檔案，檔名任意，在push操作之後，GitHub就會自動進行部署

github actions

GitHub持續部署就是一步一步執行actions的過程，你不用自己編寫actions檔案，GitHub官方維護了一個 actions市場

每個 action 就是一個獨立指令碼，因此可以做成程式碼倉庫，使用userName/repoName的語法引用 action。比如，actions/setup-node就表示github.com/actions/setup-node這個倉庫，它代表一個 action，作用是安裝 Node.js。事實上，GitHub 官方的 actions 都放在 github.com/actions 裡面。 既然 actions 是程式碼倉庫，當然就有版本的概念，使用者可以引用某個具體版本的 action。下面都是合法的 action 引用，用的就是 Git 的指標概念.

actions/setup-node@74bc508 # 指向一個 commit
actions/setup-node@v1.0    # 指向一個標籤
actions/setup-node@master  # 指向一個分支
複製程式碼

github flow 配置demo

name: buildAndDeploy.
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      - name: step one
        # Uses the default branch of a public repository
        # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
        uses: actions/checkout@v2 
        with:
          persist-credentials: false
      - name: Install and Build
        run: |
          npm install
          npm run build
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # token生成見下方參考連結
          BRANCH: project-pages
          FOLDER: dist
複製程式碼

參考連結

相關文章