В настоящее время я создаю простое приложение для прогноза погоды, в котором я получаю вызов API OpenWeatherMap и отображаю данные. Проблема в том, что мне трудно скрыть свой ключ API. Я узнал, как скрыть это, используя переменные env, а затем используя dotenv-webpack, чтобы использовать process.env для ссылки на мой ключ API. Однако, когда я попытался объединить и развернуть его на Github Pages, я заметил, что в пакете main.js нет ссылки на мой .env. Вместо этого он отображает его как строку.
В моем коде у меня есть следующее:
const api = process.env.API_KEY;
const lat = lat;
const lon = lon';
const response = await fetch(
`https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&
exclude=minutely&appid=${api}&units=metric`,
{ mode: 'cors' }
);
в связанном файле, это выглядит так:
const e="apiKeyInPlainText",t="49.895138",n="-97.138374",d=await fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${t}&lon=${n}&\n exclude=minutely&appid=${e}&units=metric`,{mode:"cors"})
Есть ли способ заставить веб-пакет хорошо работать с секретами (env var), которые предлагает Github Pages, без ручного редактирования связанного main.js перед развертыванием? Я знаю, что при использовании клиентского подхода вкладка Network в Chrome devtools в любом случае будет отображать полный URL-адрес вызова API, но я хотел узнать обо всем, что я могу сделать в этой ситуации, прежде чем повышать уровень до сервера. побочные вызовы API в будущем.
Заранее спасибо и простите меня, если я неправильно использовал некоторую терминологию.