Настройка Nuxt 3 для работы за обратным прокси
Я пытаюсь создать настройку обратного прокси-сервера с Nginx для моего внешнего интерфейса и внутреннего интерфейса. Мой бэкэнд отлично работает за обратным прокси-сервером, и его пользовательский интерфейс Swagger доступен по общедоступному URL-адресу через мой веб-браузер. Мой фронтенд не такой. Мой интерфейс создан с использованием Typescript и Nuxt 3 (Vue). То, что я хочу выполнить в качестве обратного прокси-сопоставления, выглядит примерно так:
Серверная часть: foo.com/leaf/api/x --> 127.0.0.1:8000/x Интерфейс: foo.com/leaf/y --> 127.0.0.1:3000/y
Для этого я добавил следующие блоки в свой nginx.conf именно в том порядке, как показано здесь:
location /leaf/api/ {
proxy_pass http://localhost:8000/;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location /leaf/ {
proxy_pass http://localhost:3000/;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location / {
root html;
index index.html index.htm;
}
Эта конфигурация работает для серверной части, но не для интерфейса на основе Nuxt. Когда я запускаю сервер разработки Nuxt Nitro, чтобы проверить настройку и перейти к localhost/leaf в моем браузере, он, кажется, отлично извлекает скрипт точки входа Nuxt, но все последующие запросы завершаются с ошибкой 404 или 500:
Я не вижу сообщений об ошибках в процессе терминала Nitro и не вижу ничего полезного в журнале доступа. Я на Windows.
Мой nuxt.config.ts содержит следующее:
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
sourcemap: {
server: true,
client: true
},
ssr: false,
css: [
'primevue/resources/themes/saga-blue/theme.css',
'primevue/resources/primevue.css',
'primeicons/primeicons.css',
'primeflex/primeflex.css',
'/assets/styles/layout.scss'
],
build: {
transpile: ['primevue', 'primeflex']
},
modules: [
'@pinia/nuxt',
'@pinia-plugin-persistedstate/nuxt',
],
vite: {
build: {
sourcemap: 'inline'
},
},
})
Сборка проекта и запуск его с помощью node дает ту же проблему.
Что я делаю не так? Что мне делать, чтобы развернуть мое приложение в среде обратного прокси, если оно написано на Nuxt?
Заранее спасибо за ваш вклад,
Джошуа
Ответы 1
Мне удалось это исправить, изменив блоки местоположения на:
location /leaf/api/ {
proxy_pass http://localhost:8000/;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location /leaf/ {
proxy_pass http://localhost:3000;
# Needed for Node based applications ...
# They only handle packets if the Host header is set to
# the host in the URL **INCLUDING** the port ($proxy_port)
proxy_set_header Host $host:$proxy_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
Включение порта из proxy_pass (того, на котором работает сервер приложений) в заголовке Host запросов, идущих к приложению Nuxt, похоже, решает проблему. Я не знаю подробностей этого.