VueJS приложений неправильно проксируется nginx - PullRequest
Новая
       55

VueJS приложений неправильно проксируется nginx

0 голосов
/ 10 января 2020

Я пытаюсь настроить прокси-сервер nginx на моем локальном компьютере и перенаправить две отдельные конечные точки двум VueJS приложениям, работающим на моем локальном компьютере.

Этот прокси-сервер nginx прослушивает порт 5000 и наблюдает за /app-1 и /app-2, который проксирует localhost:8080 и localhost:8081 соответственно, ie:

  • localhost:5000/app-1 будет переадресовано на localhost:8080 и
  • localhost:5000/app-2 будет перенаправлен на localhost:8081

Это то, что у меня есть в файле nginx.conf: 

server {

    listen       5000;
    server_name  localhost;

    location /app-1/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://localhost:8080/;
    }

    location /app-2/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://localhost:8081/;
    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {
        root   html;
    }

}

Я получаю ошибку с указанным выше кодом:

enter image description here

Похоже, что файл для входа в приложение VueJs не найден. Есть ли какой-то относительный путь, который нужно добавить в location?

Мне удалось заставить его работать с одним приложением со следующим в файле nginx.conf: 

server {

    listen       5000;
    server_name  localhost;

    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass  http://localhost:8080/;
    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {
        root   html;
    }

}

Вышеупомянутое успешно прокси к localhost:8080, и мое приложение Vue успешно работает в браузере, как показано.

enter image description here

Когда я попытался заменить * С 1050 * до location/app-1/, у меня снова возникла та же ошибка 404 (Not Found).

Как мне go узнать, как исправить это?

Цель попытки достичь вышеуказанного заключается в том, чтобы имитировать запуск обоих приложений на одном и том же доменном имени на моем локальном компьютере, чтобы оба приложения могли получить доступ к одному и тому же localStorage. localStorage содержит JWT, который будет использоваться для вызовов API. Если пользователь уже аутентифицирован в app-1, ему / ей не нужно проходить аутентификацию снова в app-2.

В работе оба приложения будут развернуты на одном доменном имени и, следовательно, будут иметь доступ к тому же localStorage. Я надеюсь скопировать ту же производственную среду на свой локальный компьютер.

1 Ответ

0 голосов
/ 10 января 2020

Из-за ошибки в изображении кажется, что страница может быть загружена, тогда она пытается загрузить app.js из http://localhost:5000/js/app.js, что странно, поскольку вы обслуживаете приложение Vue. js в /app-1/ и /app-2/.

Так что, я думаю, проблема в том, как ваше приложение / сборка Vue. js приложения не nginx проблема с прокси.

Если вы используете Vue CLI,

По умолчанию Vue CLI предполагает, что ваше приложение будет развернуто на root домена

Вам необходимо установить publicPath в vue.config.js /app-1/ и /app-2/.

Надеюсь, это поможет.

...