Я использую Next JS и у меня проблемы с его использованием в продакшене, размещенном в подкаталоге:
Итак, моя установка выглядит следующим образом:
- У меня есть Next JS приложение с настраиваемым
server.js
и _app.js
- Приложение размещено на AWS.
- Доступ к приложению можно получить с разных URL-адресов:
https://domain/germany/app
, https://domain/france/app
, https://domain/africa/morocco/app
, ... et c - В зависимости от URL-адреса мы загружаем конкретную c конфигурацию для приложения
Проблема в начале не могла быть для доступа к приложению ВСЕГО, поскольку Next пытается загрузить активы из Root https://domain/
вместо https://domain/subdirectory
Текущее решение: Имеет промежуточное ПО в server.js
для перезаписи URL-адресов и удаления подкаталога:
server.use(function (req, res, next) {
const reqUrl = req.protocol + '://' + req.headers.host + req.url
const config = loadConfigfromUrl(reqUrl)
const subdirectory = config.subdirectory
app.setAssetPrefix(subdirectory || '')
req.url = req.url.replace(subdirectory, '') || '/'
req.appConfig = config
return next()
})
Таким образом, если мы получим доступ к приложению, например https://domain/africa/morocco/app
, подкаталог будет subdirectory=/africa/morocco
, тогда URL-адрес запроса станет после rewrite: req.url=https://domain/app
, и мы передаем конфигурацию в приложение в запросе, чтобы мы могли сохранить ее в _app.js
Проблемы с этим, поэтому lution:
- Каждый
Link
в приложении должен иметь префикс config.subdirectory
(пример: <Link href={'${config.subddirectory}/todos/${id}'}
- Каждый актив также должен иметь префикс
src: 'url(${subdirectory}/static/font.ttf)'}
и <img src={${subdirectory}/static/images/logo.svg}
Но все же при первой загрузке иногда appConfig
, который мы передаем с сервера, оказывается пустым, что вызывает огромное количество 404
, поскольку subdirectory
- это undefined
.. .
Мне интересно, был ли у кого-нибудь опыт работы с чем-то подобным и позволяет ли Next это