Nextjs getInitialProps не работает с NGINX

Итак, у меня есть компонент Next.js React, который использует getInitialProps для вызова бэкэнда для некоторых данных перед начальной загрузкой страницы. Вот как это выглядит:

 static async getInitialProps({req, query}){
    console.info('inside getInitialProps')
    if (req){
      var pinReturn = await axios.post(process.env.serverADD+'getPinData', {withCredentials: true})
      .then(response=>{
        console.info('value of response: ', response)
        return response.data.pins
      })
      .catch(error=>{
        console.info('value of error: ', error)
        return({})
      })

    }
    return {pinData: pinReturn}
  }

Я думаю, что это довольно понятно — и это работает, когда мой бэкэнд представляет собой простой контейнер докера. Однако теперь я использую nginx и docker-compose, чтобы раскрутить переднюю и заднюю части. В настоящее время мой process.env.serverADD равен http://localhost:80/back/.

Мой NGINX:

server {
    listen 80;
    listen [::]:80;

    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;

    server_name example.com www.example.com localhost;

    location /back {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header X-NginX-Proxy true;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";

      proxy_pass http://nodejs:8000;
    }

    location / {
      proxy_pass http://nextjs:3000;
    }

    location ~ /.well-known/acme-challenge {
      allow all;
      root /var/www/html;
    }
}

А вот мой docker-compose (это похоже на то, что здесь: https://www.digitalocean.com/community/tutorials/how-to-secure-a-containerized-node-js-application-with-nginx-let-s-encrypt-and-docker-compose#step-2- %E2%80%94-определение-конфигурации-веб-сервера):

version: '3'

services:
  nodejs:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8000:8000"
    container_name: nodejs
    restart: unless-stopped
    networks:
      - app-network
  nextjs:
    build:
      context: ../.
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    container_name: nextjs
    restart: unless-stopped
    networks:
      - app-network
  webserver:
    image: nginx:mainline-alpine
    container_name: webserver
    restart: unless-stopped
    ports:
      - "80:80"
    volumes:
      - web-root:/var/www/html
      - ./nginx-conf:/etc/nginx/conf.d
      - certbot-etc:/etc/letsencrypt
      - certbot-var:/var/lib/letsencrypt
    depends_on:
      - nodejs
      - nextjs
    networks:
      - app-network

volumes:
  certbot-etc:
  certbot-var:
  web-root:
    driver: local
    driver_opts:
      type: none
      device: /
      o: bind

networks:
  app-network:
    driver: bridge 

Если я вызову http://localhost:80/back/getPinData из curl, я получу ожидаемые данные. Он направляет его через nginx, попадает в мой docker-compose, а затем направляет в правильное место в моем приложении nodejs. Однако, если я вызову этот API из getInitialProps, я получу следующую ошибку:

inside getInitialProps
value of error:  { Error: connect ECONNREFUSED 127.0.0.1:80
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1104:14)
  errno: 'ECONNREFUSED',
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '127.0.0.1',
  port: 80,
  config:
   { adapter: [Function: httpAdapter],
     transformRequest: { '0': [Function: transformRequest] },
     transformResponse: { '0': [Function: transformResponse] },
     timeout: 0,
     xsrfCookieName: 'XSRF-TOKEN',
     xsrfHeaderName: 'X-XSRF-TOKEN',
     maxContentLength: -1,
     validateStatus: [Function: validateStatus],
     headers:
      { Accept: 'application/json, text/plain, */*',
        'Content-Type': 'application/json;charset=utf-8',
        'User-Agent': 'axios/0.18.0',
        'Content-Length': 24 },
     method: 'post',
     url: 'http://localhost:80/back/getPinData',
     data: '{"withCredentials":true}' },
  request:
   Writable {
     _writableState:
      WritableState {
        objectMode: false,
        highWaterMark: 16384,
        finalCalled: false,
        needDrain: false,
        ending: false,
        ended: false,
        finished: false,
        destroyed: false,
        decodeStrings: true,
        defaultEncoding: 'utf8',
        length: 0,
        writing: false,
        corked: 0,
        sync: true,
        bufferProcessing: false,
        onwrite: [Function: bound onwrite],
        writecb: null,
        writelen: 0,
        bufferedRequest: null,
        lastBufferedRequest: null,
        pendingcb: 0,
        prefinished: false,
        errorEmitted: false,
        emitClose: true,
        bufferedRequestCount: 0,
        corkedRequestsFree: [Object] },
     writable: true,
     _events:
      [Object: null prototype] {
        response: [Function: handleResponse],
        error: [Function: handleRequestError] },
     _eventsCount: 2,
     _maxListeners: undefined,
     _options:
      { maxRedirects: 21,
        maxBodyLength: 10485760,
        protocol: 'http:',
        path: '/back/getPinData',
        method: 'post',
        headers: [Object],
        agent: undefined,
        auth: undefined,
        hostname: 'localhost',
        port: '80',
        nativeProtocols: [Object],
        pathname: '/back/getPinData' },
     _ended: false,
     _ending: true,
     _redirectCount: 0,
     _redirects: [],
     _requestBodyLength: 24,
     _requestBodyBuffers: [ [Object] ],
     _onNativeResponse: [Function],
     _currentRequest:
      ClientRequest {
        _events: [Object],
        _eventsCount: 6,
        _maxListeners: undefined,
        output: [],
        outputEncodings: [],
        outputCallbacks: [],
        outputSize: 0,
        writable: true,
        _last: true,
        chunkedEncoding: false,
        shouldKeepAlive: false,
        useChunkedEncodingByDefault: true,
        sendDate: false,
        _removedConnection: false,
        _removedContLen: false,
        _removedTE: false,
        _contentLength: null,
        _hasBody: true,
        _trailer: '',
        finished: false,
        _headerSent: true,
        socket: [Socket],
        connection: [Socket],
        _header:
         'POST /back/getPinData HTTP/1.1\r\nAccept: application/json, text/plain, */*\r\nContent-Type: application/json;charset=utf-8\r\nUser-Agent: axios/0.18.0\r\nContent-Length: 24\r\nHost: localhost\r\nConnection: close\r\n\r\n',
        _onPendingData: [Function: noopPendingOutput],
        agent: [Agent],
        socketPath: undefined,
        timeout: undefined,
        method: 'POST',
        path: '/back/getPinData',
        _ended: false,
        res: null,
        aborted: undefined,
        timeoutCb: null,
        upgradeOrConnect: false,
        parser: null,
        maxHeadersCount: null,
        _redirectable: [Circular],
        [Symbol(isCorked)]: false,
        [Symbol(outHeadersKey)]: [Object] },
     _currentUrl: 'http://localhost:80/back/getPinData' },
response: undefined }

