Хобрук: Ваш путь к мастерству в программировании

Использование process.env при рендеринге на стороне сервера

У меня есть приложение для реагирования, которое довольно хорошо работает на стороне клиента, и теперь я пытаюсь заставить его работать на стороне сервера.

Я использую его с шаблоном create-react-app: https://github.com/facebookincubator/create-react-app

У меня возникла проблема, когда я сохраняю некоторые переменные среды в .env, однако на сервере я не могу получить доступ к этим переменным.

Таким образом, такая строка, как axios.get(process.env.API_URL + 'something'), пройдет через 404, потому что process.env.API_URL это undefined.

Насколько я понимаю, .env — это файл, который я должен использовать для подобных вещей. Я не прав? Должен ли я использовать другой метод для хранения общих переменных среды? Или есть способ заставить сервер узла распознавать эти значения?


Ответы:


1

Вы можете (должны) обслуживать производственную сборку.

Когда вы создаете npm run build, webpack берет записи из вашего .env файла и заменяет их в сборке соответствующими значениями.

Для рендеринга на стороне сервера вам нужно будет определить переменные среды на вашем сервере узла, либо как системные переменные среды, либо в .env, прочитанном вашим внутренним сервером (который может быть тем, который использует webpack-dev-server).

07.09.2017

2

В соответствии с создайте документы приложения React, чтобы предоставить переменные среды для React как в статических, так и в SSR-приложениях, имена переменных должны иметь префикс REACT_APP_. Это предотвращает включение конфиденциальных и/или ненужных переменных в пакет javascript.

30.10.2019
Новые материалы

Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..

Как настроить Selenium в проекте Angular
Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..

Аргументы прогрессивного улучшения почти всегда упускают суть
В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..

Введение в Джанго Фреймворк
Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..

Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..

Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..

стройный-i18следующий
Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..