O que são variáveis de ambiente?
As variáveis de ambiente são valores predeterminados que normalmente são usados para fornecer a capacidade de configurar um valor no seu código de fora do aplicativo.
Ao desenvolver localmente, ou às vezes até em um pipeline de implantação, muitas vezes você encontra essas variáveis armazenadas em um arquivo nomeado com algum tipo de variação de .env.
Como as variáveis de ambiente podem ser úteis?
Provavelmente, o caso de uso mais comum para variáveis de ambiente é poder configurar diferentes opções de configuração para diferentes ambientes. Muitas vezes, ao desenvolver serviços de terceiros, você deseja ter uma versão ou sandbox de desenvolvimento disponível para fazer solicitações de teste, para que não afete os dados reais da produção.
Onde variáveis de ambiente são úteis, é possível alterar quais de seus ambientes usam qual ambiente de serviço de terceiros, alterando uma chave de API, terminal ou o que o serviço usa para distinguir entre ambientes.
O código que você implanta deve ser previsível; portanto, não sendo necessário alterar nenhum código, apenas a configuração fora do código, você pode manter essa previsibilidade.
Como posso manter esses arquivos seguros?
Este é provavelmente um dos pontos mais importantes aqui – você precisa garantir que você esteja manipulando esses arquivos com cuidado e não verificando-os em um repositório git. Ao expor essas chaves inadvertidamente, enviando-as para um local público, a Internet pode facilmente encontrar essas chaves e abusá-las para obter seus próprios ganhos.
Por exemplo, AWS chaves são uma fonte valiosa. As pessoas executam bots com o único objetivo de tentar verificar as chaves no Github. Se alguém encontrar uma chave da AWS, poderá usá-la para acessar recursos, como executar uma operação de bitcoin às suas custas. Isso não é para assustar você, é para conscientizá-lo para evitar que suas chaves sejam comprometidas.
Então, como podemos mantê-los seguros? A maneira mais fácil é adicionar o arquivo de ambiente em que você mantém essas chaves no seu .gitignore Arquivo.
Para fazer isso, basta abrir o seu existente .gitignore ou crie um novo na raiz do seu repositório e adicione o nome do arquivo como uma nova linha:
# Inside .gitignore.envSe você deseja se tornar mais avançado e garantir que isso nunca aconteça com um repositório, confira algumas ferramentas como segredos do AWS Labs ou GitLeaks que ainda tem um Ação do Github para facilitar a integração com o Github.
Gatsby e variáveis de ambiente
Gatsby por padrão, disponibiliza dois arquivos como parte de sua fluxo de trabalho da variável de ambiente que disponibiliza esses valores no cliente: .env.development e .env.production. Estes se correlacionam com o gatsby develop e gatsby build scripts para desenvolver ou construir seu site.
Para usar esses arquivos no processo de desenvolvimento e construção do Gatsby, o Gatsby exige que você prefixe essas variáveis com GATSBY_. Isso também funciona se você desejar que eles estejam disponíveis em um nível de processo do SO.
Embora você possa integrar dotenv se você tiver necessidades mais avançadas ou não quiser usar o GATSBY_ Como prefixo, seu caminho de menor resistência provavelmente é apenas seguir o caminho de Gatsby ao trabalhar em Gatsby.
Netlify e variáveis de ambiente
Netlify fornece a capacidade de adicionar variáveis de ambiente como parte de sua Construir e implantar configurações escolhidas como parte dos processos de construção.
Felizmente, o Netlify facilita a adição de qualquer variável de ambiente que você deseje ao processo de compilação! Para adicionar um, você pode simplesmente navegar até o Meio Ambiente seção do seu projeto Construir e implantar página de configurações e adicione uma variável em Variáveis ambientais.
Nós o guiaremos por esse processo um pouco mais tarde.
Etapa 1: Criando um site “Olá, mundo”
Para o nosso passo a passo, vamos configurar um exemplo realmente básico de um site do Gatsby apenas para fins de teste.
Embora esse não seja realmente um caso de uso comum de variáveis de ambiente, onde normalmente você as usaria para coisas como chaves de API e configurações de serviço, isso lhe dará uma ótima idéia de como funciona fundamentalmente.
Nós vamos usar isso Gatsby Sass Starter Eu criei o que nos dará um ponto de partida e adicione “Olá, [Environment]”dependendo de onde está sendo executado.
Para começar, vamos criar nosso projeto local usando o comando Gatsby CLI. Navegue até o local em que deseja armazenar este projeto e execute:
gatsby new my-env-project https://github.com/colbyfayock/gatsby-starter-sassVocê pode mudar my-env-project para o diretório em que você deseja que este projeto seja criado, mas depois de executar este comando, você terá um projeto nesse novo diretório.
Para começar, uma vez dentro desse diretório, execute yarn develop para fazer alterações localmente ou yarn build para compilar seu novo site.
Quando estiver pronto, você poderá adicionar este projeto ao Github. Se você não estiver familiarizado com como fazer isso, você pode:ganhar como adicionar um projeto existente ao Github aqui:
Etapa 2: Criando uma variável de ambiente local com o Gatsby
Nosso próximo passo é criar um ambiente local e adicionar uma alteração que nos permita ver que funciona.
Para começar, primeiro vamos criar um novo arquivo na raiz do nosso projeto chamado .env.development. Pode perguntar se você realmente deseja usar o . prefixo, certifique-se de dizer sim!
Dentro desse arquivo, vamos adicionar:
# Inside .env.developmentGATSBY_MY_ENVIRONMENT="Development"
Em seguida, para garantir que não esquecemos de fazer isso, vamos adicionar também .env.development arquivo para o nosso .gitignore então não acidentalmente comprometemos isso com a nossa história do git. Se você ainda não tem um .gitignore arquivo, certifique-se de criá-lo na raiz do seu projeto.
Finalmente, para verificar se isso funciona, vamos abrir pages/index.js e vamos substituir nossa
o conteúdo da tag com um “Olá, mundo!” variação:
Hello, {process.env.GATSBY_MY_ENVIRONMENT}
E se salvarmos essa alteração e a abrirmos em nosso navegador, veremos “Olá, Desenvolvimento”!
Etapa 3: implantando o site no Netlify
Por isso, criamos nosso site usando uma variável de ambiente simples; portanto, a seguir, queremos implantar esse site no Netlify. Se você ainda não o fez, precisaremos adicione nosso site ao Github ou outro provedor Git. Certifique-se de configurá-lo antes de continuar.
Após criar uma conta e fazer login no Netlify, clique no ícone Novo site do Git abotoe o painel principal, siga as instruções para conectar seu Github ou outro provedor Git ao Netlify e encontre seu novo repositório.
Depois de selecionar seu repositório, você será solicitado a configurar seu processo de compilação. Felizmente, o Netlify pode detectar que estamos usando um site do Gatsby e o pre-preencheu para nós. A menos que você tenha adicionado algo especial, mantenha a configuração básica para usar gatsby build para construir seu projeto e public/ para a saída.
Agora antes de batermos Implantar, há uma coisa que queremos adicionar e essa é a nossa variável de ambiente!
Logo acima do Implantar site botão há um Avançado botão. Clique nele e você verá um novo menu suspenso com um adicional Nova variável botão.
Clique nesse Nova variável botão, adicione nosso GATSBY_MY_ENVIRONMENT como uma nova variável e adicione Production como o valor E finalmente, aperte Implantar site!
A partir daqui, você poderá assistir ao seu site ser implantado e, uma vez terminado, verá seu novo site com “Olá, Produção”!
Onde você pode adicionar ou atualizar mais variáveis no Netlify?
Com o nosso exemplo, adicionamos apenas uma variável durante a instalação, mas o Netlify permite adicionar ou atualizar outras variáveis que você desejar.
Se você quiser alterar essa variável ou adicionar mais, navegue até o Meio Ambiente seção do Construir e implantar configurações, onde você pode editar e adicionar outras variáveis no Variáveis ambientais seção.
Quer aprender mais?
Aqui estão algumas outras coisas para ajudá-lo a começar com os fundamentos do desenvolvimento!
