將 Web 應用程式部署至 Azure Static Web Apps

發行項
09/18/2024

在本文中，您會使用您選擇的架構建立新的 Web 應用程式並在本機執行，然後部署至 Azure Static Web Apps。

必要條件

若要完成本教學課程，您需要：

資源	描述
Azure 訂用帳戶	如果您沒有帳戶，可以免費建立帳戶。
Node.js	安裝 20.0 版或更新版本。
Azure CLI	安裝 2.6x 版或更新版本。

您也需要文字編輯器。若要使用 Azure，建議使用 Visual Studio Code (英文)。

您可以在您選擇的平台上執行您在本文中建立的應用程式，這些平台包括：Linux、macOS、Windows 或 Windows 子系統 Linux 版。

建立 Web 應用程式

開啟終端機視窗。

為您的程式碼選取適當的目錄，然後執行下列命令。
```
npm create vite@latest swa-vanilla-demo -- --template=vanilla
cd swa-vanilla-demo
npm install
npm run dev
```
當您執行這些命令時，開發伺服器會列印您網站的 URL。選取連結，以在預設瀏覽器中開啟。

為您的程式碼選取適當的目錄，然後執行下列命令。
```
npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults
cd swa-angular-demo
npm start
```
當您執行這些命令時，開發伺服器會列印您網站的 URL。選取連結，以在預設瀏覽器中開啟。

為您的程式碼選取適當的目錄，然後執行下列命令。
```
npm create vite@latest swa-react-demo -- --template react
cd swa-react-demo
npm install
npm run dev
```
當您執行這些命令時，開發伺服器會列印您網站的 URL。選取連結，以在預設瀏覽器中開啟。

為您的程式碼選取適當的目錄，然後執行下列命令。
```
npm create vite@latest swa-vue-demo -- --template vue
cd swa-vue-demo
npm install
npm run dev
```
當您執行這些命令時，開發伺服器會列印您網站的 URL。選取連結，以在預設瀏覽器中開啟。

選取 Cmd/Ctrl+C 以停止開發伺服器。

在 Azure 上建立靜態 Web 應用程式

您可以使用 Azure 入口網站、Azure CLI (部分機器翻譯)、Azure PowerShell (英文) 或 Visual Studio Code (搭配 Azure Static Web Apps 延伸模組 (部分機器翻譯)) 來建立靜態 Web 應用程式。本教學課程使用 Azure CLI。

登入 Azure CLI：
```
az login
```
根據預設，此命令會開啟瀏覽器以完成程序。如果此方法不適用於您的環境，Azure CLI 支援各種登入方法 (部分機器翻譯)。
如果您有多個訂用帳戶，您可能需要選取訂用帳戶 (部分機器翻譯)。您可以使用下列命令來檢視目前的訂用帳戶：
```
az account show
```
若要選取訂用帳戶，您可以執行 az account set 命令。
```
az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"
```
建立資源群組。

資源群組可用來將 Azure 資源分組在一起。
```
az group create -n swa-tutorial -l centralus --query "properties.provisioningState"
```
-n 參數會參考網站名稱，-l 參數則是 Azure 位置名稱。此命令以 --query "properties.provisioningState" 結尾，因此只會傳回成功或錯誤訊息。
在新建立的資源群組中建立靜態 Web 應用程式。
```
az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"
```
-n 參數是參考網站名稱，-g 參數則是參考 Azure 資源群組名稱。請務必指定與上一個步驟相同的資源群組名稱。靜態 Web 應用程式會全域散發，因此應用程式的部署方式並不重要。

此命令已設定為傳回 Web 應用程式的 URL。您可以將值從終端機視窗複製到瀏覽器，以檢視所部署的 Web 應用程式。

針對部署來進行設定

使用下列內容將 staticwebapp.config.json 檔案新增至您應用程式的程式碼：
```
{
    "navigationFallback": {
        "rewrite": "/index.html"
    }
}
```
定義後援路由可讓網站為針對網域所提出的任何要求提供 index.html 檔案。

如果您使用原始檔控制系統 (例如 git)，請將此檔案簽入到該系統。
在您的專案中安裝 Azure Static Web Apps (SWA) CLI。
```
npm install -D @azure/static-web-apps-cli
```
SWA CLI 可協助您先在本機開發及測試網站，再將其部署至雲端。
為您的專案建立新檔案，並將其命名為 swa-cli.config.json。

swa-cli.config.json 檔案會描述如何建置和部署您的網站。

建立此檔案之後，便可以使用 npx swa init 命令來產生其內容。
```
npx swa init --yes
```
建置您的應用程式以進行散發。
```
npx swa build
```
使用 SWA CLI 登入 Azure。
```
npx swa login --resource-group swa-tutorial --app-name swa-demo-site
```
使用您在上一節中建立的相同資源群組名稱和靜態 Web 應用程式名稱。當您嘗試登入時，瀏覽器會視需要開啟以完成程序。

警告

Angular v17 和更新版本會將可散發的檔案放在您可以選擇的輸出路徑子目錄中。 SWA CLI 不知道目錄的具體位置。下列步驟說明如何正確設定此路徑。

在「dist/swa-angular-demo/browser」資料夾中，找出專案中所產生的「index.html」檔案。

將 SWA_CLI_OUTPUT_LOCATION 環境變數設定為包含「index.html」檔案的目錄：

export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"

setenv SWA_CLI_OUTPUT_LOCATION "dist/swa-angular-demo/browser"

$env:SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"

set SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"

將您的網站部署至 Azure

將程式碼部署至靜態 Web 應用程式：

npx swa deploy --env production

部署應用程式可能需要幾分鐘的時間。完成後，就會顯示網站的 URL。

部署命令的螢幕擷取畫面。

在大部分的系統上，您可以選取網站的 URL 以在預設瀏覽器中開啟。

清理資源 (選擇性)

如果您沒有要繼續進行其他教學課程，請移除 Azure 資源群組和資源：

az group delete -n swa-tutorial

當您移除資源群組時，便會刪除其包含的所有資源。這個動作無法復原。

下一步

新增驗證

共用方式為

將 Web 應用程式部署至 Azure Static Web Apps

必要條件

建立 Web 應用程式

在 Azure 上建立靜態 Web 應用程式

針對部署來進行設定

將您的網站部署至 Azure

清理資源 (選擇性)

下一步

意見反應

其他資源

共用方式為

將 Web 應用程式部署至 Azure Static Web Apps

必要條件

建立 Web 應用程式

在 Azure 上建立靜態 Web 應用程式

針對部署來進行設定

將您的網站部署至 Azure

清理資源 (選擇性)

下一步

相關內容

意見反應

其他資源