Что здесь происходит? Почему getInitialProps работает без использования NGINX, но не работает при использовании обратного прокси-сервера?

Это не связано с Next, если вы сделаете то же самое в любом месте узла, вы, вероятно, получите тот же результат. Я не эксперт, но звучит так, как будто локальный хост внутри докера не является nginx, если я не ошибаюсь, есть возможность выставить другой докеризированный сервис внутри узла.

felixmosh 10.04.2019 19:01

Извините, я не уверен, что понимаю - все остальные вызовы localhost работают, только при вызове из getInitialProps. «Если я сделаю то же самое в любом месте узла, вы получите тот же результат» кажется неверным. Как вы думаете, что мне следует изменить, чтобы все вышеперечисленное заработало (конкретно, если возможно)?

Peter Weyand 10.04.2019 19:03

Проверьте это: stackoverflow.com/questions/30545023/…

felixmosh 10.04.2019 19:04

Там много - я не уверен, что это касается моего вопроса.

Peter Weyand 10.04.2019 19:05
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
4
4
2 114
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

При разрешении URL-адресов из вашего контейнера localhost больше не является вашим фактическим хост-компьютером. Вместо этого это петлевой адаптер самого контейнера.

Если вы пытаетесь вызвать сервер Nginx из контейнера Docker, вам нужно использовать http://webserver:80/back/getPinData.

Вы уже настроили docker-compose.yml на использование мостовая сеть, так что это должно работать сразу.

Абсолютно гениально спасибо. Не знаю, почему я этого не видел.

Peter Weyand 10.04.2019 19:12

@sjagr есть ли способ вызвать по общедоступному URL-адресу из контейнера? Поскольку getInitialProps может вызываться на клиенте, когда он действует как одностраничное приложение, веб-сервер: 80/назад/getPinData определенно не будет работать из клиентского браузера. Любые решения?

Atul Yadav 30.12.2019 17:54

@AtulYadav, вам нужно будет указать порт на хост-компьютере и получить его, используя IP-адрес хоста. Существуют различные сообщения в блогах и вопросы SO, посвященные «извлечению IP-адреса хост-машины из контейнера докеров», поэтому я не буду вдаваться в подробности. Однако для решения конкретной проблемы Next.js, скорее всего, есть флаг, который определяет, когда вы находитесь в коде на стороне сервера или на стороне клиента, чтобы переключить имя хоста. Возможно, это поможет.

sjagr 02.01.2020 21:20

@sjagr эй, спасибо за ответ. Я столкнулся с этой проблемой в дистрибутивном контейнере DigitalOcean Ubuntu + Docker, где контейнер Docker не мог вызвать какой-либо URL-адрес, указывающий на IP-адрес HOST-машины. Однако я попытался с контейнером CentOS и вручную установил Docker + Docker Compose и не обнаружил никаких проблем. ССР работает нормально. Я использую github.com/jaredpalmer/razzle.

Atul Yadav 02.01.2020 22:21

Другие вопросы по теме