Как установить переменные среды для URL-адресов API, паролей, секретных ключей…
В этом примере приложению необходимо получить всех пользователей из API и отобразить их в виде списка. Но URL-адрес API зависит от того, в какой среде он работает:
- если приложение работает локально, оно должно получать пользователей с адреса «http: // localhost: 3004».
- если приложение запущено в производственной среде, оно должно получать пользователей из «https: // production-api-example».
1. Добавьте файл «.env.local».
Создайте файл в корневом каталоге и назовите его .env.local Затем установите переменную среды для разработки:
SERVER="http://localhost:3004"
Если вы хотите сохранить локально конфиденциальные переменные, такие как пароль, ключи API и секреты, убедитесь, что вы не фиксируете .env.local в своем диспетчере контроля версий (например, Github), добавив .env.local в .gitignore.
2. Добавьте файл «next.config.js».
Создайте файл в корневом каталоге и назовите его next.config.js. Затем вставьте приведенный ниже код:
module.exports = {
env: {
SERVER: process.env.SERVER,
},
};
3. Доступ к переменной среды в вызове API.
После установки следующего файла конфигурации вы можете получить доступ к переменной среды через process.env и использовать ее в вызове API.
const server = process.env.SERVER;
getUsers = () => {
return fetch(`${server}/users`)
.then(res => res.json())
};
Теперь приложение должно работать локально (возможно, вам потребуется перезапустить сервер разработки). Однако нам все еще нужно установить переменную SERVER для производства.
4. Добавьте производственную переменную в Vercel.
Откройте проект приложения на Vercel и нажмите "Настройки". Прокрутите вниз до раздела переменных среды, установите переменную производственной среды и нажмите «Добавить».
Запустите новое развертывание, чтобы применить ваши изменения, например, путем отправки / объединения изменений в вашу основную ветку.
Это все!
Для получения дополнительной информации, пожалуйста, обратитесь к документации Next.js и Vercel:
Ниже репозиторий приложения списка пользователей для справки:
Не стесняйтесь оставлять отзывы и вопросы в комментариях :)
