Azure 靜態 Web 應用程式中間件

Qwik City Azure 靜態 Web 應用程式中間件允許您將 Qwik City 連接到 Azure 靜態 Web 應用程式。

安裝

如需整合 azure-swa 轉接器，請使用 add 命令

npm run qwik add azure-swa

轉接器會在 adapters/ 目錄中新增一個 vite.config.ts，並且會建立一個新的進入點檔案，例如

└── adapters/
    └── azure-swa/
        └── vite.config.ts
└── src/
    └── entry.azure-swa.tsx

此外，在 package.json 中，build.server 和 deploy 腳本將會更新。

生產環境建置

若要建置應用程式的生產環境版本，請使用 build 命令，這個命令會自動執行 npm run build.server 和 npm run build.client

npm run build

部署至 Azure

使用 npm run qwik add azure-swa 安裝整合後，專案即可部署至 Azure 靜態 Web 應用程式。

有三種部署方式

1. 使用 靜態 Web 應用程式 CLI 部署

   您可以使用以下命令從本機環境部署應用程式

   npx swa deploy

   這將會啟動一個精靈，引導您完成登入和部署至 Azure 的過程。

2. 從 GitHub 部署

   您可以透過 GitHub 部署應用程式。建立 Git 存放庫，提交所有程式碼，然後將您的分支發佈至 GitHub。

   透過 Azure 入口網站建立 Azure 靜態 Web 應用程式，並在部署詳細資料中選擇 GitHub 存放庫。當系統提示您輸入建置詳細資料時，請選擇「自訂」，並設定下列值

   • 應用程式位置: "."
   • API 位置: "./azure-functions"
   • 輸出位置: "./dist"

   此設定將會在您的存放庫中建立 GitHub 工作流程。透過此工作流程，每當將變更推送或合併至主要分支時，您的應用程式就會自動部署。

   必須調整產生的工作流程檔案，方法是在「存放庫/建置設定」區塊中新增以下內容

   skip_api_build: true

   如需詳細資訊，請參閱 Azure 靜態 Web 應用程式快速入門。

3. 從任何 CI 系統部署

   您可以使用任何 CI 系統部署至 Azure 靜態 Web 應用程式。將您的 Azure SWA 部署權杖設定為 SWA_CLI_DEPLOYMENT_TOKEN 環境變數。完成後，您就可以在管線中執行下列命令

   swa deploy ./dist --api-location ./azure-functions --env production

請注意，您需要一個 Azure 帳戶 才能完成此步驟！