如何使用Visual Studio 2022创建并部署纯静态Azure Static Web App

一、创建纯静态项目 #

1. 打开Visual Studio 2022，点击「创建新项目」，搜索并选择「ASP.NET Core 空」模板，点击下一步。
2. 输入项目名称（如StaticPureSite），选择保存路径，点击创建。
3. 删除项目根目录下的Program.cs文件（无需后端代码）。
4. 添加静态文件：
   • 右键项目→添加→新建项→选择「HTML Page」，命名为index.html，写入基础HTML结构：

     <!DOCTYPE html>
     <html lang="zh-CN">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>纯静态页面</title>
         <link rel="stylesheet" href="site.css">
     </head>
     <body>
         <h1>Hello Azure Static Web App</h1>
         <p>这是纯静态页面，无后端代码</p>
     </body>
     </html>
     

   • 右键项目→添加→新建项→选择「Style Sheet」，命名为site.css，添加基础样式：

     body {
         font-family: Arial, sans-serif;
         background-color: #f0f0f0;
         text-align: center;
         padding: 50px;
     }
     h1 {
         color: #0078d4;
     }
     

5. 配置项目发布规则：
   右键项目→编辑项目文件（.csproj），替换为以下内容，确保静态文件会被复制到发布目录：

   <Project Sdk="Microsoft.NET.Sdk.Web">
     <PropertyGroup>
       <TargetFramework>net7.0</TargetFramework>
       <Nullable>enable</Nullable>
       <ImplicitUsings>enable</ImplicitUsings>
     </PropertyGroup>
     <ItemGroup>
       <Content Include="index.html" CopyToPublishDirectory="PreserveNewest" />
       <Content Include="site.css" CopyToPublishDirectory="PreserveNewest" />
     </ItemGroup>
   </Project>
   

6. 本地测试：按F5启动项目，确认浏览器能正常加载带样式的静态页面。

二、推送代码到GitHub #

1. 右键项目→Git→创建Git仓库，选择本地存储路径，点击「创建」。
2. 点击「发布到GitHub」，登录你的GitHub账号，创建新的远程仓库（可选择私有/公开），完成代码推送。

三、部署到Azure Static Web App #

方式1：通过Azure门户+GitHub Actions自动部署 #

1. 登录Azure门户，搜索并创建「静态Web应用」资源：
   • 选择订阅、资源组，输入应用名称，选择就近区域。
   • 在「部署详情」中，选择「GitHub」作为源，授权Azure访问你的GitHub仓库。
   • 「构建预设」选择「Custom」，「应用位置」填/（静态文件在根目录），「API位置」留空（无后端），「输出位置」留空。
   • 点击「创建」，Azure会自动生成GitHub Actions工作流并触发首次部署。
2. 部署完成后，访问Azure提供的应用URL，确认页面正常显示。

方式2：通过Visual Studio直接部署 #

1. 右键项目→发布→选择「Azure」→「Azure Static Web Apps」，点击下一步。
2. 选择已创建的Azure静态Web应用资源（或直接创建新资源），点击「发布」。
3. 等待部署完成后，验证页面访问正常。

内容的提问来源于stack exchange，提问作者Richard