基于Azure Pipeline与App Service的Node.js+Angular构建部署指导

一、是否需要将Angular的dist提供给Node.js项目？ #

是的，必须提供。Node.js后端通常需要通过静态资源托管（比如Express的express.static方法）指向Angular构建生成的dist目录，以此对外提供前端页面。所以必须将Angular的dist替换掉Node.js项目自身的dist目录，才能保证后端服务正确加载前端内容。

二、单条Azure Pipeline实现完整流程（Angular构建+Node.js构建+dist替换+部署） #

以下是基于YAML的Pipeline示例，假设代码仓库中Angular项目位于./frontend目录，Node.js后端位于./backend目录：

1. 基础配置 #

trigger:
  branches:
    include:
      - main  # 替换为你的目标分支

pool:
  vmImage: 'ubuntu-latest'  # 也可根据需求选择Windows镜像

2. 安装Node.js环境 #

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18.x'  # 替换为项目所需的Node.js版本
  displayName: 'Install Node.js'

3. 构建Angular项目 #

- script: |
    cd frontend
    npm install
    npm run build -- --configuration production
  displayName: 'Build Angular app'

4. 替换Node.js项目的dist目录 #

- script: |
    # 删除Node.js原dist目录
    rm -rf backend/dist
    # 将Angular构建产物复制到Node.js项目下（注意替换为你的Angular项目名称）
    cp -r frontend/dist/your-angular-app-name backend/dist
  displayName: 'Replace Node.js dist with Angular dist'

5. 构建Node.js后端（若为TypeScript项目需编译，纯JS项目可跳过） #

- script: |
    cd backend
    npm install
    npm run build
  displayName: 'Build Node.js backend'

6. 打包部署工件 #

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: 'backend'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/backend-with-frontend.zip'
    replaceExistingArchive: true
  displayName: 'Archive deployment package'

- publish: '$(Build.ArtifactStagingDirectory)/backend-with-frontend.zip'
  artifact: drop
  displayName: 'Publish deployment artifact'

7. 部署到Azure App Service #

- task: AzureWebApp@1
  inputs:
    azureSubscription: '你的Azure订阅连接名称'
    appName: '你的App Service名称'
    package: '$(Build.ArtifactStagingDirectory)/backend-with-frontend.zip'
  displayName: 'Deploy to Azure App Service'

三、其他可行的构建部署方法 #

1. 多阶段Pipeline拆分构建与部署 #

将流程拆分为构建阶段（同时处理Angular和Node.js的构建与dist替换）和部署阶段，可灵活适配不同环境（测试/生产），也便于复用构建好的工件。

2. Docker容器化部署 #

编写Dockerfile在容器内完成全流程，将镜像推送到Azure容器注册表（ACR）后，部署到App Service或Azure Container Apps：

# 阶段1：构建Angular
FROM node:18-alpine as build-frontend
WORKDIR /app/frontend
COPY frontend/package*.json ./
RUN npm install
COPY frontend/ .
RUN npm run build -- --configuration production

# 阶段2：构建Node.js后端并合并dist
FROM node:18-alpine as build-backend
WORKDIR /app/backend
COPY backend/package*.json ./
RUN npm install
COPY backend/ .
COPY --from=build-frontend /app/frontend/dist/your-angular-app-name ./dist
RUN npm run build

# 阶段3：运行环境
FROM node:18-alpine
WORKDIR /app
COPY --from=build-backend /app/backend/dist ./dist
COPY --from=build-backend /app/backend/package*.json ./
RUN npm install --only=production
EXPOSE 3000
CMD ["node", "dist/index.js"]

后续在Pipeline中完成镜像构建、推送ACR、部署到App Service的步骤即可。

3. 多Pipeline协作（前后端独立维护场景） #

• 单独创建Angular构建Pipeline，发布dist工件；
• 创建Node.js构建Pipeline，下载Angular的dist工件，替换自身dist后发布部署工件；
• 最后用部署Pipeline将Node.js的部署工件发布到App Service。
  这种方式适合前端、后端团队独立维护代码的场景。

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