nginx не видит webpack dev сервер


nginx не видит webpack dev сервер

05.11.2019 01:25:53 Просмотров 81 Источник

Есть сервер 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
  }
}  
У вопроса есть решение - Посмотреть?

https://ru.stackoverflow.com/questions/1042521/nginx-%d0%bd%d0%b5-%d0%b2%d0%b8%d0%b4%d0%b8%d1%82-webpack-dev-%d1%81%d0%b5%d1%80%d0%b2%d0%b5%d1%80#comment1778664_1042521
А где у вас правило для /js?
https://ru.stackoverflow.com/questions/1042521/nginx-%d0%bd%d0%b5-%d0%b2%d0%b8%d0%b4%d0%b8%d1%82-webpack-dev-%d1%81%d0%b5%d1%80%d0%b2%d0%b5%d1%80#comment1778926_1042521
Я не могу использовать локейшн /js/, тк у testsite есть своя директория js, со своими js и при обращении к ней он будет искать файлы на localhost:8081/js. Мне кажется, что тут нужно смотреть в сторону конфигов вебпака.

Ответы - nginx не видит webpack dev сервер / nginx не видит webpack dev сервер

Liquid Solid

06.11.2019 04:31:11

Не знаю, что именно у вас не так, ибо нужно смотреть полную конфигурацию и 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 можете ознакомиться в официальных доках.

Является ответом!
eri

06.11.2019 04:50:28

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

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

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

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

https://ru.stackoverflow.com/questions/1042521/nginx-%d0%bd%d0%b5-%d0%b2%d0%b8%d0%b4%d0%b8%d1%82-webpack-dev-%d1%81%d0%b5%d1%80%d0%b2%d0%b5%d1%80/1043047#comment1780879_1043047
Спасибо, работает)
Помочь в развитии проекта:
Закрыть X