如何将ASP.NET Boilerplate Core & Angular部署至Microsoft Azure？

我来梳理下ASP.NET Boilerplate (ABP) Core + Angular 部署到Azure的完整流程，结合你已经启动的操作，把容易踩坑的细节补全：

一、后端（ASP.NET Core）部署 #

你已经创建了Web App + SQL的App Service，接下来要重点关注这些配置细节：

1. 数据库权限与连接配置 #

• 务必开启SQL数据库的Azure服务访问权限：在Azure Portal进入你的SQL数据库 → 「防火墙和虚拟网络」→ 勾选「允许Azure服务和资源访问此服务器」，否则后端无法连接数据库。
• 更新Web.Host/appsettings.production.json中的数据库连接字符串，替换成Azure SQL的官方格式：

"ConnectionStrings": {
  "Default": "Server=tcp:你的SQL服务器名.database.windows.net,1433;Initial Catalog=你的数据库名;Persist Security Info=False;User ID=数据库用户名;Password=数据库密码;MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;"
}

• 发布前建议本地用生产配置测试连接，避免发布后排查数据库问题。

2. App核心配置完善 #

你已经设置了ServerRootAddress，还要补充前端相关的关键配置：

"App": {
  "ServerRootAddress": "https://myapp-backend.azurewebsites.net/",
  "ClientRootAddress": "https://myapp-frontend.azurewebsites.net/", // 后续部署完前端后填入这个地址
  "CorsOrigins": "https://myapp-frontend.azurewebsites.net/,https://localhost:4200" // 同时包含生产前端域名和本地开发地址，方便调试
}

• CorsOrigins必须精准包含前端完整域名（带https://），否则会出现跨域请求被拦截的问题。

3. 发布后端应用 #

• 在Visual Studio右键后端项目（Web.Host）→ 选择「发布」，目标选择你已创建的Azure Web App
• 发布配置中，确认部署模式为「框架依赖」（ABP Core默认采用此模式），目标框架选择项目对应的.NET版本
• 发布完成后，访问https://myapp-backend.azurewebsites.net/swagger，如果能正常加载Swagger页面，说明后端部署成功。

二、前端（Angular）部署 #

前端需要单独部署到另一个Azure App Service，步骤如下：

1. 构建生产版本 #

在前端项目根目录打开终端，执行生产构建命令：

ng build --prod --base-href /

• --base-href /是为了确保Angular路由正常，避免页面刷新后出现404错误。

2. 部署到Azure App Service #

推荐两种简单的部署方式：

• Azure CLI部署：先安装Azure CLI并登录账号，然后运行命令（会自动创建App Service<如果未创建>并上传构建产物）：

  az webapp up --sku B1 --name myapp-frontend --html
  

• VS Code插件部署：安装「Azure App Service」插件，登录后找到你的前端App Service，右键选择「部署到Web App」，选中构建后的dist/你的项目名文件夹即可。

3. 前端API地址配置 #

修改前端项目的src/environments/environment.prod.ts，更新后端API地址：

export const environment = {
  production: true,
  apiUrl: 'https://myapp-backend.azurewebsites.net/api', // 注意要加上/api后缀，ABP后端API路由均以此开头
  appBaseUrl: 'https://myapp-frontend.azurewebsites.net/'
};

• 修改后需要重新执行生产构建命令，再重新部署到Azure。

三、常见问题排查 #

1. 跨域请求失败：检查后端appsettings.production.json中的CorsOrigins是否包含前端完整域名，同时确认后端Startup.cs中的CORS中间件配置未被注释（ABP默认已配置，但要确保生产环境启用）。
2. 后端启动失败：查看Azure Web App的「日志流」（Portal → 后端App Service → 监控 → 日志流），通常是连接字符串错误或数据库防火墙未开放导致。
3. 前端路由刷新404：在前端App Service的「配置」→「常规设置」中添加index.html为默认文档；如果是Windows环境的App Service，还需要在构建后的dist文件夹根目录添加web.config文件：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

四、优化建议 #

• 开启App Service的HTTPS强制跳转：在Portal → App Service → 「自定义域名」→ 开启「HTTPS only」
• 配置自动缩放：根据流量调整后端App Service的实例数，降低成本同时保证性能
• 启用Application Insights：为后端API添加监控，方便排查线上问题
• 前端静态资源用Azure CDN加速：提升全球用户的加载速度

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