'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 |
---|