Приложение Proxying реагирует, используя nginx на docker -compose - PullRequest
Новая
       108

Приложение Proxying реагирует, используя nginx на docker -compose

1 голос
/ 29 января 2020

Я пытаюсь использовать docker - составить для запуска 2 контейнеров - пример приложения реакции и nginx для работы в качестве обратного прокси.
Я запустил npx create-react-app react-app для создания первого контейнера, и добавил следующий Dockerfile в папку - 

FROM node
RUN yarn global add serve
WORKDIR /usr/src/app
COPY package.json yarn.lock ./
RUN yarn
COPY . ./
RUN yarn build
CMD serve -s build

Затем я приступил к созданию следующего nginx файла конфигурации в ./nginx - 

server {
    listen       80;
    server_name  localhost;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    location /react {
        proxy_pass http://react:5000;
    }
}

Наконец, я ' Вы создали этот docker-compose.yaml файл в root проекта - 

version: '3'
services:
  nginx: 
    image: nginx:latest
    container_name: production_nginx
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    ports:
      - 80:80
      - 443:443

  react:
    build: ./react-app
    container_name: react-app
    expose:
      - "5000"
    ports:
      - 5000:5000

Затем я использую docker-compose up --build для запуска стека, но когда я использую путь http://localhost/react, я получаю следующие ошибки в моих nginx журналах доступа - 

eact-app | INFO: Accepting connections at http://localhost:5000
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /react HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 2020/01/29 18:24:29 [error] 7#7: *1 open() "/usr/share/nginx/html/static/css/main.d1b05096.chunk.css" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/css/main.d1b05096.chunk.css HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /static/css/main.d1b05096.chunk.css HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /static/js/2.250dc4af.chunk.js HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /static/js/main.de4c6317.chunk.js HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 2020/01/29 18:24:29 [error] 7#7: *4 open() "/usr/share/nginx/html/static/js/2.250dc4af.chunk.js" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/js/2.250dc4af.chunk.js HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
production_nginx | 2020/01/29 18:24:29 [error] 7#7: *3 open() "/usr/share/nginx/html/static/js/main.de4c6317.chunk.js" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/js/main.de4c6317.chunk.js HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
production_nginx | 2020/01/29 18:24:29 [error] 7#7: *5 open() "/usr/share/nginx/html/manifest.json" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /manifest.json HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /manifest.json HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 2020/01/29 18:24:34 [error] 7#7: *3 open() "/usr/share/nginx/html/static/js/2.250dc4af.chunk.js" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/js/2.250dc4af.chunk.js HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:34 +0000] "GET /static/js/2.250dc4af.chunk.js HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:34 +0000] "GET /static/js/main.de4c6317.chunk.js HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 2020/01/29 18:24:34 [error] 7#7: *4 open() "/usr/share/nginx/html/static/js/main.de4c6317.chunk.js" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/js/main.de4c6317.chunk.js HTTP/1.1", host: "localhost", referrer: "http://localhost/react"

Мне кажется, что nginx ищет ресурсы Reacts stati c в контейнере nginx, но я не уверен, почему нет отправьте эти запросы в контейнер реагирования. Есть идеи, как это решить?

Ответы [ 2 ]

1 голос
/ 29 января 2020

После нахождения этого замечательного поста мне удалось решить проблему, изменив конфигурацию nginx на эту - 

upstream backend {
    server react:5000;
}

server {
    listen 80;
    server_name localhost§

    root /usr/src/app;

    location / {
        try_files $uri @backend;
    }

    location @backend {
        proxy_pass http://backend;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # Following is necessary for Websocket support
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}
1 голос
/ 29 января 2020

Я не использовал nginx, чтобы перевести прокси на мой интерфейс. Только для подключения запросов от моего интерфейса к моему серверу. Вместо этого вы можете попробовать хостинг react-app напрямую через nginx. Вот один из способов сделать это.

Вместо запуска двух контейнеров я установил Dockerfile в root моего react-app. Dockerfile выполняет производственную сборку приложения реагирования и затем копирует его в nginx для размещения на маршруте / в вашей конфигурации nginx. Вот как выглядит этот файл. 

# Frontend build based on Node.js
FROM node:11.12.0-alpine as build-stage
RUN mkdir -p /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@latest -g
COPY . /usr/src/app
#RUN CI=true npm test
RUN npm run build

# Stage 1
# Production build based on Nginx with artifacts from Stage 0
FROM nginx:1.15.9-alpine
COPY config/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

В root из react-app у меня также есть каталог config. Внутри этого каталога у меня есть файл nginx.conf, который выглядит следующим образом. 

server {

    listen 80;
    server_name  localhost;

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

    # redirect server error pages

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

}

Поскольку сборка внешнего интерфейса копируется в nginx на первом шаге, теперь он может найти каталог сборки внутри своей собственной файловой системы. , После этого вы можете собрать и запустить образ в контейнере, и все должно работать правильно. Я думаю, что все, что вам нужно сделать в этот момент, это переместить файл docker-compose.yml в react-app root, избавиться от службы react, изменить image: nginx:latest на build: . и запустить docker-compose up -d. Вы также можете набрать go compose и просто использовать docker, запустив docker build -t react-app, и после этой сборки запустите docker run -d -p 80:80 react-app в root каталога react-app. Это очень простой способ начать и, возможно, не совсем то, что вы искали. Надеюсь, это поможет.

...