Как вынести настройки переменных JavaScript вне репозитория?
Здравствуйте.
Есть сайт site.example.com. Есть сервер, на котором поднят веб-сокет ws.example.com. Есть локальные компьютеры разработчиков, есть сервер разработки, которые на совершенно других доменах.
JS скрипты собираются веб-паком.
Как адрес подключения к веб-сокету указать в каких-нибудь настройках, но так, чтобы в собранный файл попадал правильный сервер и работало везде? При этом настройки всегда можно было переопределить локально или на сервере разработки.
Как в php (да и практически везде на бэкэнде, наверное), допустим, есть config.php с основными настройками, которые уходят в репозиторий. И есть config.local.php, в котором переопределяется что нужно и файл не уходит в репозиторий. Сливаются 2 файла и получаем те настройки, которые нужны на данном конкретно сервере. Все счастливы.
С учётом веб-пака такая схема тут не прокатит - будет кто последний, тот и папа.
Как быть?
у вас при сборке вебпака может указываться среда сборка process.env.NODE_ENV равная production или development, относительно ее можно разруливать значения тех или иных переменных
это не подходит и в этом-то и проблема, т.к. вебпак соберет с какими-то конкретными значениями, которые должны отличаться.
если сказать вебпаку собрать некий единый /js/script.js с NODE_ENV=production со значениями боевого сервера, то он и соберёт с этими значениями. и открыв локальный сайт с подключенным только что собранным /js/script.js, то работать будет неправильно, т.к. собранный файл будет обращаться к боевому серверу, а нужно к локальному.
этот готовый /js/script.js должен быть одинаков для всех серверов
пока вижу только такое решение.
на стороне бэкэнда в конфигах, которые вне репозитория, указать адрес вебсокета. при сборке страницы подставлять его в data атрибут какого-нибудь html элемента. а общий и одинаковый для всех js будет читать из этого атрибута адрес и открывать соединение
Заведите отдельный config.js, который на самом деле генерируется, например, тем же PHP и содержит в себе то, что нужно в зависимости от того, откуда пришёл запрос.
Вы уже как-то решили свой вопрос? А то не отмечено решение ((
У меня такая же проблема, на фронте полностью отказался от php и перешел на HTML + JS (я правда бандл собираю через gulp) и тоже столкнулся с проблемой что задача gulp build собирает бандл который тоже должен работать и на локалке и на сервере и тоже гадаю где мне хранить путь (в моем случае до API сервера)
Я пока что придумал такое решение есть gulpfile.js в котором делаем
1. две переменные apiPathDev и apiPathProd
2. две задачи build-dev и build-prod
в зависимости от того какая задача выполняется в ней выполняется подстановка в index.html в какой-нибудь элемент, например в атрибут data-api-path="url-here"
а дальше js при старте подхватывает это значение и помещает в переменную
