Nextjs getInitialProps 不适用于 NGINX

Posted 2023-03-06

【中文标题】Nextjs getInitialProps 不适用于 NGINX

【英文标题】：Nextjs getInitialProps not working with NGINX

【发布时间】：2019-09-01 05:13:10

【问题描述】：

所以我有一个 Next.js React 组件，它使用 getInitialProps 在初始页面加载之前调用后端获取一些数据。这是它的样子：

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

    
    return pinData: pinReturn
  

我认为这很容易解释 - 当我的后端是一个简单的 docker 容器时它可以工作。但是，现在我正在使用 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-defining-the-web-server-configuration）：

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 

如果我从 curl 调用 http://localhost:80/back/getPinData，那么我会得到我期望的数据。它通过 nginx 路由它，点击我的 docker-compose，然后路由到我的 nodejs 应用程序中的正确位置。但是，如果我从 getInitialProps 调用该 API，我会收到以下错误：

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 无关，如果您在节点的任何位置执行相同的操作，您可能会得到相同的结果。我不是专家，但听起来 docker 内的 localhost 不是 nginx，如果我没记错的话，可以选择在节点一内公开其他 dockerized 服务。

对不起，我不确定我是否遵循 - 所有其他对 localhost 的调用都有效，只有从 getInitialProps 调用时才会失败。 “如果我在节点的任何地方做同样的事情，你会得到相同的结果”似乎不正确。你认为我应该改变什么才能使上述工作（如果可能的话具体地）？

看看这个：***.com/questions/30545023/…

那里有很多 - 我不确定这是否解决了我的问题。

【参考方案1】：

从容器中解析 URL 时，localhost 不再是您的实际主机。相反，它是容器本身的环回适配器。

如果您尝试从 Docker 容器中调用 Nginx 服务器，则需要使用http://webserver:80/back/getPinData。

您已经将您的docker-compose.yml 设置为使用bridge network，因此应该可以立即使用。

【讨论】：

非常棒，谢谢。不知道为什么我没有看到。

@sjagr 有没有办法使用容器内的公共 URL 进行调用？由于在充当单页应用程序时可能会在客户端调用 getInitialProps，因此 webserver:80/back/getPinData 肯定无法在客户端浏览器中运行。有什么解决办法吗？

@AtulYadav 您需要将端口公开给主机并使用主机 IP 获取。有各种博客文章和 SO 问题解决了“从 docker 容器中获取主机 IP”的问题——所以我不会讨论这个。但是，为了解决 Next.js 的特定问题，可能会有一个标志来检测您何时在服务器端或客户端代码中切换主机名。也许this will help.

@sjagr 嘿，感谢您的回复。我在 DigitalOcean Ubuntu + Docker 分发容器上遇到了这个问题，其中 Docker 容器无法调用任何指向主机 IP 地址的 URL。但是我尝试使用 CentOS 容器并手动安装 Docker + Docker Compose 并没有发现任何问题。 s-s-r 工作得很好。我正在使用 github.com/jaredpalmer/razzle。