Итак, у меня есть компонент 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, но не работает при использовании обратного прокси-сервера?
Извините, я не уверен, что понимаю - все остальные вызовы localhost работают, только при вызове из getInitialProps. «Если я сделаю то же самое в любом месте узла, вы получите тот же результат» кажется неверным. Как вы думаете, что мне следует изменить, чтобы все вышеперечисленное заработало (конкретно, если возможно)?
Проверьте это: stackoverflow.com/questions/30545023/…
Там много - я не уверен, что это касается моего вопроса.
При разрешении URL-адресов из вашего контейнера localhost
больше не является вашим фактическим хост-компьютером. Вместо этого это петлевой адаптер самого контейнера.
Если вы пытаетесь вызвать сервер Nginx из контейнера Docker, вам нужно использовать http://webserver:80/back/getPinData
.
Вы уже настроили docker-compose.yml
на использование мостовая сеть, так что это должно работать сразу.
Абсолютно гениально спасибо. Не знаю, почему я этого не видел.
@sjagr есть ли способ вызвать по общедоступному URL-адресу из контейнера? Поскольку getInitialProps может вызываться на клиенте, когда он действует как одностраничное приложение, веб-сервер: 80/назад/getPinData определенно не будет работать из клиентского браузера. Любые решения?
@AtulYadav, вам нужно будет указать порт на хост-компьютере и получить его, используя IP-адрес хоста. Существуют различные сообщения в блогах и вопросы SO, посвященные «извлечению IP-адреса хост-машины из контейнера докеров», поэтому я не буду вдаваться в подробности. Однако для решения конкретной проблемы Next.js, скорее всего, есть флаг, который определяет, когда вы находитесь в коде на стороне сервера или на стороне клиента, чтобы переключить имя хоста. Возможно, это поможет.
@sjagr эй, спасибо за ответ. Я столкнулся с этой проблемой в дистрибутивном контейнере DigitalOcean Ubuntu + Docker, где контейнер Docker не мог вызвать какой-либо URL-адрес, указывающий на IP-адрес HOST-машины. Однако я попытался с контейнером CentOS и вручную установил Docker + Docker Compose и не обнаружил никаких проблем. ССР работает нормально. Я использую github.com/jaredpalmer/razzle.
Это не связано с Next, если вы сделаете то же самое в любом месте узла, вы, вероятно, получите тот же результат. Я не эксперт, но звучит так, как будто локальный хост внутри докера не является nginx, если я не ошибаюсь, есть возможность выставить другой докеризированный сервис внутри узла.