testing local subdomain with nginx and docker

Question

I'm trying to set up a simple web stack locally on my Mac.

• nginx to serve as a reverse proxy
• react web app #1 to be served on localhost
• react web app #2 to be served on demo.localhost

I'm using docker-compose to spin all the services at once, here's the file:

version: "3"

services:
    nginx:
      container_name: nginx
      build: ./nginx/
      ports:
        - "80:80"
      networks:
        - backbone
    landingpage:
      container_name: landingpage
      build: ./landingpage/
      networks:
        - backbone
      expose:
        - 3000
    frontend:
      container_name: frontend
      build: ./frontend/
      networks:
        - backbone
      expose:
        - 3001

networks:
  backbone:
    driver: bridge

and here's the nginx config file (copied into the container with a COPY command in the Dockerfile):

worker_processes  1;

events {
    worker_connections  1024;
}

http {
      include /etc/nginx/mime.types;
      gzip  on;
      gzip_http_version 1.1;
      gzip_comp_level 2;
      gzip_types text/plain text/css
      application/x-javascript text/xml
      application/xml application/xml+rss
      text/javascript;

      upstream landingpage {
          server landingpage:3000;
      }

      upstream frontend {
          server frontend:3001;
      }

      server {
          listen 80;
          server_name localhost;
          location / {
              proxy_pass http://landingpage;
          }
      }

      server {
          listen 80;
          server_name demo.localhost;
          location / {
              proxy_pass http://frontend;
          }
      }
}

I can successfully run docker-compose up, but only opens the web app, while demo.localhost does not.

I've also changed the hosts file contents on my Mac so I have

127.0.0.1 localhost
127.0.0.1 demo.localhost

to no avail.

I am afraid I'm missing something as I'm no expert in web development nor docker or nginx!

Answer 1

For reference: we were able to run this remotely using AWS ligthsail, using the following settings

worker_processes  1;

events {
    worker_connections  1024;
}

http {
  include /etc/nginx/mime.types;
  gzip  on;
  gzip_http_version 1.1;
  gzip_comp_level 2;
  gzip_types text/plain text/css
  application/x-javascript text/xml
  application/xml application/xml+rss
  text/javascript;

  upstream landingpage {
      server landingpage:5000;
  }

  upstream frontend {
      server frontend:5000;
  }

  server {
      listen 80;
      if ($http_x_forwarded_proto != 'https') {
        return 301 https://$host$request_uri;
      }
      server_name domain.com www.domain.com;
      location / {
          proxy_pass http://landingpage;
      }
  }

  server {
      listen 80;
      if ($http_x_forwarded_proto != 'https') {
        return 301 https://$host$request_uri;
      }

      server_name demo.domain.com www.demo.domain.com;
      location / {
          add_header  X-Robots-Tag "noindex, nofollow, nosnippet, noarchive, notranslate, noimageindex";
          proxy_pass http://frontend;
      }
  }
}

with the following dockerfile for both react apps (basically exposing port 5000 for both services)

FROM node:latest 

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

COPY package.json /usr/src/app/
RUN npm install --verbose

COPY . /usr/src/app

RUN npm run build --production
RUN npm install -g serve

EXPOSE 5000
CMD serve -s build

Unfortunately I cannot provide more details on doing this on a local machine

Answer 2

This is working for me. The difference might be that I'm using a fake domain name, but I can't say for sure. I'm also using ssl, because I couldn't get Firefox to access the fake domain via http. I'm routing the subdomain to Couchdb. The webclient service is the parcel-bundler development server.

/etc/hosts

127.0.0.1   example.local
127.0.0.1   www.example.local
127.0.0.1   db.example.local

develop/docker-compose.yaml

version: '3.5'

services:
  nginx:
    build:
      context: ../
      dockerfile: develop/nginx/Dockerfile
    ports:
      - 443:443
  couchdb:
    image: couchdb:3
    volumes:
      - ./couchdb/etc:/opt/couchdb/etc/local.d
    environment:
      - COUCHDB_USER=admin
      - COUCHDB_PASSWORD=password
  webclient:
    build:
      context: ../
      dockerfile: develop/web-client/Dockerfile
    volumes:
      - ../clients/web/src:/app/src
    environment:
      - CLIENT=web
      - COUCHDB_URL=https://db.example.local

develop/nginx/Dockerfile

FROM nginx
COPY develop/nginx/conf.d/* /etc/nginx/conf.d/
COPY develop/nginx/ssl/certs/* /etc/ssl/example.local/

develop/nginx/conf.d/default.conf

server {
    listen 443 ssl;
    ssl_certificate      /etc/ssl/example.local/server.crt;
    ssl_certificate_key  /etc/ssl/example.local/server.key.pem;
    server_name  example.local www.example.local;
    location / {
        proxy_pass http://webclient:1234;
    }
}

server {
    listen 443 ssl;
    ssl_certificate      /etc/ssl/example.local/server.crt;
    ssl_certificate_key  /etc/ssl/example.local/server.key.pem;
    server_name db.example.local;
    location / {
        proxy_pass http://couchdb:5984/;
    }
}

develop/web-client/Dockerfile

FROM node:12-alpine
WORKDIR /app

COPY clients/web/*.config.js ./
COPY clients/web/package*.json ./
RUN npm install

CMD ["npm", "start"]

Here is the blog that shows how to generate the self-signed certs.