你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

将 Web 应用部署到 Azure Static Web Apps

在本文中，你将使用自选的框架创建新的 Web 应用、在本地运行并部署到 Azure Static Web Apps。

先决条件

要完成本教程，您需要：

资源	说明
Azure 订阅	如果没有帐户，可以免费创建一个帐户。
Node.js	安装 20.0 或更高版本。
Azure CLI	安装 2.6x 或更高版本。

还需要文本编辑器。 若要使用 Azure，建议使用 Visual Studio Code。

你可以在自选的平台上运行在本文中创建的应用，包括：Linux、macOS、Windows 或适用于 Linux 的 Windows 子系统。

创建 Web 应用

1. 打开终端窗口。

2. 为你代码选择适当的目录，然后运行以下命令。

   npm create vite@latest swa-vanilla-demo -- --template=vanilla
   cd swa-vanilla-demo
   npm install
   npm run dev
   

   运行这些命令时，开发服务器将打印网站的 URL。 选择链接并在默认浏览器中打开。

   

2. 为你代码选择适当的目录，然后运行以下命令。

   npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults
   cd swa-angular-demo
   npm start
   

   运行这些命令时，开发服务器将打印网站的 URL。 选择链接并在默认浏览器中打开。

   

2. 为你代码选择适当的目录，然后运行以下命令。

   npm create vite@latest swa-react-demo -- --template react
   cd swa-react-demo
   npm install
   npm run dev
   

   运行这些命令时，开发服务器将打印网站的 URL。 选择链接并在默认浏览器中打开。

   

2. 为你代码选择适当的目录，然后运行以下命令。

   npm create vite@latest swa-vue-demo -- --template vue
   cd swa-vue-demo
   npm install
   npm run dev
   

   运行这些命令时，开发服务器将打印网站的 URL。 选择链接并在默认浏览器中打开。

   

3. 选择 Cmd/Ctrl+C 以停止开发服务器。

在 Azure 上创建静态 Web 应用

你可以通过 Azure 门户、 Azure CLI、 Azure PowerShell 或 Visual Studio Code（Azure Static Web Apps 扩展）创建静态 Web 应用。 本教程使用 Azure CLI。

1. 登录到 Azure CLI：

   az login
   

   默认情况下，此命令将打开浏览器以完成该过程。 如果此方法无法在你的环境中使用，Azure CLI 还支持其他登录方法。

2. 如果有多个订阅，则需要选择一个订阅。 使用以下命令可以查看当前订阅：

   az account show
   

   运行 az account set 命令选择订阅。

   az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"
   

3. 创建资源组。

   资源组用于将 Azure 资源组合在一起。

   az group create -n swa-tutorial -l centralus --query "properties.provisioningState"
   

   -n 参数表示站点名称， -l 参数是 Azure 位置名称。 命令以 --query "properties.provisioningState" 结束，因此命令仅返回成功或错误消息。

4. 在新建的资源组中创建静态 Web 应用。

   az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"
   

   -n 参数引用站点名称，-g 参数引用 Azure 资源组的名称。 请确保资源组名称与上一步中的相同。 静态 Web 应用全局分布，因此位置并不会影响应用的部署方式。

   命令配置为返回 Web 应用的 URL。 你可以将终端窗口的值复制到浏览器，以查看已部署的 Web 应用。

配置部署

1. 将以下内容和 staticwebapp.config.json 文件添加到应用程序的代码中：

   {
       "navigationFallback": {
           "rewrite": "/index.html"
       }
   }
   

   定义回退路由可以让站点为针对域发出的任何请求提供 index.html 文件。

   如果使用了源代码管理系统（例如 git），请将此文件签入系统中。

2. 在项目中安装 Azure Static Web Apps (SWA) CLI。

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

   在将站点部署到云之前，SWA CLI 可帮助你在本地开发和测试站点。

3. 为项目创建新文件并将其命名为 swa-cli.config.json。

   swa-cli.config.json 文件描述如何生成和部署站点。

   创建此文件后，可以使用 npx swa init 命令生成内容。

   npx swa init --yes
   

4. 生成用于分发的应用程序。

   npx swa build
   

5. 使用 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 文件。

1. 将 SWA_CLI_OUTPUT_LOCATION 环境变量设置为包含 index.html 文件的目录：

   bash

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

   csh

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

   PowerShell

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

   CMD

   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

删除资源组会删除它包含的所有资源。 您无法撤消此操作。

后续步骤

添加身份验证

相关内容

• 身份验证和授权
• 数据库连接
• 自定义域
• 视频系列：使用 Azure Static Web Apps 将网站部署到云中