Docker 与 Angular 502 Bad Gateway 组合

Question

I am using docker compose to put my application on a server. I have three containers whith, angular, spring and https-portal. My docker compose file:

version: '3.3'

services:
  web: 
    build: './blooming_frontend'
    ports: 
      - 4200:80
    depends_on:
      - spring
  spring:
    build: ./blooming_backend
    ports:
      - 8080:8080
  https-portal:
    image: steveltn/https-portal:1
    depends_on:
        - web
        - spring
    ports:
        - 80:80
        - 443:443
    restart: always
    volumes:
        - ./ssl_certs:/var/lib/https-portal
    environment:
        DOMAINS: 'www.bloomingthebrand.com -> http://web:4200 #production' 

And the docker file for Angular service

FROM node:14.13
MAINTAINER Blooming The Brand dev team <info@bloomingthebrand.com>

# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

# add .bin to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install package.json (o sea las dependencies)
COPY package.json /usr/src/app/package.json
RUN npm install
RUN npm install -g @angular/cli@10.0.3 

# add app
COPY . /usr/src/app

# start app
CMD npm start

When I try to access to www.bloomingthebrand.com the server return 502 Gateway Error ngix

Angular application is up in port 4200

Answer 1

when you want to access a container from another one, you need to do so on the container's port, not the exposed one. In fact, in your case you don't need to expose 4200, unless you want to bypass the https-portal

That is, change 4200 for 80 here DOMAINS: 'www.bloomingthebrand.com -> http://web:4200 #production' , or just don't set the port as it's the default HTTP.