Angular+Django全栈应用Azure部署：Github Actions CI/CD报错求助

一、当前部署报错的修复步骤 #

1. 核心问题定位 #

从你的工作流配置和仓库结构来看，报错的主要原因包括：

• 工作流触发分支与推送分支不匹配（你推送到dev但工作流仅监听main）
• 未指定Django后端的子目录，导致依赖安装、打包路径错误
• 使用了过时的actions/setup-python@v1（不支持Python 3.12）
• 打包时包含了前端无关文件，干扰Azure Python运行环境的识别

2. 修复后的工作流配置 #

假设你的目录结构是：

repo-root/
├── backend/          # Django代码
│   ├── requirements.txt
│   └── ...
└── frontend/         # Angular代码
    ├── package.json
    └── ...

修改后的.github/workflows/deploy-azure.yml：

name: Full Stack Deploy to Azure

on:
  push:
    branches:
      - dev          # 匹配你实际推送的分支
  workflow_dispatch:

jobs:
  build-backend:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: ./backend  # 指定后端工作目录

    steps:
      - uses: actions/checkout@v4

      - name: Set up Python 3.12
        uses: actions/setup-python@v5  # 升级到支持3.12的版本
        with:
          python-version: '3.12'

      - name: Create virtual env and install dependencies
        run: |
          python -m venv venv
          source venv/bin/activate
          pip install --upgrade pip
          pip install -r requirements.txt

      - name: Run Django tests (可选)
        run: |
          source venv/bin/activate
          python manage.py test

      - name: Zip backend artifact
        run: zip -r ../backend-release.zip ./* -x "venv/*"

      - name: Upload backend artifact
        uses: actions/upload-artifact@v4
        with:
          name: backend-app
          path: ./backend-release.zip

  build-frontend:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: ./frontend

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20  # Angular 16+推荐的Node版本
          cache: 'npm'

      - name: Install dependencies and build Angular
        run: |
          npm ci
          npm run build -- --configuration production

      - name: Upload frontend artifact
        uses: actions/upload-artifact@v4
        with:
          name: frontend-dist
          path: ./frontend/dist/**/*

  deploy:
    runs-on: ubuntu-latest
    needs: [build-backend, build-frontend]
    environment:
      name: 'Production'
      url: ${{ steps.deploy-backend.outputs.webapp-url }}

    steps:
      - name: Download backend artifact
        uses: actions/download-artifact@v4
        with:
          name: backend-app

      - name: Unzip backend
        run: unzip backend-release.zip -d backend/

      - name: Download frontend artifact
        uses: actions/download-artifact@v4
        with:
          name: frontend-dist
          path: backend/static/frontend  # 将前端静态文件放到Django的static目录

      - name: Deploy to Azure Web App
        uses: azure/webapps-deploy@v2
        id: deploy-backend
        with:
          app-name: 'Workmayte'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_85AEAEFC8D224F25862264F17C61E0A5 }}
          package: ./backend/

3. 额外修复点 #

• 确认Azure App Service的Python版本设置为3.12（在Azure门户的App Service -> 配置 -> 常规设置中修改）
• 确保Django的settings.py中配置了静态文件路径：

  STATIC_URL = '/static/'
  STATIC_ROOT = os.path.join(BASE_DIR, 'static')
  

• 若使用自定义域名，需在Azure门户配置DNS解析

二、高效全栈部署方案推荐 #

方案1：单App Service整合部署（适合小型项目） #

将Angular构建后的静态文件托管在Django的静态服务中，通过单个App Service部署，优点是成本低、配置简单，缺点是前后端资源无法独立扩展。

方案2：分离式部署（推荐中大型项目） #

• 前端：部署到Azure Static Web Apps，支持自动构建、CDN加速、免费SSL
• 后端：部署到Azure App Service（Python环境），配置API路由
• 优势：前后端独立部署、独立扩展，Static Web Apps提供内置的API转发规则，无需额外配置CORS

分离部署的关键配置

1. 前端部署到Static Web Apps的工作流片段：

name: Deploy Angular to Static Web Apps

on:
  push:
    branches: [dev]
  workflow_dispatch:

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true
          lfs: false

      - name: Build Angular
        working-directory: ./frontend
        run: |
          npm ci
          npm run build -- --configuration production

      - name: Deploy to Azure Static Web Apps
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "./frontend/dist/<your-angular-project-name>"
          api_location: ""  # 无内置API，指向外部App Service
          output_location: ""

2. 前端路由转发配置（在Angular项目根目录创建staticwebapp.config.json）：

{
  "routes": [
    {
      "route": "/api/*",
      "rewrite": "https://<your-django-app-service>.azurewebsites.net/api/{*}"
    }
  ]
}

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