iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 30
1
Modern Web

今晚,我想來點Blazor系列 第 30

Day 30:Deploy To GitHub Pages

在我們辛苦開發完專案後,需要找一個網路空間,把我們的網站佈署上去來提供服務,因此這篇我們將使用Github Pages這個免費的靜態網頁託管服務,來佈署Todolist專案,而佈署的過程,將使用Github Actions這個CI/CD服務來進行。

Github Pages

Github Pages是一個免費的網頁託管服務,可以將它當作它是一個靜態網頁的網站伺服器,適合放一些簡單的宣傳網頁,或是Demo小專案使用,因為是免費的緣故,所以自然有一些使用上的限制:

  1. 僅提供靜態頁面內容,不包含任何後端程式語言的檔案
  2. 不能支援如.htaccess之類的密碼驗證功能,亦即不能針對gh-pages的頁面設定密碼保護。
  3. 所有的Github Pages內容都是公開的,不能設定為Private
  4. 檔案庫大小限制為1GB
  5. 每月頻寬限100GB
  6. 每小時最多能提交10個版本的檔案

GitHub Actions

GitHub Actions是一套CI/CD的服務,藉由Action yml檔的步驟,可讓我們放在GitHub repository中的專案進行建置、測試、佈署。透過這個自動化流程,以後將程式碼push到master後,就會自動佈到Github Pages上了。

接下來開始佈署Todolist專案吧到GitHub Pages吧!大致上分為以下步驟:

  1. personal access token
  2. 撰寫yml檔
  3. 開啟GitHub Pages設定

personal access token

peersonal settings / Developer Settings內,左側選單選擇Personal access tokens,輸入token名稱,另外需要設定repo的權限,這邊我們勾選repo,選好後點擊Generate Tokenhttps://ithelp.ithome.com.tw/upload/images/20201014/201300589Zj5oXSZH0.jpg

接下來頁面上有一個綠色區塊顯示你的token,請將它記下來,因為離開這個頁面就再也看不到了。
回到repository的setting,點擊左側選單的secrets,進入後點New secret
https://ithelp.ithome.com.tw/upload/images/20201014/20130058bxnt9XItuV.jpg
將你剛剛記的token寫在Value那邊,並給這個secret一個名稱,這個名稱等一下在編輯yml檔時會用到,在點Add secret後,就完成了這個步驟
https://ithelp.ithome.com.tw/upload/images/20201014/20130058SW079PNmxo.jpg

GitHub Actions yml file

在GitHub Actions的佈署過程中,這個yml檔是最重要的了,裡面撰寫的內容就是整個建置、佈署的詳細步驟。

進入repository的Actions頁籤,可以按set up a workflow yourself,從頭開始編輯yml檔。下方提供的預設範本則會先寫好幾個必要步驟,再針對需求加上相關語法進去。
https://ithelp.ithome.com.tw/upload/images/20201014/20130058EGR8mYoUmv.jpg

這個範例所準備的yml檔完整內容如下:

name: Deploy to GitHub Pages

# 每次程式碼Push到master,執行workflow
on:
  push:
    branches: [ master ]

jobs:
  deploy-to-github-pages:
    # 使用ubuntu
    runs-on: ubuntu-latest
    steps:
    # 使用checkout actions
    - uses: actions/checkout@v2
    
    # 安裝.NET Core SDK 3.1
    - name: Setup .NET Core SDK
      uses: actions/setup-dotnet@v1.6.0
      with:
        dotnet-version: 3.1    
    
    # 執行單元測試專案
    - name: Run Unit Test 
      run: dotnet test --no-build
      
    # 發佈程式到Release資料夾
    - name: Publish .NET Core Project
      run: dotnet publish TodoBlazor/TodoBlazor.csproj -c Release -o release --nologo
    
    # 修改index.html的base href -- 從"/"改為"/TodoBlazor/"
    - name: Change base-tag in index.html from / to TodoBlazor
      run: sed -i 's/<base href="\/" \/>/<base href="\/TodoBlazor\/" \/>/g' release/wwwroot/index.html
    
    # 複製index.html內容到404.html
    - name: copy index.html to 404.html
      run: cp release/wwwroot/index.html release/wwwroot/404.html

    # 加入一個.nojekyll檔案
    - name: Add .nojekyll file
      run: touch release/wwwroot/.nojekyll
    
    # 將release/wwwroot的程式碼,push到gh-pages分支
    - name: Commit wwwroot to GitHub Pages
      uses: JamesIves/github-pages-deploy-action@3.5.9
      with:
        GITHUB_TOKEN: ${{ secrets.DeployToken }}
        BRANCH: gh-pages
        FOLDER: release/wwwroot

