.env e .gitignore: segurança e organização
Entenda o que é .env, por que variáveis de ambiente são importantes e como usar .gitignore.
- #Curso de Frontend
- #Configuração de Projeto
- #.env
- #.gitignore
- #Segurança
- #Configuração
O que é .env?
.env é um arquivo usado para guardar variáveis de ambiente. Esses valores podem mudar dependendo do ambiente.
No backend, crie o arquivo .env na raiz do projeto backend-node, no mesmo nível do package.json. Não crie o .env dentro da pasta src.
Lendo as variáveis: PORT define onde o backend roda, DB_HOST e DB_PORT indicam onde o banco está, DB_USER e DB_PASSWORD são as credenciais, DB_NAME é o banco usado e CORS_ORIGIN é o frontend autorizado.
PORT=3001
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=
DB_NAME=frontend_course_backend
CORS_ORIGIN=http://localhost:5173Por que .env é importante?
O .env separa configuração de código e evita escrever senhas, tokens e URLs privadas diretamente nos arquivos da aplicação.
Mesmo em projeto de estudo, trate .env como arquivo privado. Ele não deve ser enviado para o GitHub.
Usando dotenv no backend
A biblioteca dotenv carrega variáveis de um arquivo .env para process.env.
Abra backend-node/src/server.js e coloque import dotenv from "dotenv" no topo. Chame dotenv.config() antes de ler process.env.PORT, process.env.DB_HOST ou qualquer outra variável.
Lendo o código: dotenv.config() deve rodar antes de usar process.env. Sem essa chamada, o Node não carrega automaticamente os valores escritos no arquivo .env.
import dotenv from "dotenv";
dotenv.config();
const port = process.env.PORT || 3001;.gitignore
.gitignore diz ao Git quais arquivos e pastas não devem ser enviados para o repositório.
No backend-node, crie ou abra o arquivo .gitignore na raiz do projeto. Adicione as linhas abaixo e salve. O arquivo package-lock.json deve continuar fora do .gitignore.
Lendo o .gitignore: cada linha é um arquivo, pasta ou padrão que o Git deve ignorar. node_modules é recriado com npm install, .env é privado e arquivos de log são saídas temporárias.
node_modules
.env
dist
logs
*.log.env.example
Como o .env não será enviado para o GitHub, crie um .env.example na raiz do backend-node para mostrar quais variáveis o projeto precisa.
O .env.example pode ter valores de exemplo, mas não deve ter senhas reais. Se a senha local estiver em branco, deixe DB_PASSWORD vazio como no exemplo.
PORT=3001
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=
DB_NAME=frontend_course_backend
CORS_ORIGIN=http://localhost:5173.env no frontend com Vite
No Vite, variáveis disponíveis no navegador precisam começar com VITE_. Não coloque senha ou segredo no .env do frontend.
No projeto React, crie um arquivo .env na raiz do frontend, no mesmo nível do package.json do frontend. Coloque a URL base da API. Depois de criar ou alterar esse arquivo, pare e rode npm run dev novamente no frontend para o Vite carregar a variável.
Lendo VITE_API_URL: o frontend usará esse valor como começo da URL. Quando o código chamar /search, o Axios juntará com http://localhost:3001/api e chamará http://localhost:3001/api/search.
VITE_API_URL=http://localhost:3001/api
