Azure App Service中Sidecar托管后端查询出现ERR_CONNECTION_REFUSED怎么办？

更新 #

最终未解决Sidecar容器间的通信问题，改为将API单独部署为独立的App Service后，问题得到解决。

原问题与分析 #

在Azure App Service中部署Django+GraphQL后端（Sidecar容器）和Vue+Apollo前端（主容器）时，前端调用后端API出现ERR_CONNECTION_REFUSED错误，本地Docker Compose运行正常。

核心误区 #

前端代码运行在用户浏览器中，而非Azure的前端容器内，因此Apollo配置中的http://localhost:8080/graphql指向的是用户本地机器，而非Azure上的后端Sidecar容器——这是导致连接被拒绝的根本原因。

尝试过的无效操作 #

• 修改uri为localhost:8000：浏览器不允许前端直接访问localhost（安全限制）；
• 修改uri为<app-url>/graphql：未配置App Service的路径路由规则，后端API未暴露，返回404。

相关配置参考 #

Apollo配置

import {
    ApolloClient,
    InMemoryCache,
} from "@apollo/client/core";
import { createApolloProvider } from "@vue/apollo-option";
import createUploadLink from "apollo-upload-client/createUploadLink.mjs";

const httpLink = createUploadLink({
  uri: "http://localhost:8080/graphql",
});

const cache = new InMemoryCache();

export const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
});

export const ApolloProvider = createApolloProvider({
  defaultClient: apolloClient,
});

Docker Compose配置

services:
  backend:
    container_name: backend
    build: 
      context: ./backend
    ports:
      - "8080:8080"
  frontend:
    container_name: vue_frontend
    build:
      context: ./vue
    ports:
      - "80:80"

前端Dockerfile

FROM node:22.14-alpine

RUN npm install -g http-server 

WORKDIR /vue

COPY package*.json ./
COPY .npmrc .npmrc

RUN --mount=type=secret,id=npmrc,target=.npmrc npm install

COPY . .

EXPOSE 80 8080

CMD ["npm", "run", "dev", "--", "--port", "80", "--host"]

后端Dockerfile

FROM python:3.10-slim

RUN mkdir /backend 

WORKDIR /backend

ENV PYTHONDONTWRITEBYTECODE=1
ENV PYTHONUNBUFFERED = 1

RUN pip install --upgrade pip --trusted-host pypi.org

COPY requirements.txt /backend/

RUN apt-get update && \
    apt-get install -y libpq-dev gcc

RUN pip install --no-cache-dir -r requirements.txt --trusted-host pypi.org

COPY . /backend/

EXPOSE 8080 80

CMD ["daphne", "-b", "0.0.0.0", "-p", "8080", "backend.asgi:application"]

可行解决方案 #

方案1：拆分部署（已验证有效） #

将后端API单独部署为独立的Azure App Service，前端配置中直接使用后端的公网域名作为Apollo的uri，避免容器间通信的复杂配置。

方案2：保留Sidecar架构的调整方向 #

若要坚持Sidecar部署，需完成以下配置：

1. 配置Azure App Service的路径路由，将/graphql路径转发到后端Sidecar容器的8080端口；
2. 修改前端Apollo的uri为/graphql（相对路径），利用App Service的反向代理访问后端；
3. 确保后端容器绑定0.0.0.0（当前Dockerfile已配置），并在App Service的容器配置中启用Sidecar的端口暴露。

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