title: Docker Reverse Proxy, Nginx, MEAN Stack
body: <p>Hi Everyone I get 400 code response. I am trying to deploy a MEAN stack app on docker, so I'm using reverse proxy to backend and frontend comunication without ports  </p>
  
  <p><strong>My https:// site.app/api works but my frontend get</strong> </p>
  
  <blockquote>
    <p>400 bad request the plain http request was sent to https</p>
  </blockquote>
  
  <p>this is new for me so I watched some tutorials and posts to solve it, but I haven't got any solution
  If I just put the ssl on frontend it's works but my backend get erros with ssl error connections when I trying send data or something similar</p>
  
  <p><strong>I have sent data with the url https:// site.app/api through postman so, I can say it's works</strong></p>
  
  <p><strong>DOCKERFILE</strong></p>
  
  <pre><code>FROM node:14.3.0  As builder
  RUN mkdir -p /usr/src/app
  
  WORKDIR /usr/src/app/
  
  COPY package*.json ./
  
  RUN npm install
  
  COPY . .
  
  RUN npm run build --prod
  
  FROM nginx:1.19
  
  COPY --from=builder /usr/src/app/dist/advanced-angular/ /usr/share/nginx/html
  
  RUN rm -rf /etc/nginx/conf.d/default.conf
  
  EXPOSE 80
  EXPOSE 443
  
  CMD ["nginx", "-g", "daemon off;"]
  </code></pre>
  
  <p>This is my docker-compose file </p>
  
  <p><strong>Docker Compose</strong></p>
  
  <pre><code>version: "3.6" # Version del docker-compose
  services: # Definir la lista de servicios que se crearan
  
    frontend: # nombre del primer servicio
      image: myImage
      restart: always
      container_name: frontend
      # command: ["npm", "start"]
      ports:
        - "80:80" # Especificar el puerto que sera Mapeado
        - "443:443"
      volumes: #el volume donde estara el projecto para que pueda ser editatado
        - ./ssl/:/etc/nginx/ssl/
        - ./nginx-conf/:/etc/nginx/conf.d/
      networks:
        - webNet
      depends_on: 
        - backend
        - mongo
  
    backend:
      image: myImage
      restart: always
      container_name: backend
      env_file: .env
      environment:
        - MONGO_USERNAME=$MONGO_USERNAME
        - MONGO_PASSWORD=$MONGO_PASSWORD
        - MONGO_HOSTNAME=mongo
        - MONGO_PORT=$MONGO_PORT
        - MONGO_DB=$MONGO_DB
      # command: ["npm", "run", "dev"]
      ports:
        - "3000:3000"
      # volumes: 
        # - ./api-server:/usr/src/app
      networks:
        - webNet
      depends_on:
        - mongo
  
    mongo:
      image: mongo:4.2.7-bionic 
      restart: always
      container_name: mongo
      env_file: .env
      environment:
        - MONGO_INITDB_ROOT_USERNAME=$MONGO_USERNAME
        - MONGO_INITDB_ROOT_PASSWORD=$MONGO_PASSWORD
      ports:
        - "27017:27017"
      networks:
        - webNet
      volumes: 
        - /opt/mongo/prod:/data/db
  
  networks:
    webNet:
      driver: bridge
  </code></pre>
  
  <p>My nginx configuration 
  <strong>nginx.conf</strong></p>
  
  <pre><code>upstream frontend {
      least_conn;
      server frontend:443 max_fails=3 fail_timeout=30s;
  }
  upstream backend {
      least_conn;
      server backend:3000 max_fails=3 fail_timeout=30s;
  }
  
  server {
      listen 443 ssl default_server;
      listen [::]:443 ssl default_server;
      server_name vecin.app www.vecin.app;
  
      add_header X-Frame-Options "SAMEORIGIN" always;
      add_header X-XSS-Protection "1; mode=block" always;
      add_header X-Content-Type-Options "nosniff" always;
      add_header Referrer-Policy "no-referrer-when-downgrade" always;
      add_header Content-Security-Policy "default-src * data: 'unsafe-eval' 'unsafe-inline'" always;
  
      ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
      ssl_ecdh_curve secp384r1;
      ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256;
      ssl_prefer_server_ciphers on;
      ssl_certificate /etc/nginx/ssl/chain.crt;
      ssl_certificate_key /etc/nginx/ssl/key.key;
  
      ssl_session_timeout 10m;
      ssl_session_cache shared:SSL:10m;
      ssl_session_tickets off;
      ssl_stapling on;
      ssl_stapling_verify on;
      ssl_trusted_certificate /etc/nginx/ssl/chain.crt;
      resolver 8.8.8.8 8.8.4.4 valid=300s;
      resolver_timeout 30s;
  
      location / {
          proxy_pass http://frontend;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto   $scheme;
          proxy_set_header Host $host;
          proxy_set_header X-Forwarded-Host $host;
          proxy_set_header X-Forwarded-Port $server_port;
          proxy_set_header X-NginX-Proxy true;
          proxy_ssl_certificate /etc/nginx/ssl/chain.crt;
          proxy_ssl_certificate_key /etc/nginx/ssl/key.key;
          proxy_ssl_protocols TLSv1.2;
          proxy_ssl_verify        on;
          proxy_ssl_verify_depth  2;
          proxy_ssl_session_reuse on;
          # proxy_redirect http:// https://;
  
      }
  
      location /api{
          proxy_pass http://backend;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto   $scheme;
          proxy_set_header Host $host;
          proxy_set_header X-Forwarded-Host $host;
          proxy_set_header X-Forwarded-Port $server_port;
          proxy_set_header X-NginX-Proxy true;
          proxy_ssl_certificate /etc/nginx/ssl/chain.crt;
          proxy_ssl_certificate_key /etc/nginx/ssl/key.key;
          proxy_ssl_protocols TLSv1.2; 
          proxy_ssl_verify        on;
          proxy_ssl_verify_depth  2;
          proxy_ssl_session_reuse on;
          # proxy_redirect http:// https://;
      }
      root /usr/share/nginx/html/;
      index index.html index.htm index.nginx-debian.html;
  }
  
  server {
      listen 80;
      listen [::]:80;
      server_name vecin.app www.vecin.app;
  
       location / {
              rewrite ^ https://$host$request_uri? permanent;
      }
  }
  </code></pre>