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 errorsset -e# buildnpm run build# navigate into the build output directorycd dist# place .nojekyll to bypass Jekyll processingecho > .nojekyll# if you are deploying to a custom domain# echo 'www.example.com' > CNAMEgit initgit checkout -B maingit add -Agit 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-pagesgit push -f git@github.com:woowooyong/Vite-deploy-try.git main:gh-pagescd -

(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.configimport { 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: Deployon:  push:    branches:      - mainjobs:  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: Deployon:  push:    branches:      - mainjobs:  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.envexport 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