如何在单个Azure App Service中托管Django+React与Express JS服务

核心思路 #

通过Docker Compose编排多服务+反向代理实现同一App Service下的多服务共存，用Nginx作为统一入口转发请求到不同服务，避免端口冲突和域名变更。

方案1：Docker Compose + Nginx反向代理 #

这是最稳定的实现方式，通过容器编排将三个服务（React+Django、Express、Nginx）打包部署到同一App Service。

步骤1：编写Docker Compose配置文件 #

创建docker-compose.yml，定义三个服务并配置内部网络：

version: '3.8'

services:
  # React+Django服务（假设内部端口8000）
  django-react:
    build: ./django-react # 指向你的React+Django项目目录
    environment:
      - DJANGO_SETTINGS_MODULE=your_project.settings.prod
    networks:
      - app-network

  # Express服务（内部端口3000）
  express:
    build: ./express # 指向你的Express项目目录
    networks:
      - app-network

  # Nginx反向代理（对外暴露80端口，对接Azure App Service）
  nginx:
    build: ./nginx # 指向Nginx配置目录
    ports:
      - "80:80"
    depends_on:
      - django-react
      - express
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

步骤2：配置Nginx反向代理规则 #

在Nginx目录下创建nginx.conf，设置路由转发规则：

server {
    listen 80;
    server_name localhost;

    # 根路径转发到React+Django前端/后端
    location / {
        proxy_pass http://django-react:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme; # 保留HTTPS协议头
    }

    # 特定前缀转发到Express服务（比如/express/*）
    location /express/ {
        proxy_pass http://express:3000/; # 结尾的/避免路径拼接错误
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Django API路由（如果有单独的API前缀）
    location /api/ {
        proxy_pass http://django-react:8000/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

步骤3：编写各服务的Dockerfile #

• React+Django的Dockerfile：构建React静态文件，用Gunicorn启动Django

# 前端构建阶段
FROM node:18-alpine as build-frontend
WORKDIR /app/frontend
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 后端运行阶段
FROM python:3.11-slim
WORKDIR /app/backend
COPY requirements.txt ./
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
# 复制前端构建产物到Django静态目录
COPY --from=build-frontend /app/frontend/build /app/backend/staticfiles

EXPOSE 8000
CMD ["gunicorn", "--bind", "0.0.0.0:8000", "your_project.wsgi:application"]

• Express的Dockerfile：

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

• Nginx的Dockerfile：

FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf

步骤4：部署到Azure App Service #

1. 在Azure Portal进入目标App Service，切换到容器设置
2. 选择Docker Compose，上传本地的docker-compose.yml文件，或指向Docker Hub的镜像仓库
3. 配置环境变量（如Django的SECRET_KEY、数据库连接字符串等）
4. 启动部署，Azure会自动拉取镜像并启动所有服务

方案2：Django内置反向代理（轻量方案） #

如果不想额外引入Nginx，可以用Django的反向代理中间件转发请求到Express。

步骤1：安装反向代理依赖 #

pip install django-revproxy

步骤2：配置Django路由 #

在urls.py中添加Express服务的代理路由：

from revproxy.views import ProxyView

urlpatterns = [
    # 原有路由
    path('admin/', admin.site.urls),
    # 转发/express/*路径到Express服务
    path('express/', ProxyView.as_view(upstream='http://express:3000/')),
]

步骤3：Docker Compose配置 #

只需在原有Django+React的compose文件中添加Express服务，确保两者在同一网络：

version: '3.8'

services:
  django-react:
    build: ./django-react
    environment:
      - DJANGO_SETTINGS_MODULE=your_project.settings.prod
    ports:
      - "80:8000"
    networks:
      - app-network

  express:
    build: ./express
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

关键注意事项 #

• 端口冲突：各服务使用不同内部端口，仅Nginx或Django对外暴露80端口
• SSL证书：Azure App Service会自动处理HTTPS，只需确保反向代理保留X-Forwarded-Proto头
• 网络访问：Docker Compose默认桥接网络允许服务通过服务名（如express:3000）互相访问
• 资源配额：同一App Service的容器共享资源，需确保服务总占用不超过实例配额

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