Utilisation de Docker pour déployer le frontal Vue et le backend .net, le frontal ne résout pas le nom du conteneur du backend.

Question

J'essaie de déployer une application Vue en front-end et l'api .net core en back-end. En utilisant le fichier docker-compose, j'ai pu faire tourner le réseau et les conteneurs mais j'ai du mal à les faire communiquer. Je suis assez novice en matière de docker, mais je comprends que le dockerfile de l'application Vue utilise une base Nginx pour alimenter l'application Web, mais il semble que cela puisse affecter la communication réseau, car le conteneur frontal ne résout pas le nom du conteneur dorsal, alors qu'il devrait le faire puisqu'ils sont dans le même réseau privé virtuel avec le pilote de pont par défaut. En exécutant un shell bash dans le conteneur frontal et en effectuant un curl vers le conteneur dorsal, j'obtiens la réponse correcte.

J'ai essayé d'exposer le conteneur backend à l'hôte, puis d'utiliser l'IP du serveur pour l'atteindre depuis le frontend, et cela fonctionne. Cependant, j'espérais ne pas avoir à exposer mon API de cette manière et je voulais que cela fonctionne via le réseau privé virtuel de Docker si possible.

Exemple d'url que j'essaie dans le frontend qui rencontre une erreur de nom non résolu : littlepiggy-api/api ou littlepiggy-api:5000/api

Front-end Dockerfile

FROM node:14.18-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Backend Dockerfile

FROM mcr.microsoft.com/dotnet/aspnet:5.0 AS base
WORKDIR /app
EXPOSE 5000

FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build
WORKDIR /src
COPY ["LittlePiggy.Api/LittlePiggy.Api.csproj", "LittlePiggy.Api/"]
RUN dotnet restore "LittlePiggy.Api/LittlePiggy.Api.csproj"
COPY . .
WORKDIR "/src/LittlePiggy.Api"
RUN dotnet build "LittlePiggy.Api.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "LittlePiggy.Api.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "LittlePiggy.Api.dll"] 

Fichier Docker-compose

version: '3'
services:

  front:
    container_name: littlepiggy-front
    image: josh898/angie-app-front:latest
    ports:
      - 80:80
    networks:
      - littlepiggy
    depends_on:
      - api

  api:
    container_name: littlepiggy-api
    image: josh898/angie-app-backend:latest
    networks:
      - littlepiggy

networks:
  littlepiggy:
    driver: bridge

Answer 1

Vous devez configurer Nginx pour qu'il transmette au service dorsal les requêtes qui correspondent à la route /api.

Si vous créez un fichier de configuration nginx comme celui-ci, appelé nginx.conf et que vous le placez dans votre répertoire frontend

server { 
    listen 80;

    location / {
        index index.html;
        root /usr/share/nginx/html;
        try_files $uri $uri/ $uri.html =404;
    }

    location /api/ {
        proxy_pass http://littlepiggy-api/;
    }
}

Copiez-le ensuite dans votre conteneur frontal en changeant votre Dockerfile frontal en

FROM node:14.18-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Ensuite, les requêtes vers http://localhost/api/xxxx doivent être transmises au backend et les requêtes vers http://localhost/index.html doivent être servies directement par le conteneur Nginx.