在第21天,我會將所有的示範部署到 Github Pages,因為 Github Pages 是免費的,且可以透過 Github Actions 自動化處理。
當 Angular 應用程式不包含敏感的環境變數(例如密鑰)時,使用 ng deploy
比透過 Github Actions
更方便。當應用程式包含敏感環境變數時,我只能透過 Github Actions 在建置 Angular 應用程式時使用這些密鑰。
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/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 Action
為 Build and deployment
的來源。
點擊現況網站的連結,確認網站已成功上線與運作。
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
分支,以自動化部署流程。
確認儲存庫中的設定相同,線上網站應該能成功運行。
我使用 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/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 分支以自動化部署流程。
確認儲存庫中設定相同,線上網站應可成功運行。