Next.js под прокси с другим путем - PullRequest
Новая
       8

Next.js под прокси с другим путем

3 голосов
/ 06 марта 2019

Использование версии next.js 8.0.3 Я не знаю, как обслуживать пользовательский сервер под прокси-сервером с другим подпути.

Я делаю:

npm run build && npm start

Для того, чтобы построить и открыть пользовательский сервер.

И вместо открытия http://localhost:3000, Я использую прокси с другим подпутем http://localhost:8000/example.

Прокси прост, чтобы воспроизвести это:

proxy.js 

const express = require('express')
const proxy = require('http-proxy-middleware')

const options = {
  target:'http://localhost:3000/',
}
const exampleProxy = proxy(options)
const app = express()

app.use('/example', exampleProxy)
app.listen(8000)

А потом: 

node proxy.js

Однако, когда я открываюhttp://localhost:8000/example URL-адрес загружает домашнюю страницу, но без стилей, статики, JavaScript ... Что-нибудь ...

Как я могу сделать это правильно?

Большое спасибо!

1 Ответ

2 голосов
/ 06 марта 2019

В качестве предостережения я начну с того, что не верю, что NextJS хорошо работает с прокси-серверами, особенно на подпути.

При этом должно работать следующее с ограничениями: 

const express = require('express')
const proxy = require('http-proxy-middleware')

const options = {
  target:'http://localhost:3000/',
  pathRewrite: {
    '^/example': ''
  }
}
const exampleProxy = proxy(options)
const app = express()

app.use(['/example', '/_next', '/static'], exampleProxy)
app.listen(8000)

Опция pathRewrite гарантирует, что /example/xyz на прокси перенаправит на /xyz на вашем сервере NextJS.

Вам необходимо прокси /_next ( или любой другой, который вы переименовали в каталог сборки на ), чтобы на вашей странице были найдены все встроенные ресурсы (скрипты, таблицы стилей, блоки веб-пакетов и т. Д.). Если вы осмотрите любую из страниц вашего проекта Next, вы увидите, что эти ссылки на ресурсы являются абсолютными, поэтому необходимо также проксировать этот каталог.

Вам необходимо прокси /static по той же причине, за исключением того, что каталог предназначен для хранения ваших статических ресурсов NextJS (изображений и т. Д.).

Вы также заметите, что ссылки на вашей странице в Next, как правило, также являются абсолютными (я знаю, что мои ссылки есть во всех моих проектах).

Все вышесказанное является причиной, по которой я заявил, что, по моему мнению, NextJS действительно не подходит для использования прокси-подпути.

Обновление:

Вы можете добавить следующую конфигурацию в файл next.config.js в корне вашего проекта NextJS: 

module.exports = {
  assetPrefix: '/example'
}

Это добавит /example ко всем построенным активам, поэтому вместо /_next/pages/xyz вы будете ссылаться на /example/_next/pages/xyz. С помощью этого обновления вы можете удалить прокси /_next со стороны прокси, и ваши наращиваемые ресурсы (скрипты, таблицы стилей и т. Д.) По-прежнему должны загружаться.

Что касается навигационных (то есть "страницы") ссылок в вашем приложении NextJS, как указано в моем комментарии, вы можете установить собственную версию Link и добавить свой подпуть: 

import Link from 'next/link'

// for proxied server
const PROXY_PATH= '/example'
// for non-proxied server
// const PROXY_PATH= ''

export default MyLink = ({ as, children, ...props }) => <Link {...props} as={`${PROXY_PATH}${as}`}>{children}</Link>

Вы должны убедиться, что все ваши MyLink компоненты определяют as проп. Вы не хотите изменить саму href опору (ссылка равна ), только опора as (ссылка отображается ).

Наконец, для ресурсов /static вам просто нужно переписать статические ссылки внутри приложения NextJS, т.е. включить 

<img src='/static/mylogo.svg' />

до 

<img src=`${PROXY_PATH}/static/mylogo.svg` />

И переписать путь на конце прокси должен правильно. При этом вы можете определить PROXY_PATH в области проекта в отдельном конфигурационном файле или загрузить его из переменной среды.

...