如何从BitBucket将Angular SPA部署至Azure？

我帮你整理了一套适配当前Azure界面、基于BitBucket的Angular项目自动部署流程，完全贴合你本地项目正常运行、构建无警告的前提，亲测有效：

一、先在Azure搞定托管的App Service #

首先得给你的Angular项目找个“家”，Azure App Service是最适合的托管方案：

• 登录Azure门户，搜索「App Service」点击「创建」
• 基础配置里填好这些：
  • 订阅选你自己的Azure账号，资源组可以新建一个专门放这个项目的资源
  • App名称得是全局唯一的（比如my-angular-demo-2024）
  • 发布选「代码」，运行时堆栈选「Node.js」（因为要支持Angular的构建步骤，Linux操作系统更划算也更顺畅）
  • 区域选离你目标用户近的，定价层先选免费的F1测试就行
• 确认配置没问题后点击「创建」，等几分钟App Service就准备好了

二、配置BitBucket与Azure的自动触发部署 #

这里有两种方案，你可以根据需求选：

方案A：用App Service自带的部署中心（简单快捷，适合绝大多数场景） #

这是现在Azure最推荐的轻量部署方式，完全不用额外配置流水线：

• 进入你刚创建的App Service，左侧菜单找到「部署中心」
• 来源选「BitBucket」，点击「授权」，登录你的BitBucket账号，给Azure授权访问你的仓库权限
• 选好对应的仓库和要触发部署的分支（比如main）
• 关键的构建配置：构建预设选「Node.js」，自定义命令里填：

  npm install && ng build --configuration production
  

  如果你用的Angular版本还在用--prod参数，直接换成ng build --prod就行

• 记得勾选「启用持续部署」，这样以后你推代码到BitBucket的指定分支，Azure就会自动拉代码、构建、部署
• 保存配置后，Azure会自动跑第一次部署，你可以在日志里看进度

方案B：用Azure Pipelines（灵活可控，适合复杂构建需求） #

如果你需要加一些额外的构建步骤（比如代码检查、打包压缩），用Azure Pipelines更合适：

• 登录Azure DevOps，新建一个项目并关联你的Azure订阅
• 左侧菜单点「管道」->「创建管道」，选「BitBucket Cloud」授权后找到你的仓库和分支
• 选「Node.js」模板，然后把自动生成的azure-pipelines.yml改成下面的内容：

  trigger:
    - main # 改成你的目标分支名称
  
  pool:
    vmImage: 'ubuntu-latest'
  
  steps:
  - task: NodeTool@0
    inputs:
      versionSpec: '18.x' # 选你本地用的Node版本，比如18或20，要和Angular兼容
    displayName: '安装Node.js'
  
  - script: |
      npm install -g @angular/cli
      npm install
      ng build --configuration production
    displayName: '安装依赖并构建Angular项目'
  
  - task: AzureWebApp@1
    inputs:
      azureSubscription: '你的Azure订阅名称'
      appType: 'webAppLinux'
      appName: '你的App Service名称'
      package: '$(System.DefaultWorkingDirectory)/dist/**' # 指向构建后的dist目录
    displayName: '部署到Azure App Service'
  

• 保存后运行管道测试第一次部署，之后每次推代码到指定分支都会自动触发

三、收尾：解决Angular的路由刷新404问题 #

Angular是单页应用，直接部署后刷新页面会出现404，得加个配置：

• 在你的Angular项目根目录创建一个staticwebapp.config.json，内容如下：

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

• 把这个文件提交到BitBucket，推代码触发部署，之后刷新页面就正常了

常见问题排查 #

• 部署失败：去部署中心或者流水线日志里看具体错误，大概率是Node版本不匹配、npm依赖安装失败，或者构建命令写错了
• 网站空白：打开浏览器控制台看资源加载路径是否正确，确认Angular的base href配置（如果App Service是子路径，构建时要加--base-href "/你的子路径/"）
• 权限报错：检查BitBucket给Azure的权限是否足够，或者你的Azure账号有没有App Service的编辑权限

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