iT邦幫忙

2025 iThome 鐵人賽

DAY 22
0
Vue.js

作為 Angular 專家探索 Vue 3 和 Svelte 5系列 第 22

第21天 - 部署 Github 個人檔案專案到 Github Pages

  • 分享至 

  • xImage
  •  

在第21天,我會將所有的示範部署到 Github Pages,因為 Github Pages 是免費的,且可以透過 Github Actions 自動化處理。

當 Angular 應用程式不包含敏感的環境變數(例如密鑰)時,使用 ng deploy 比透過 Github Actions 更方便。當應用程式包含敏感環境變數時,我只能透過 Github Actions 在建置 Angular 應用程式時使用這些密鑰。

GitHub Actions 部署到 GitHub Pages

  • Vue 3 application
import { fileURLToPath, URL } from 'node:url'

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

// https://vite.dev/config/
export default defineConfig({
  base: '/vue-github-profile/',
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})
  • 建置應用程式

vite.config.ts 中,於 defineConfig 函式的物件 (object) 添加新的 base 屬性。在本機環境中,URL 是 http://localhost:4173/vue-github-profile/。否則,URL 是 https://railsstudent.github.io/vue-github-profile/

打開終端機 (terminal) 並執行 npm run build,將應用程式建置到 dist/ 目錄。接著執行 npm run preview,即可在 http://localhost:4173/vue-github-profile 預覽並測試應用程式。

  • 由 Github Actions 部署到 Github Pages

建立 .github/workflows/main.yml,用以執行建置與部署到 Github Pages 所需的命令。

應用程式需要使用 VITE_GITHUB_TOKEN 環境變數,必須在建置步驟中提供此變數。

接著,使用命令 touch 建立空白的 .nojekyll 檔案。

index.html 複製為 404.html,當使用者存取不存在的資源時,瀏覽器會呈現 404.html。建置應用程式

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main # or your default branch
  workflow_dispatch:  # Also allow manual trigger

permissions:
  id-token: write
  contents: read # You might also need other permissions like contents: read
  pages: write # If deploying to GitHub Pages

jobs:
  build-and-deploy:
    environment: 
      name: github-pages   # Specify the deployment environment here
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js (if needed for static site generator)
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Build site (example for a static site generator)
        env:
          VITE_GITHUB_TOKEN: ${{ secrets.VITE_GITHUB_TOKEN }}
        run: npm run build # or your build command

      - name: Add .nojekyll file
        run: touch dist/.nojekyll

      - name: Add 404.html file
        run: cp dist/index.html dist/404.html

      - name: Configure GitHub Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist # or the path to your built site

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

提交 yaml 檔案到 main 分支以自動化部署流程。

這時候應該會失敗,因為尚未建立 secrets.VITE_GITHUB_TOKEN
前往 https://github.com/<repo users>/<repo name>/settings/environment,確認已建立 github-pages 環境。點擊該環境名稱,確認部署分支和標籤。確保加入 main 並且只有此分支可部署到 Github Pages。

Environment secrets 中,點擊 Add environment secret 按鈕新增 VITE_GITHUB_TOKEN 變數。

對程式碼進行修改,提交變更檔案以觸發新的工作流程開始重新部署。
接著前往 https://github.com/<repo users>/<repo name>/settings/pages,選擇 Github ActionBuild and deployment 的來源。

點擊現況網站的連結,確認網站已成功上線與運作。

  • SvelteKit application

Install new dev dependencies

npm i --sav-exact --save-dev @sveltejs/adapter-static
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://svelte.dev/docs/kit/integrations
	// for more information about preprocessors
	preprocess: vitePreprocess(),

	kit: {
	     adapter: adapter({
			fallback: '404.html'
		}),
		paths: {
			base: '/svelte-github-profile'
		}
	}
};

export default config;

修改 svelte.config.ts,從 @sveltejs/adapter-static 匯入適配器(adapter)。

