------------Update------------
In the end I never solved this problem, and instead deployed the api as its own app service which solved the problem.
----------- Original Post -------------------
I'm trying to deploy a fairly basic web app in Azure App Service. I have a backend image (running django+graphql) and and a frontend image (running vue+apollo), and when I run them locally either separately or via docker-compose it works with no issues.
Once I deploy the app in Azure App Service, with the frontend as the main container, and the backend as the sidecar, I get "ERR_CONNECTION_REFUSED" when Apollo queries the graphql api in the backend.
Apollo-config
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",
});
// Cache implementation
const cache = new InMemoryCache();
// Create the apollo client
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"
Frontend 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"]
Backend 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"]
The only thing that has "worked" so far is running the backend locally, and then the app will receive data. This suggest that I am actually querying a website with the apollo code as opposed to anything on the network host.
From the docs: localhost:<port> should be sufficient
I have tried giving different addresses in the uri in the apollo-config, but if I try "localhost:8000" instead I just get the error that localhost schema is not supported.
And if I try "<app-url>/graphql" I just get a 404