如何将适配NodeJS的Astro SSR站点部署到Azure静态Web应用？

问题原因 #

你的Astro项目配置为SSR模式（output: "server"），使用Node.js适配器的standalone模式构建后，不会生成静态的index.html文件——这是SSR站点的正常特性，页面由服务端动态生成。但Azure静态Web Apps的默认构建检测逻辑会尝试在指定输出目录中寻找静态首页文件（如index.html），找不到就会抛出报错。

解决方案 #

修改GitHub Action工作流文件，明确告知Azure静态Web Apps这是一个SSR应用，指定服务端代码目录和静态资源目录：

1. 打开你的GitHub Action工作流文件（路径通常为.github/workflows/azure-static-web-apps-<你的应用名称>.yml）
2. 调整以下三个关键配置项：
   • app_location: 设置为项目根目录（即.），确保npm run build命令在正确的目录执行
   • api_location: 设置为dist/server，对应Astro Node standalone模式构建后服务端入口代码的存放目录
   • output_location: 设置为dist/client，对应静态资源（CSS、JS、图片等）的输出目录

修改后的工作流示例 #

jobs:
  build_and_deploy_job:
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - 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_YOUR_APP }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "."
          api_location: "dist/server"
          output_location: "dist/client"

3. 保存并提交工作流文件，重新触发部署

额外验证步骤 #

• 本地执行npm run build后，确认dist/server目录下存在服务端入口文件（通常为index.js），dist/client目录包含静态资源文件
• 部署时查看GitHub Action日志，确认Oryx构建工具已正确识别Node.js SSR应用，不再尝试寻找静态index.html

内容的提问来源于stack exchange，提问作者code-tinkerer