前幾個步驟就是安裝.NET Core sdk,再來執行單元測試,發佈到Release資料夾,後續幾個必要步驟說明如下:

    # 修改index.html的base href -- 從"/"改為"/TodoBlazor/"
    - name: Change base-tag in index.html from / to TodoBlazor
      run: sed -i 's/<base href="\/" \/>/<base href="\/TodoBlazor\/" \/>/g' release/wwwroot/index.html

佈署到GitHub Pages後的網址會是 https://{GitHubAccount}.github.io/{RepositoryName} ,而index.html的base href是"/",意味著Blazor應用程式將會將 https://{GitHubAccount}.github.io/ 當作根目錄,將導致應用程式找不到blazor.webassembly.js、css檔案等等資源,因此要將base href改為/{RepositoryName}/

# 複製index.html內容到404.html
    - name: copy index.html to 404.html
      run: cp release/wwwroot/index.html release/wwwroot/404.html

這個步驟的用意在於,如果找不到頁面的話,將會出現GitHub自己的404頁面,但我們想要的效果是出現應用程式自訂的404畫面,因此我們可以:

  1. 在專案的wwwroot底下新增404.html,一旦出現找不到頁面的狀況,GitHub Pages就會顯示這個404.html的內容
  2. 第二個方式就是如同yml檔中所寫的,在每次程式碼push到master,執行這個workflow時,會複製index.html內容到404.html到gh-pages這個分支,如果發生找不到頁面的狀況,會顯示Router元件中NotFound template的內容。
  # 加入一個.nojekyll檔案
    - name: Add .nojekyll file
      run: touch release/wwwroot/.nojekyll

jekyll是GitHub Pages預設的靜態網站產生器,它可以將我們用markdown寫好的文章轉換成html,但它有一個限制是會排除底線開頭的資料夾或檔案,這導致_framework資料夾的檔案會無法載入,blazor應用程式也執行不起來,好在GitHub Pages是允許我們可以不使用jekyll的,只要加入一個空白檔案並命名為.nojekyll即可,加入後就可以順利載入_framework中的檔案

# 將release/wwwroot的程式碼,push到gh-pages分支
    - name: Commit wwwroot to GitHub Pages
      uses: JamesIves/github-pages-deploy-action@3.5.9
      with:
        GITHUB_TOKEN: ${{ secrets.DeployToken }}
        BRANCH: gh-pages
        FOLDER: release/wwwroot

這個步驟是將發佈到release/wwwroot底下的靜態檔案,push到gh-pages分支,這邊使用的是GitHub MarketPlace中的github-pages-deploy-action,只要帶入3個參數即可:
GITHUB_TOKEN:在上述步驟完成的repo token
BRANCH: 要push過去的分支
FOLDER:此資料夾下的檔案將會push到BRANCH設定的分支
順利執行完這個yml檔,就會自動建立好gh-pages分支,並將Todolist的發佈檔commit過去。

開啟GitHub Pages設定

進到repo的setting,往下捲動頁面到GitHub Pages,設定分支為gh-pages,然後save,稍待片刻就可以看到已發佈完成的訊息。
https://ithelp.ithome.com.tw/upload/images/20201014/20130058b1rc1QybyY.jpg
點進剛剛提供的網址,可以看到我們的Todolist功能正常,完成這次的佈署作業

程式碼可參考:https://github.com/CircleLin/TodoBlazor


上一篇
Day 29:
系列文
今晚,我想來點Blazor30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言