Dockerizing React with Nginx and Spring, access via web browser to both

Question

I have the application that contains of two components:

• front-end in React working on Nginx
• back-end in Spring

Both have been dockerized and are located in the same Docker network.
Spring application provides API which is used in front-end.
Front-end is available on http://mypublicaddress.com port 80 I would like to configure front-end and back-end Docker containers to be able to display data from 'external' user perspective. It means front-end shall be able to fetch JSON data from back-end and display it to user.

I started from base scenario, where in fronted there was URL of the Spring app: http://backendcontainer:8080/people?name=john
Of course, from Web browser perspective it is not possible to get list of people by such address. Container backendcontainer is only available from Docker network.

Next step was to extend Nginx configuration by adding reverse proxy:

location /people {
    root /usr/share/nginx/html;
    proxy_pass http://backendcontainer:8080;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
}

Also full address of backend URL in frontend was replaced with relative "/people"

Step forward, by now after call
http://mypublicaddress.com/people?name=john I get 502 Bad Gateway. What am I doing wrong?

Full nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;

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

        location /people {
            root /usr/share/nginx/html;
            proxy_pass http://backendcontainer:8080;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_redirect off;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}

Dockerfile:

### STAGE 1: Build ###
FROM node:11-alpine as build
RUN mkdir /app
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
ENV NPM_CONFIG_LOGLEVEL warn
COPY package.json /app/package.json
RUN npm config set unsafe-perm true
RUN npm install --silent
RUN npm install react-scripts -g --silent
COPY . /app
RUN npm run build

### STAGE 2: Production Environment ###
FROM nginx:1.14-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /data/conf/nginx.conf
EXPOSE 80
CMD ["nginx", "-c", "/data/conf/nginx.conf", "-g", "daemon off;"]

EDIT:

Finally, I have got it. I have replaced

location /people {
    root /usr/share/nginx/html;
    proxy_pass http://backendcontainer:8080;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
}

with:

location /people/ {
    proxy_pass http://backendcontainer:8080;
    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;
}

and it starts work. However, not sure what part of the snippet was the source of the problem.

Answer 1

Legacy Docker Links: Link backend container with frontend app container using docker links.

nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    server {
        listen 8080;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        location / {
            try_files $uri $uri/ /index.html;
        }

        location /people {
            proxy_pass http://backend:8080;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_redirect off;
        }
    }
}

Docker commands:

Backend app :

$ docker run -d -p 8080:8080 --name backend backendapp

Frontend app:

$ docker run -p 9000:8080 --name frontent --link backend  reactapp

output:

37.36"
172.17.0.1 - - [01/Feb/2019:17:21:20 +0000] "GET /main.9712d6edfd3728dcfc56.bundle.js HTTP/1.1" 200 59020 "http://localhost:9000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"
172.17.0.1 - - [01/Feb/2019:17:21:27 +0000] "GET /people?name=john HTTP/1.1" 200 10 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

It is always easier to use docker compose in these cases.

docker-compose.yml

version: '3'
services:
  frontend:
    image: reactapp
    ports:
      - "9000:8080"
    depends_on:
      - backend
  backend:
    image: backendapp
    ports:
      - "8080:8080"

$ docker-compose up