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!

we were able to make it work in production in the end, I'll post the solution below — Davide Jones, Feb 19 '19 at 08:30

score 3 · Answer 1 · answered Feb 19 '19 at 08:36

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

score 1 · Answer 2 · answered Mar 26 '20 at 14:27

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.

testing local subdomain with nginx and docker

2 Answers2