通过GitLab CI/CD部署Angular到Azure静态Web应用遇异常

1. 修复Oryx检测不到平台/语言的问题 #

Oryx自动识别失败时，直接在部署命令里明确指定Angular相关路径和构建命令即可：

• 确保项目根目录存在package.json和angular.json，这是Oryx识别Angular的核心文件
• 在部署阶段的命令中添加--app-location "."（如果Angular项目就在仓库根目录），以及--app-build-command "npm run build"

2. 调整.gitlab-ci.yml配置 #

替换为以下适配的配置，按需修改占位符：

stages:
  - build
  - deploy

build:
  stage: build
  image: node:18-alpine
  script:
    - npm install
    - npm run build -- --configuration production
  artifacts:
    paths:
      - dist/

deploy:
  stage: deploy
  image: mcr.microsoft.com/azure-static-web-apps-cli:latest
  script:
    - az_static_web_apps deploy
        --name <你的Azure静态Web应用名称>
        --resource-group <你的资源组名称>
        --app-location "."
        --output-location "dist/<你的Angular项目名称>"
        --api-location ""
        --token $AZURE_STATIC_WEB_APPS_API_TOKEN

注意点：

• 替换<你的Azure静态Web应用名称>、<你的资源组名称>、<你的Angular项目名称>为实际值
• $AZURE_STATIC_WEB_APPS_API_TOKEN需在GitLab仓库的CI/CD变量中配置，从Azure静态Web应用的部署中心获取

3. 确认Angular构建输出路径 #

打开angular.json，找到architect.build.options.outputPath，比如：

"architect": {
  "build": {
    "options": {
      "outputPath": "dist/my-angular-app",
      // 其他配置
    }
  }
}

部署脚本里的--output-location必须和这个路径完全一致，否则Oryx找不到静态文件。

4. 解决部署后页面空白问题 #

空白页大多是SPA路由未配置导致的，在Angular项目根目录创建staticwebapp.config.json，内容如下：

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

将该文件提交到Git仓库，构建时会自动打包到输出目录，解决路由跳转和刷新空白的问题。同时确保构建命令使用了--configuration production，开发环境构建产物可能存在路径异常。

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