Настройте прокси-сервер nginx для реакции на приложения

Question

Я пытаюсь создать docker-compose, используя две службы: бэкэнд Spring Boot (работает на порте 8080) и интерфейс React, работающий на Nginx.

Реагирующее приложение вызывает backend API, например / api / tests.Тем не менее, когда я запускаю docker compose и frontend делает запрос, он всегда завершается с ошибкой 404: GET http://localhost/api/tests 404 (Not Found)

Когда я устанавливаю dockerfile frontend, чтобы он не использовал Nginx, просто npm start, он работал нормально,но я бы предпочел использовать производственную сборку на Nginx.

Текущий файл докера внешнего интерфейса:

FROM node:11.13 as builder

RUN mkdir /usr/src/app
WORKDIR /usr/src/app

ENV PATH /usr/src/app/node_modules/.bin:$PATH

COPY package.json /usr/src/app/package.json
RUN npm install
RUN npm install react-scripts@2.1.8 -g

COPY ./package-lock.json /usr/src/app/
COPY ./public /usr/src/app/public
COPY ./src /usr/src/app/src

COPY ./nginx.conf /etc/nginx/nginx.conf

RUN npm run build

FROM nginx:1.15.10-alpine
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

Nginx.conf:

server {
    listen 80;

    location / {
        try_files $uri $uri/ /index.html;
        add_header   Cache-Control public;
        expires      1d;
    }

    location /api {
       proxy_set_header X-Forwarded-Host $host;
       proxy_set_header X-Forwarded-Server $host;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_pass http://server:8080/;
    }
}

docker-compose:

version: "3"

services:
  server:
    build: test-server/
    expose:
      - 8080
    ports:
      - 8080:8080
  ui:
    build: test-ui/
    expose:
      - 80
    ports:
      - 80:80

Реактивное приложение имеет в своем файле package.json строку "proxy": "http://server:8080".

Nginx регистрирует следующую ошибку:

2019/04/15 12:50:03 [error] 6#6: *1 open() "/usr/share/nginx/html/api/tests" failed (2: No such file or directory), client: 172.20.0.1, server: localhost, request: "GET /api/tests HTTP/1.1", host: "localhost", referrer: "http://localhost/"

Answer 1

Я нашел проблему.В многоэтапной сборке образа докера я случайно скопировал файл nginx.conf в образ компоновщика, а не в рабочий.

Исправленный файл Docker теперь выглядит следующим образом:

# build environment
FROM node:11.13 as builder

RUN mkdir /usr/src/app
WORKDIR /usr/src/app

ENV PATH /usr/src/app/node_modules/.bin:$PATH

COPY package.json /usr/src/app/package.json
RUN npm install
RUN npm install react-scripts@2.1.8 -g

COPY ./package-lock.json /usr/src/app/
COPY ./public /usr/src/app/public
COPY ./src /usr/src/app/src


RUN npm run build

# production environment
FROM nginx:1.15.10-alpine
COPY --from=builder /usr/src/app/build /var/www
COPY ./nginx.conf /etc/nginx/nginx.conf
CMD ["nginx", "-g", "daemon off;"]

и nginx.conf:

server {
    listen 80;
    include /etc/nginx/mime.types;
    root /var/www;
    index index.html index.htm;
    location /api {
        resolver 127.0.0.11;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://server:8080$request_uri;
    }
    location / {
        try_files $uri $uri/ =404;
    }
}

Answer 2

В dev он работает нормально, потому что у вас есть сервер веб-пакетов, который проксирует ваши запросы на порт 8080 (строка "proxy": "http://server:8080"), но этого не происходит в производственных сборках.

Добавление $request_url к вам proxy_passдолжен это исправить.

    location /api {
       proxy_set_header X-Forwarded-Host $host;
       proxy_set_header X-Forwarded-Server $host;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_pass http://server:8080$request_uri;
    }

Answer 3

Это не удастся, так как вы обращаетесь к api http://localhost/api/tests, а в вашем файле docker-compose вы указываете api на порт 8080.

Итак, попробуйте это: http://localhost:8080/api/tests

Я бы предложил вам использовать ENVIRONMENT VARIABLES, чтобы вы могли изменить его всякий раз, когда вы меняете свой порт или что-то в этом роде. Тогда в React вы можете получить к ним доступ: ех. Вы можете установить их с вашего терминала SET REACT_APP_API_URL=http://localhost:8080

и получить к нему доступ

process.env.REACT_APP_API_URL

Или вы даже можете установить его в файле Dockerfile или docker-compose.