Dockerizing React с Nginx и Spring, доступ через веб-браузер к обоим

Question

У меня есть приложение, которое содержит два компонента:

• интерфейс в React, работающий на Nginx
• фон в Spring

Оба были докеризованы и расположены в одной и той же сети Docker.
Приложение Spring предоставляет API, который используется во внешнем интерфейсе.
Внешний интерфейс доступен на http://mypublicaddress.com порту 80, который я хотел бы настроитьвнешние и внутренние Docker-контейнеры для отображения данных с точки зрения «внешнего» пользователя.Это означает, что интерфейс должен иметь возможность извлекать данные JSON из серверной части и отображать их пользователю.

Я начал с базового сценария, где во фронте был URL-адрес приложения Spring: http://backendcontainer:8080/people?name=john
Конечно, с точки зрения веб-браузера невозможно получить список людей по такому адресу.Backendcontainer контейнера доступен только из сети Docker.

Следующим шагом было расширение конфигурации Nginx путем добавления обратного прокси-сервера:

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;
}

Также полный адрес внутреннего URL-адреса в интерфейсе был заменен на относительный "/people "

Шаг вперед, теперь после звонка
http://mypublicaddress.com/people?name=john я получаю 502 Bad Gateway.Что я делаю не так?

Полный 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;"]

РЕДАКТИРОВАТЬ:

Наконец-то я получил его,Я заменил

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;
}

на:

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;
}

, и он начинает работать.Однако не уверен, какая часть фрагмента кода была источником проблемы.

Answer 1

Устаревшие ссылки Docker : связать внутренний контейнер с контейнером внешнего интерфейса, используя ссылки Docker.

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 :

Бэкэнд-приложение :

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

Фронтенд-приложение :

$ 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

В таких случаях всегда проще использовать docker compose.

docker-compose.yml

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

$ docker-compose up