Для чего нужен файл .env?

Файл .env и его назначение

.env (environment) файл - это критичный компонент современной разработки. Он хранит переменные окружения, которые содержат конфиденциальную информацию и конфигурацию приложения, специфичную для каждого окружения.

Что такое переменные окружения

Переменные окружения - это значения, которые отличаются в зависимости от того, где запускается приложение:

• На компьютере разработчика
• На staging сервере
• На production сервере

Зачем нужен .env файл

1. Безопасность - не коммитить секреты

# .env (НЕ коммитится в git)
API_KEY=sk-1234567890abcdef
DATABASE_PASSWORD=mySecurePassword123
JWT_SECRET=super_secret_key_123456

# .gitignore
.env           # Ignore this file
.env.local     # Ignore local overrides
.env.*.local   # Ignore environment-specific files

Если закоммитить .env с секретами в публичный репозиторий - это серьезная уязвимость. Любой может украсть API ключи, пароли и токены.

2. Разные конфиги для разных окружений

# .env.development (development окружение)
API_URL=http://localhost:3000
DATABASE_URL=postgres://localhost:5432/myapp_dev
DEBUG=true
LOG_LEVEL=debug

# .env.production (production окружение)
API_URL=https://api.myapp.com
DATABASE_URL=postgres://prod-server:5432/myapp_prod
DEBUG=false
LOG_LEVEL=error

Без .env пришлось бы менять код перед каждым деплоем.

3. Изоляция локальных изменений

# .env.local (локальные переменные, не в git)
# Каждый разработчик может переопределить значения для своей машины
DATABASE_URL=postgres://mylocal:5432/mydb
API_TIMEOUT=10000

Структура .env файла

# .env

# API конфигурация
REACT_APP_API_URL=https://api.example.com
REACT_APP_API_TIMEOUT=30000

# Authentication
REACT_APP_AUTH_TOKEN_NAME=auth_token
REACT_APP_AUTH_HEADER=Authorization

# Feature flags
REACT_APP_ENABLE_ANALYTICS=true
REACT_APP_ENABLE_BETA_FEATURES=false

# Third-party services
REACT_APP_STRIPE_PUBLIC_KEY=pk_live_1234567890
REACT_APP_GOOGLE_ANALYTICS_ID=UA-1234567-1

# Backend configuration
BACKEND_URL=http://localhost:8000
SECRET_API_KEY=sk_1234567890abcdef

Использование в приложении

React / Next.js

// lib/config.ts
export const config = {
  apiUrl: process.env.REACT_APP_API_URL,
  apiTimeout: parseInt(process.env.REACT_APP_API_TIMEOUT || '30000', 10),
  stripeKey: process.env.REACT_APP_STRIPE_PUBLIC_KEY,
  enableAnalytics: process.env.REACT_APP_ENABLE_ANALYTICS === 'true'
};

// Использование
import { config } from '@/lib/config';

const response = await fetch(`${config.apiUrl}/users`, {
  timeout: config.apiTimeout
});

Next.js (с публичными переменными)

// next.config.ts
module.exports = {
  env: {
    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
    NEXT_PUBLIC_STRIPE_KEY: process.env.NEXT_PUBLIC_STRIPE_KEY
  }
};

// pages/checkout.tsx - браузерный код
import { loadStripe } from '@stripe/js';

const stripe = await loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_KEY // Доступно в браузере
);

Node.js / Backend

// .env
DATABASE_URL=postgres://user:pass@localhost/dbname
JWT_SECRET=super_secret_123
NODE_ENV=development

// app.js
require('dotenv').config(); // Загружаем .env

const dbUrl = process.env.DATABASE_URL;
const jwtSecret = process.env.JWT_SECRET;
const nodeEnv = process.env.NODE_ENV;

Важное правило: NEXT_PUBLIC

# .env.local

# SECRET - доступно только на сервере
API_SECRET_KEY=sk_super_secret_123
DATABASE_PASSWORD=mypassword

# PUBLIC - видно в браузере
NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_STRIPE_KEY=pk_live_1234567890

// На сервере (можем использовать оба)
export async function getServerSideProps() {
  const secret = process.env.API_SECRET_KEY; // OK
  const publicUrl = process.env.NEXT_PUBLIC_API_URL; // OK
}

// В браузере (только PUBLIC)
export default function Page() {
  const publicUrl = process.env.NEXT_PUBLIC_API_URL; // OK
  const secret = process.env.API_SECRET_KEY; // UNDEFINED!
}

.env.example - шаблон для других разработчиков

# .env.example (коммитится в git)
# Этот файл показывает, какие переменные нужны, но без значений

REACT_APP_API_URL=http://localhost:3000
REACT_APP_API_TIMEOUT=30000
REACT_APP_STRIPE_PUBLIC_KEY=pk_test_...

# Инструкция
# 1. Скопируй этот файл: cp .env.example .env.local
# 2. Заполни настоящие значения в .env.local

Распространённые ошибки

# Ошибка 1: Коммитить .env в git
git add .env  # ПЛОХО!
# Решение: добавить в .gitignore
echo ".env" >> .gitignore
echo ".env.local" >> .gitignore

# Ошибка 2: Не переполнять значения для публичных ключей
# ПЛОХО: REACT_APP_SECRET_API_KEY=sk_secret_123
# ХОРОШО: используй только публичные ключи с NEXT_PUBLIC_

# Ошибка 3: Забыть загрузить dotenv модуль
require('dotenv').config(); // Важно добавить в первую строку

# Ошибка 4: Использовать пробелы неправильно
# ПЛОХО: API_KEY = sk_123 (пробелы вокруг =)
# ХОРОШО: API_KEY=sk_123

Пример в React компоненте

// lib/api.ts
const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:3000';

export async function fetchUser(id: string) {
  const response = await fetch(`${API_URL}/api/users/${id}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user: ${response.statusText}`);
  }
  return response.json();
}

// components/UserProfile.tsx
import { fetchUser } from '@/lib/api';

export default function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    fetchUser(userId)
      .then(setUser)
      .catch(console.error)
      .finally(() => setLoading(false));
  }, [userId]);

  if (loading) return <div>Loading...</div>;
  if (!user) return <div>Not found</div>;

  return <div>{user.name}</div>;
}

Проверка переменных при запуске

// lib/validateEnv.ts
export function validateEnv() {
  const required = [
    'REACT_APP_API_URL',
    'REACT_APP_STRIPE_PUBLIC_KEY'
  ];

  const missing = required.filter(
    (key) => !process.env[key]
  );

  if (missing.length > 0) {
    throw new Error(
      `Missing required environment variables: ${missing.join(', ')}`
    );
  }
}

// pages/_app.tsx
import { validateEnv } from '@/lib/validateEnv';

validateEnv(); // Проверяем при запуске

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Security best practices

# 1. НИКОГДА не коммитить .env
.env
.env.local
.env.*.local

# 2. Хранить в .env.example только примеры
REACT_APP_API_URL=http://localhost:3000
REACT_APP_API_KEY=YOUR_API_KEY_HERE

# 3. Ротировать секреты регулярно
# Если секрет утёк - сразу его изменить на сервере

# 4. Разные секреты для разных окружений
# Production секрет != development секрет

Заключение

.env файл критичен для:

• Безопасности (не коммитить секреты)
• Конфигурации (разные значения для dev/staging/prod)
• Гибкости (не менять код, менять только переменные)
• Удобства (каждый разработчик использует свой .env.local)

Всегда помни: НИКОГДА не коммитить настоящие секреты в git!