Vite + Vue 部署 Github Pages

(1) Github Pages - 手動 (deploy.sh)

  1. 在專案根目錄新增 deploy.sh 檔案
  2. 貼上官方文件的程式碼，兩個方法擇一使用 (取消前面的#字號)
  3. 在 vite.config.js 設定 base: '/<REPO名字>/’
  4. 在終端機輸入 sh deploy.sh 執行腳本內的程式碼
  • example: 使用 gh-pages 分支部署
    #!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# place .nojekyll to bypass Jekyll processing
echo > .nojekyll

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git checkout -B main
git add -A
git commit -m 'deploy'

// 方法1 使用main分支部署
# if you are deploying to https://woowooyong.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main

// 方法2 使用gh-pages分支部署
# if you are deploying to https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages

git push -f git@github.com:woowooyong/Vite-deploy-try.git main:gh-pages

cd -

(2) Github Pages - 手動 (subtree)

部署步驟

  1. 先在 vite.config 加上 base: "/gitHub repo名稱/"
  2. npm run build 產生dist資料夾
  3. git add dist -f （ dist 被放在預設的 gitignore 檔案）
  4. git commit -m "想要打的commit"
  5. git subtree push --prefix dist origin gh-pages

更新步驟

  • 在 Github 上刪除 ghpages 分支
  • 重新 npm run build 得到更新的 dist
  • 重新執行上面步驟 3~5

參考資料

(3) Github Pages - 自動

部署步驟

  1. 先在 vite.config 加上 base: "/GitHub Repo名稱/"
    • 程式碼範例
      // vite.config

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/Vue-week2-Loading-Alert/',
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
  2. 在 Github 上進到 Repo 的 settings
    • Actions ⇒ General ⇒ Workflow permissions
    • 選取 Read and write permissions
  3. 新增 .github 資料夾，裡面新增 workflows 資料夾，新增deploy.yml檔案
    • 貼上以下程式碼（自動部署腳本）
      name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 16

      - name: Install dependencies
        uses: bahmutov/npm-install@v1

      - name: Build project
        run: npm run build

      - name: Upload production-ready build files
        uses: actions/upload-artifact@v2
        with:
          name: production-files
          path: ./dist

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      - name: Download artifact
        uses: actions/download-artifact@v2
        with:
          name: production-files
          path: ./dist

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
  4. 把專案 push 到遠端 Repo (add, commit, push……)
  5. 會自動創建 gh-pages 分支
  6. 到 Github 上的 Pages 設定，選擇 gh-pages 分支部署

備註： 每次 push 到 main 時，都會自動 npm run build 更新 gh-pages 分支

加入環境變數

  • 在練習 unsplash API 時，想上傳 Github Pages，並隱藏我的 ACCESS_KEY

設定步驟

  1. 在 settings 裡面的 Secrets & Variables 內找到 actions
  2. 在 gh-pages 的環境下，選擇新增 Environment secrets
  3. name 要設成 VITE_ACCESS_KEY ，跟在本地的 .env 檔案內的命名相同
  4. 在 build 的指令下，宣告環境變數 env (重要!)
    • deploy.yml
      name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    env:
      VITE_ACCESS_KEY: ${{ secrets.VITE_ACCESS_KEY }}

    steps:
      - name: Checkout repo
        uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 16

      - name: Install dependencies
        uses: bahmutov/npm-install@v1

      - name: Build project
        run: npm run build

      - name: Upload production-ready build files
        uses: actions/upload-artifact@v2
        with:
          name: production-files
          path: ./dist

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      - name: Download artifact
        uses: actions/download-artifact@v2
        with:
          name: production-files
          path: ./dist

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
  5. 當腳本自動執行，輸出 dist 時，環境變數才能被帶入

備註：讀取環境變數順序

  1. 在本地端新增 .env 檔案，把敏感的變數資訊放入
    • 使用 vite 時，環境變數需要在前綴加上 VITE_ 才能被讀取 
      VITE_ACCESS_KEY = asdfadsjfkasdgjfioafghoaiud
  2. 在要用到的 vue 檔案內，呼叫環境變數
    • 範例程式碼
      import LoadingSpinner from './LoadingSpinner.vue'
const { VITE_ACCESS_KEY } = import.meta.env

export default {
  components: { LoadingSpinner },
  data() {
    return {
      url: 'https://api.unsplash.com/photos/random',
      key: VITE_ACCESS_KEY,
      photoUrl: '',
      loadingNow: true
    }
  },
  3. 要上傳時，先到 Github 的 Repo 內設定 secret，變數名 VITE_ACCESS_KEY
  4. 在 Github Actions 自動執行時，把設定的 secret 帶入 build 出來的 dist
  5. 完成使用 Github 設定的環境變數 ⇒ 取代本地的.env 內的變數

參考資料

# Vue # Vite # GithubPages