Executando verificação de segurança...
2
Kadu
1 min de leitura ·

[HELP] Preciso de ajudar para entender env no Angular

Estou aprendendo Angular e estou desenvolvendo um projeto na versão 20. Fui tentar colocar as variáveis de ambiente, mas o jeito que o Angular faz isso é um pouco diferente do que eu tinha aprendido, e aí ficou o meu questionamento:

Minhas variáveis vão pro repositório do GitHub, por quê?
— “Ah, mas não pode colocar variáveis sensíveis no arquivo de variáveis.”
Eu sei, tá na documentação. Mas e se eu precisar? Tipo, se eu precisar colocar uma chave de API pro front ter acesso, como eu faço?

Outra coisa: se eu quiser alterar uma variável, vou ter que alterar no arquivo e subir pro GitHub de novo?

Eu uso sistemas como o Render, a Vercel e tenho uma VPS que roda o Coolify ou Dokploy, e eles têm um jeito de trabalhar com variáveis de ambiente injetando direto no container da aplicação, o que deixa tudo muito simples. Mas com Angular, parece que não dá pra fazer isso.

Preciso de ajuda, porque já pesquisei bastante e ainda não entra na minha cabeça essa forma de trabalhar. Se alguém puder me explicar de um jeito mais simples, eu agradeceria muito.

Carregando publicação patrocinada...
2
Pilati

se eu precisar colocar uma chave de API pro front ter acesso

Pensa que o usuário tem acesso à tudo que está no front, podendo recuperar e usar essa chave de API.

Você realmente acha uma boa ideia compartilhar uma chave de API com qualquer pessoa que acesse a sua aplicação?

Eu uso 2 abordagens:

Front <-> Back <-> Database, APIS

O back se comunica com qualquer api externa e pode servir como um "wraper" ou proxy para essa api externa, a chave de api fica segura no backend

ou

Front <-> BFF <-> Apis, Backend

BFF é um conceito chamado "backend for front-end", ele é responsável por fazer um proxy do front para qualquer outro serviço, o maior exemplo disso é o NextJS.

Tenho uma aplicação que o front só se comunica com o servidor do NextJS, e esse servidor se comunica com o backend. O backend em sí nem é acessível pelo front

Inclusive a única variável do .env do Next é BACKEND_URL.

É só isso que ele precisa, nada mais

1
Kadu
  • Autor
    Autor

Esse meu questionamento me fez estudar mais sobre o assunto, eu venho do react com next e eu não tenho esse problema com next pois ele cria um servidor para renderizar e enviar o html juntos com css e js para o cliente. ou até o mesmo o vite que podemos usar o import.meta.VITE_APP_ mas isso tambem é acessivel no bundle final do usúario.

O chato é ter criar um backend só para uma funcionalidade, um site que seria simples, por exemplo consumi uma api e mostrar algo na tela

1
1
Honorio

Olá, você até pode subir variáveis de ambiente no github, se forem variáveis de desenvolvimento, que não tenha valor significativo.

Se você esta tentando subir seu front em uma VPS, você deve criar e alterar manualmente o arquivo.env, por exemplo com acesso SSH.

Tudo depende de onde está tentando subir seu app.

Alguns frameworks também tem suas especificidades, por exemplo o nexts.js, para o cliente ter acesso a variáveis de ambiente, as mesmas precisam iniciarem o nome com NEXT_PUBLIC