更新適配器設定並在 kit 屬性中新增 paths 設定。

kit: { 
    adapter: adapter({
	    fallback: '404.html'
    }),
    paths: {
	    base: '/svelte-github-profile'
    }
}

建立一個 .github/workflows/main.yml 以執行建置檔案及部署到 Github Pages 所需的命令

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main # or your default branch
  workflow_dispatch:  # Also allow manual trigger

permissions:
  id-token: write
  contents: read # You might also need other permissions like contents: read
  pages: write # If deploying to GitHub Pages

jobs:
  build-and-deploy:
    environment: 
      name: github-pages   # Specify the deployment environment here
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js (if needed for static site generator)
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Build site (example for a static site generator)
        env:
          VITE_GITHUB_TOKEN: ${{ secrets.VITE_GITHUB_TOKEN }}
        run: npm run build # or your build command

      - name: Add .nojekyll file
        run: touch build/.nojekyll

      - name: Configure GitHub Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist # or the path to your built site

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

main.yml 與其他類似,不同的是 Svelte 會自動建立 404.html,而且 Svelte 將 JavaScript 檔案編譯和複製到 build 資料夾。

將 yaml 檔案提交(commit)到 main 分支,以自動化部署流程。

確認儲存庫中的設定相同,線上網站應該能成功運行。

  • Angular 20 application

我使用 Github Actions 取代 ng deploy,因為 ng deploy 僅接受配置 (configuration,例如 development 或production)。然而,我無法將 Github personal access token 加入到 angular.json 並將該檔案提交到 Github public repository。

  • 更新 angular.json 配置
"outputPath": {
  "base": "dist",
  "browser": ""
}

在 architect -> build -> options 下新增 outputPath,使得 npm run build 會將 JavaScript 檔案編譯到 dist/

  • 使用 Github Actions 部署到 Github Pages

建立一個 .github/workflows/main.yml 來執行必要的指令,以建置檔案並部署至 Github Pages。

"scripts": {
    "ng": "ng",
    "build": "ng build",
}

package.json 中,npm run build 腳本會呼叫 ng build 來建置 Angular 應用程式。指定了以下選項參數:

define - 用 secrets.SECRET_GITHUB_TOKEN 替換環境變數 SECRET_GITHUB_TOKEN

base-href - 設定部署後應用程式的基底 URL (Base URL)。此範例中基底 URL 為 https://railsstudent.github.io/angular-github-profile/

接著,使用 touch 指令建立一個空白的 .nojekyll 檔案。

index.html 複製為 404.html,當使用者存取不存在的資源時,瀏覽器會呈現 404.html

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main # or your default branch
  workflow_dispatch:  # Also allow manual trigger

permissions:
  id-token: write
  contents: read # You might also need other permissions like contents: read
  pages: write # If deploying to GitHub Pages

jobs:
  build-and-deploy:
    environment: 
      name: github-pages   # Specify the deployment environment here
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js (if needed for static site generator)
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Build site (example for a static site generator)
        run: npm run build -- --define SECRET_GITHUB_TOKEN=\'${{ secrets.SECRET_GITHUB_TOKEN }}\' --base-href=https://railsstudent.github.io/angular-github-profile/  # or your build command

      - name: Add .nojekyll file
        run: touch dist/.nojekyll

      - name: Add 404.html file
        run: cp dist/index.html dist/404.html

      - name: Configure GitHub Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist # or the path to your built site

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

將 yaml 檔案提交(commit)到 main 分支以自動化部署流程。

確認儲存庫中設定相同,線上網站應可成功運行。將 yaml 檔案提交(commit)到 main 分支以自動化部署流程。

確認儲存庫中設定相同,線上網站應可成功運行。

資源

Github Repositories

Github Pages


上一篇
第 20 天 - Github Card 專案 第三部分 - 樣式設計
系列文
作為 Angular 專家探索 Vue 3 和 Svelte 522
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言