Получение process.env для работы с ключами API ЗДЕСЬ

Question

Я создаю список географических задач React, похожий на этот. Я использовал API-интерфейс Mapbox для компонента отображения, но я бы хотел переключить его на API-интерфейс Map Image ЗДЕСЬ. Я настроил карту в своем приложении, но хотел бы скрыть app_id а также app_code в .env файл, который я ранее создал. Это возможно? Я знаю, что также возможно ограничить, какие домены имеют доступ к ключу / коду, но я хотел, чтобы ключи были скрыты в .env файл для душевного спокойствия.

Вот мой .env файл (без ключей, конечно):

REACT_APP_HERE_ID={my app_id}
REACT_APP_HERE_CODE={my app_code}

И вот где я представляю это в своем приложении:

const app_id = process.env.REACT_APP_HERE_ID;
const app_code = process.env.REACT_APP_HERE_CODE;

Когда я console.logapp_id а также app_codeони оба возвращаются undefined, Предыдущий API-ключ, который я получил от Mapbox, работал нормально в моем .env файл, но я не могу получить app_id а также app_code ЗДЕСЬ, чтобы быть признанным таким же образом.

Я что-то пропустил? Легче ли просто ограничить, какие домены могут использовать мой идентификатор и код?

Answer 1

Я предполагаю, что вы используете модуль "act-scripts "для сборки / запуска вашего проекта. Кроме того, согласно приведенному выше описанию, я вижу, что вы используете правильный префикс 'REACT_APP_' для объявления любой переменной в вашем файле.env.

Просто сделайте новую сборку приложения, используя команду:

npm run-scripts build

или просто перезапустите приложение, используя:

npm react-scripts start

Я думаю, что это должно работать нормально.

И, да, вы можете ограничить, какой домен должен использовать ваш AppID и AppCode, используя функцию "Защита учетных данных приложения от конкретного домена", предоставленную на https://developer.here.com/, чуть ниже того места, где вы видите свой идентификатор и код.

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