'Subdomain setup for second frontend app in my NGINX config

I went through this very good article about MERN app deployment on Digital Ocean With Docker. I added some additional configuration as I have 2 frontend react app (1 domain, 1 subdomain) and 1 backend.

For some reason even if I open my admin.example.com it will redirect me to example.com. As written in the blog I used the linuxserver/swag docker image to handle my nginx/reverse proxy...

My docker-compose.yaml:

version: '3.4'

networks:
  main:

services:
  main-be:
    image: main-be:latest
    container_name: main-be
    ports:
      - '5001:5001'
    networks:
      main:
    volumes:
      - ./backend/config.env:/app/config.env
    command: 'npm run prod'
  main-fe:
    image: main-fe:latest
    container_name: main-fe
    networks:
      main:
    volumes:
      - ./frontend/.env:/app/.env
      - ./frontend/.env:/app/.env.local
      - ./frontend/.env:/app/.env.production
    ports:
      - '3000:3000'
    depends_on:
      - main-be
    #command: 'npm start'
  admin-fe:
    image: admin-fe:latest
    container_name: admin-fe
    networks:
      main:
    ports:
      - '3001:3001'
    depends_on:
      - main-be
    #command: 'npm start'
  nginx:
    image: linuxserver/swag
    ports:
       - 80:80
       - 443:443
    volumes:
       - ./nginx/config:/config
       - ./nginx/default.conf:/config/nginx/site-confs/default
       - ./nginx/ssl.conf:/config/nginx/ssl.conf
    container_name: nginx
    networks:
      main:
    restart: unless-stopped
    environment: 
       - PUID=1000
       - PGID=1000
       - TZ=Europe/Berlin
       - URL=example.com
       - SUBDOMAINS=www,admin
       - VALIDATION=http
       - STAGING= false #optional 
       - [email protected]
    depends_on:
       - main-be
       - main-fe
       - admin-fe
    # volumes are defined here
volumes: 
    db-volume:

NGINX default.conf file:

upstream api {
    server main-be:5001;
}

upstream client {
    server main-fe:3000;
}

server {
  listen 80;
  listen [::]:80;
  server_name _;
  return 301 https://$host$request_uri;
  
}

# main server block
server {
  listen 443 ssl http2 default_server;
  listen [::]:443 ssl http2 default_server;

  server_name _;

  # enable subfolder method reverse proxy confs
  include /config/nginx/proxy-confs/*.subfolder.conf;

  # all ssl related config moved to ssl.conf
  include /config/nginx/ssl.conf;

  client_max_body_size 0;
   
    location / {
        proxy_pass http://client;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    
     location /api {
        proxy_pass http://api;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

    }
      location /socket.io {
        proxy_pass http://api;
            
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
    }
}
# enable subdomain method reverse proxy confs
include /config/nginx/proxy-confs/*.subdomain.conf;

/nginx/config/nginx/proxy-confs/admin.subdomain.conf:

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name admin-fe.*;
    include /config/nginx/ssl.conf;
    client_max_body_size 0;
  
    location / {
        include /config/nginx/proxy.conf;
        include /config/nginx/resolver.conf;
        set $upstream_app admin-fe;
        set $upstream_port 3001;
        set $upstream_proto https;
        proxy_pass $upstream_proto://$upstream_app:$upstream_port;
    }
}

admin_frontend_app/nginx/default.conf:

server {
    listen 3001;

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

frontend/nginx/default.conf:

server {
    listen 3000;

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

frontend and admin_frontend_app/Dockerfile:

# build environment
FROM node:12.2.0-alpine as builder 
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
# production environment
FROM nginx:latest
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/build /usr/share/nginx/html


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source