0

Есть сервер nginx на 80 порту(testsite) и есть webpack dev сервер на 81 порту(test_vue), там vue приложение. Сделал проксирование, но когда перехожу на testsite/test_vue в консоль падает https://testsite/js/app.js net::ERR_ABORTED 404 (Not Found). Подскажите пожалуйста, где мой косяк.

//sites-availeble/testsite.conf  
    location /vue_test/ {
        proxy_pass http://localhost:8081/;
        proxy_redirect off;
        client_max_body_size 4m;
    }
    location /dist/ {
        proxy_pass http://localhost:8081/dist/;
        proxy_redirect off;
        client_max_body_size 4m;
    }  
//vue.config.js  
module.exports = {
  devServer: {
    disableHostCheck: true
  }
}  
3
  • А где у вас правило для /js?
    – Alexey Ten
    5 ноя 2019 в 17:59
  • Я не могу использовать локейшн /js/, тк у testsite есть своя директория js, со своими js и при обращении к ней он будет искать файлы на localhost:8081/js. Мне кажется, что тут нужно смотреть в сторону конфигов вебпака. 6 ноя 2019 в 3:37
  • Мне кажется, что тут нужно смотреть в сторону конфигов вебпака. Ноу. Адрес /js Nginx просто не будет обрабатывать. Вообще у вас все как-то запутано, не могу понять, куда, что отправляется. 6 ноя 2019 в 13:42

2 ответа 2

0

/vue_test/ начало урла проксируется в тестовый сервер? А webpack часто генерирует пути к либам с абсолютными путями.

Установите в тестовый конфиг baseUrl/publicPath https://cli.vuejs.org/config/#publicpath

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/'
    : '/vue_test/'
}

Уберите / в конце прокси для того чтоб прилетал полный путь на сервер.

1
  • Спасибо, работает) 8 ноя 2019 в 5:00
0

Не знаю, что именно у вас не так, ибо нужно смотреть полную конфигурацию и nginx, и webpack, но у меня всё работает без особых хитростей только на nginx, не затрагивая ничего другого.

Конфиг прокси сервера такой:

server {
  listen 8100;
  location / {
    proxy_pass http://localhost:8080/;
    # Установка обычных прокси-хедеров
    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;
    # Установка хедеров для нормального проксирования WebSocket
    # Это необходимо, так как горячая перезагрузка webpack на этом и работает
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}

Возможно, у вас проблема именно в отсутствии хедеров. Про проксирование WebSocket можете ознакомиться в официальных доках.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.