Оволодіння змінними середовища в вашому проекті Vite + React - javascript.org.ua

Коли ви будуєте сучасний веб-додаток з Vite та React, керування налаштуваннями конфігурації, такими як API-ключі, URL-адреси чи змінні, залежні від середовища, може швидко перетворитись на головний біль. Незалежно від того, чи ви працюєте локально, чи готуєтеся до розгортання в продакшн, вам потрібен чистий та ефективний спосіб керувати цими динамічними налаштуваннями.

У цьому посібнику ми розглянемо, як безшовно інтегрувати змінні середовища у вашому проекті на Vite + React, роблячи ваш додаток розумнішим і гнучкішим. Давайте почнемо!

1. Налаштування файлів .env: основа змінних середовища

Vite значно спрощує роботу з змінними середовища, підтримуючи файли .env прямо з коробки. Ці файли дозволяють зберігати налаштування, специфічні для середовища, які Vite автоматично використовує залежно від вашої поточної конфігурації.

Ви можете створювати різні файли .env для різних середовищ:

.env: Це базовий файл конфігурації з загальними змінними, що використовуються у всіх середовищах.
.env.local: Налаштування для локальної розробки (цей файл ігнорується git, тому він ідеально підходить для особистих конфігурацій).
.env.production: Змінні, що використовуються під час виробничих збірок.
.env.development: Змінні, що використовуються під час розробки.

Приклад файлів `.env`

.env (Спільні змінні)

VITE_API_URL=https://api.example.com   
VITE_APP_NAME=MyApp

.env.local (Налаштування для локальної розробки)

VITE_API_URL=http://localhost:3000   
VITE_APP_NAME=MyApp (Local)

.env.production (Налаштування для продакшн)

VITE_API_URL=https://api.example.com   
VITE_APP_NAME=MyApp (Production)

2. Чому потрібно використовувати префікс VITE_?

У Vite всі змінні середовища повинні починатися з префіксу VITE_. Це гарантує, що лише змінні, явно призначені для фронтенду (клієнтського додатку на React), будуть доступні, запобігаючи випадковому витоку чутливої серверної інформації.

Наприклад:

VITE_API_URL=https://api.example.com

Без префіксу VITE_ ці змінні не будуть доступні у вашому коді React.

3. Доступ до змінних середовища в React

Тепер, коли ми налаштували наші файли .env, давайте перейдемо до використання цих змінних у вашому React-додатку.

У компонентах React ви можете отримати доступ до змінних середовища, використовуючи import.meta.env. Це просто, ефективно та чудово працює з процесом збірки Vite.

Приклад компонента React:

import React from 'react';  

const App = () => {  
 const apiUrl = import.meta.env.VITE_API_URL;  
 const appName = import.meta.env.VITE_APP_NAME;  

 return (  

Welcome to {appName}
API URL: {apiUrl}
    );  
};  

export default App;

У цьому прикладі VITE_API_URL та VITE_APP_NAME витягуються із змінних середовища і впроваджуються в додаток на етапі збірки. Якщо ви працюєте локально чи розгортаєте додаток, правильне значення, залежно від вашого середовища, буде автоматично використано.

4. Як Vite обробляє змінні середовища під час збірки

Коли ви запускаєте процес збірки Vite (vite build), він замінює всі посилання на змінні середовища у вашому коді React на фактичні значення з файлів .env. Це гарантує, що ваш додаток використовує правильні налаштування як під час розробки, так і під час продакшн-збірки.

Наприклад, при збірці для продакшн Vite буде брати значення з .env.production, а під час розробки за замовчуванням буде використовуватись .env.local.

5. Різні середовища: Розробка vs. Продакшн

Розуміння того, як управляти різними конфігураціями між середовищами, є ключем до створення гнучких і надійних додатків.

Під час розробки (npm run dev) Vite використовує змінні з .env.local (або .env, якщо .env.local не існує).
Коли ви будуєте додаток для продакшн (npm run build), Vite автоматично переключиться на .env.production.

Приклад використання:

Уявіть, що ваш додаток взаємодіє з API. Ви можете захотіти мати різні URL-адреси API для середовищ розробки та продакшн.
Ось як ви можете досягти цього:

const apiUrl = import.meta.env.VITE_API_URL;  
console.log(`API URL: ${apiUrl}`); // Виведе різний URL залежно від середовища

6. Важливі поради та найкращі практики

Безпека на першому місці! Ніколи не зберігайте чутливу інформацію (наприклад, API-ключі чи секрети) безпосередньо в змінних середовища фронтенду. Вони можуть бути доступні користувачам через інструменти розробника браузера. Замість цього використовуйте змінні середовища на серверній стороні або бекенд-API для безпечного оброблення чутливих даних.
Підтримка Dotenv Vite використовує пакет dotenv під капотом, тому файли .env будуть автоматично завантажені та оброблені. Це означає, що вам не потрібно турбуватись про додаткову конфігурацію.
Перезбірка після змін Будь-які зміни, внесені до ваших файлів .env, потребують перезбірки додатку. Переконайтесь, що ви перезапустили сервер Vite за допомогою npm run dev або повторно запустили npm run build, щоб зміни набрали чинності.

Висновок

Використання змінних середовища в проекті Vite + React дозволяє спростити конфігурацію вашого додатку та легко керувати налаштуваннями для різних середовищ. Лише кілька простих кроків, і ваш додаток стане адаптивним і масштабованим — незалежно від того, чи працюєте ви локально, чи розгортаєте його в продакшн.

Дотримуючись цього посібника, ви зможете створити більш ефективний, безпечний і гнучкий процес розробки, що відповідає вашим потребам. Успіхів у програмуванні!

Перекладено з: Mastering Environment Variables in Your Vite + React Project