如何将带SSR的Angular应用（含browser与server文件夹）部署到Azure SWA？

现状与核心疑问 #

我已通过GitHub Action将Angular SSR应用部署到Azure SWA，当前Action配置如下：

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main

jobs:
  build_and_deploy_job:
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true
          lfs: false
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_AMBITIOUS_ROCK_04F7A950F }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "dist/rardk-web/browser" # Built app content directory - optional
          app_build_command: "npm run prerender"
          ###### End of Repository/Build Configurations ######

疑问集中在这两行配置：

output_location: "dist/rardk-web/browser" # Built app content directory - optional
app_build_command: "npm run prerender"

我的核心需求是让动态加载的博客文章在社交媒体、Discord等平台分享时正常显示预览。本地SSR配置可正常运行，但部署后无效，推测是仅部署了/browser文件夹、未处理server文件夹导致。想确认：是否可将带SSR的Angular应用（同时配置browser和server文件夹）部署到Azure SWA？若可以，具体操作步骤是什么？

解决方案 #

1. 确认支持性 #

Azure Static Web Apps完全支持部署Angular SSR应用，需将SSR服务端代码作为SWA的API部分部署，通过API路由处理服务端渲染请求。

2. 修改GitHub Action配置 #

调整以下关键配置项：

（1）替换构建命令

将预渲染命令改为SSR完整构建命令：

app_build_command: "npm run build:ssr"

注：build:ssr是Angular CLI生成SSR项目时的默认命令，会同时生成browser客户端资源和server服务端代码目录。

（2）配置API位置

将api_location指向SSR服务端代码的输出目录：

api_location: "dist/rardk-web/server"

SWA会自动将该目录下的Node.js服务作为API运行，处理SSR请求。

（3）保留输出位置

output_location仍指向客户端静态资源目录：

output_location: "dist/rardk-web/browser"

修改后的核心配置段如下：

app_location: "/" # App source code path
api_location: "dist/rardk-web/server" # 指向SSR服务端输出目录
output_location: "dist/rardk-web/browser" # 客户端静态资源目录
app_build_command: "npm run build:ssr" # 执行SSR完整构建

3. 添加SWA路由规则 #

在项目根目录创建staticwebapp.config.json文件，配置路由转发规则，让非静态资源请求都交由SSR服务端处理：

{
  "routes": [
    {
      "route": "/*",
      "serve": "index.html",
      "statusCode": 200,
      "platform": {
        "apiRuntime": "node:20" // 需与本地SSR环境的Node.js版本一致
      }
    }
  ],
  "navigationFallback": {
    "rewrite": "/api/index.js" // 指向SWA部署后生成的服务端入口文件
  }
}

4. 验证部署 #

提交修改后的配置到GitHub，触发Action完成部署后：

• 访问博客文章链接，查看页面源代码，确认动态内容已被服务端渲染到HTML中
• 使用社交媒体分享工具测试预览是否正常显示

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