The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何使用 Azure Static Web Apps CLI 手動部署靜態網站應用程式

現在有越來越多純前端框架推出,但無論你用哪種前端框架,最終都還是需要後端 API 才能建構出一個完整的網站,以及提供身份驗證與授權等需求。為此微軟 Azure 推出了一個全新的服務叫做 Static Web Apps (SWA) (靜態網站應用程式),不單單讓你部署前端應用程式,還幫你搞定了 API Gateway 與身份認證等常見需求,同時還結合了前端開發常見的 API 整合功能,進一步降低前後端整合門檻。今天這篇文章我主要以 Azure Static Web Apps 的命令列工具為例 (Static Web Apps CLI),帶大家走一遍從安裝到部署的完整過程。

Static Web Apps CLI

安裝 Azure Static Web Apps CLI

  1. 安裝 Node.js LTS

    choco install nodejs-lts -y
    
  2. 安裝 Azure Static Web Apps CLI

    npm install -g @azure/static-web-apps-cli
    

建立 Azure Static Web Apps 資源

建立資源相對簡單,本文就不再贅述建立細節:

image

  1. 登入 Azure CLI

    az login
    
  2. 選擇 Subscription

    az account set -s 'Azure Sponsorship'
    
  3. 建立 Resource Group

    az group create --location 'eastasia' --resource-group 'MyResourceGroup'
    
  4. 建立 SWA app

    az staticwebapp create --location 'eastasia' --resource-group 'MyResourceGroup' --name 'MyAppName'
    

部署 Angular 應用程式到 SWA

由於 SWA 支援 30+ 套不同的前端框架,所以只要是知名的前端框架,都可以非常輕鬆的透過 SWA 進行管理,以下是體驗的過程。

  1. 建立 Angular 範例專案

    ng new demo1 --routing --style css
    cd demo1
    
  2. 初始化 SWA 設定

    由於 SWA 預設支援 Angular 前端框架,所以他會自動判定你目前的專案類型,並且自動幫你設定好所有預設值!

    swa init
    

    swa init

    這個命令會產生一個 swa-cli.config.json 檔案。

  3. 透過 SWA 進行本機開發

    swa start
    

    他背後其實就是幫你執行 npm start 而已,命令可以自行從 swa-cli.config.json 設定檔中調整!

  4. 透過 SWA 進行本機建置

    swa build
    

    他背後其實就是幫你執行 npm run build 而已,命令可以自行從 swa-cli.config.json 設定檔中調整!

  5. 透過 SWA CLI 登入 Azure

    swa login
    

    如果想重新登入其他的帳戶,可以改用以下命令:

    swa login --clear-credentials
    

    選好 tenant 與 subscription 之後,預設會在當前目錄下建立一個 .env 環境變數檔,日後在執行 swa deploy 的時候都會自動參考這個檔案。

  6. 透過 SWA 進行預覽環境部署

    你可以先測試一下部署的過程,但不會真的部署:

    swa deploy --dry-run
    

    實際部署命令

    swa deploy
    

    預設會部署到 preview 環境,並非正式的 production 環境!

  7. 透過 SWA 進行正式環境部署

    swa deploy --env production
    

部署任意 HTML 靜態檔案到 SWA

如果你只是單純的想發佈 HTML 靜態網頁,那麼你可以這樣用:

  1. 準備一個空專案

    mkdir demo2
    cd demo2
    
    # 建立一個用來存放要發佈到 SWA 的目錄
    mkdir public
    
    # 接著將網頁檔案全部放入這個 public 資料夾
    

    注意: 你不能把要部署的檔案放在專案根目錄下!

  2. 不用準備 swa-cli.config.json 設定檔,直接部署!

    Bash

    swa deploy \
      --app-location public \
      --tenant-id '76275315-xxxx-xxxx-xxxx-a329d6222150' \
      --subscription-id 'f906b2b8-xxxx-xxxx-xxxx-98933aae8ac6' \
      --env 'production'
    

    PowerShell

    swa deploy \
      --app-location public \
      --tenant-id '76275315-xxxx-xxxx-xxxx-a329d6222150' \
      --subscription-id 'f906b2b8-xxxx-xxxx-xxxx-98933aae8ac6' \
      --env 'production'
    

    上述命令由於有指定 Tenant ID 與 Subscription ID 的關係,如果當前目錄沒有 .env 環境變數檔存在的話,他會自動幫你建立該檔案,並寫入這兩個參數的值。

    image

    下次執行該命令就不用寫這麼長了:

    swa deploy --app-location public --env 'production'
    

    因為你已經指定 Tenant ID 與 Subscription ID 的關係,部署的過程中會主動問你要部署到哪一個 SWA 應用程式中,如下圖示:

    image

    如果不希望每次都輸入,那就要靠 swa init 初始化 swa-cli.config.json 設定檔!

偵錯技巧

有時候 SWA CLI 執行時可能不如預期,所以若要偵錯的話,可以嘗試加入 --verbose=silly 參數,他就可以顯示最完整的執行紀錄給你看!👍

swa deploy --app-location public --env 'production' --verbose=silly

注意事項

其實使用 Azure Static Web Apps 的最佳實務是一律透過 CI/CD 來完成部署,而非手動部署,但我個人通常在導入 CI/CD 的過程,一定會先設法能夠手動部署,確保每個細節我都能理解,以免自動化的過程中出現一些鬼打牆的事件。果不其然,手動部署的過程也確實遇到了很多問題,也都一一回報到 GitHub 列管:

另外,部署後的檔案是完全無法瀏覽的,你無法透過 FTP 或是透過 Azure Portal 查看你到底部署了什麼檔案上去,所以你基本上還是透過 CI/CD 自動化部署才是王道,這樣你才有機會從 CI/CD 的平台查看實際部署上去的檔案!👍

相關連結