Ce sunt variabilele de mediu și cum le pot folosi cu Gatsby și Netlify?

Când începeți să integrați servicii terțe în aplicația sau site-ul dvs. web, veți începe să găsiți util să aveți medii diferite, cum ar fi un mediu de dezvoltare și producție.

Cum putem configura acest lucru, astfel încât să nu avem nevoie să ne edităm direct codul pentru a ne schimba mediul?

  • Ce sunt variabilele de mediu?
  • Cum pot fi utile variabilele de mediu?
  • Cum pot păstra aceste fișiere în siguranță?
  • Gatsby și variabile de mediu
  • Netlify și variabile de mediu
  • Pasul 1: Crearea unui site web „Bună ziua, lume”
  • Pasul 2: Crearea unei variabile de mediu locale cu Gatsby
  • Pasul 3: Implementarea site-ului web pe Netlify
  • Unde puteți adăuga sau actualiza mai multe variabile în Netlify?

Ce sunt variabilele de mediu?

Variabilele de mediu sunt valori predeterminate care sunt utilizate de obicei pentru a oferi posibilitatea de a configura o valoare în codul dvs. din afara aplicației dvs.

Când vă dezvoltați local, sau uneori chiar într-o conductă de implementare, veți găsi adesea aceste variabile stocate într-un fișier numit cu un fel de variație de   .env.

Cum pot fi utile variabilele de mediu?

Probabil cel mai frecvent caz de utilizare pentru variabilele de mediu este posibilitatea de a configura diferite opțiuni de configurare pentru medii diferite. Adesea, atunci când vă dezvoltați împotriva unor servicii terțe, doriți să aveți o versiune de dezvoltare sau un sandbox disponibil pentru a face cereri de testare, astfel încât să nu aibă impact asupra datelor reale de producție.

Variabilele de mediu sunt utile, deoarece vă permit să schimbați care dintre mediile dvs. utilizează ce mediu de serviciu terță parte schimbând o cheie API, un punct final sau orice altceva pe care îl folosește serviciul pentru a distinge între medii.

Codul pe care îl implementați ar trebui să fie previzibil, deci, prin faptul că nu trebuie să modificați niciun cod, doar configurația în afara codului, puteți menține această predictibilitate.

Cum pot păstra aceste fișiere în siguranță?

Acesta este probabil unul dintre cele mai importante puncte de aici - trebuie să vă asigurați că gestionați aceste fișiere cu grijă și nu le verificați într-un depozit git. Expunând aceste chei încărcându-le din greșeală într-o locație publică, internetul ar putea găsi cu ușurință aceste chei și le poate abuza pentru propriile câștiguri.

De exemplu, cheile AWS sunt o sursă valoroasă. Oamenii rulează roboți cu singurul scop de a încerca să scaneze Github după chei. Dacă cineva găsește o cheie AWS, ar putea folosi această cheie pentru a accesa resurse, cum ar fi executarea unei operațiuni bitcoin pe cheltuiala dvs. Aceasta nu este pentru a vă speria, ci pentru a vă conștientiza, astfel încât să evitați compromiterea cheilor.

Deci, cum le putem păstra în siguranță? Cel mai simplu mod este să adăugați fișierul de mediu în care păstrați aceste chei în .gitignorefișier.

Pentru a face acest lucru, pur și simplu deschideți .gitignorefișierul existent sau creați unul nou la rădăcina depozitului și adăugați numele fișierului ca o nouă linie:

# Inside .gitignore .env 

Dacă doriți să fiți mai avansați și să vă asigurați că acest lucru nu se întâmplă niciodată cu un depozit, puteți verifica câteva instrumente precum git-secrets de la AWS Labs sau GitLeaks, care are chiar și o acțiune Github pentru a facilita integrarea cu Github.

Gatsby și variabile de mediu

În mod implicit, Gatsby pune la dispoziție două fișiere ca parte a fluxului de lucru variabil de mediu care face ca aceste valori să fie disponibile în client: .env.developmentși .env.production. Acestea sunt corelate cu scripturile gatsby developși gatsby buildpentru a vă dezvolta sau construi site-ul.

Pentru a utiliza aceste fișiere în cadrul procesului de dezvoltare și construcție Gatsby, Gatsby vă cere să prefixați aceste variabile cu GATSBY_. Acest lucru funcționează și dacă doriți ca acestea să fie disponibile de la un nivel de procesare al sistemului de operare.

Deși ați putea integra dotenv dacă aveți nevoi mai avansate sau nu doriți să utilizați GATSBY_prefixul, calea dvs. de rezistență minimă este probabil să urmați doar calea Gatsby atunci când lucrați în Gatsby.

Netlify și variabile de mediu

Netlify oferă posibilitatea de a adăuga variabile de mediu ca parte a setărilor sale Build & deploy , care sunt preluate ca parte a proceselor de build.

Din fericire, Netlify facilitează adăugarea oricărei variabile de mediu pe care doriți să o construiți! Pentru a adăuga una, puteți naviga pur și simplu la secțiunea Mediu din pagina de setări Construiți și implementați proiectul dvs. și puteți adăuga o variabilă în Variabile mediul înconjurător.

Vă vom ghida prin acest proces puțin mai târziu.

Pasul 1: Crearea unui site web „Bună ziua, lume”

Pentru parcurgerea noastră, vom crea un exemplu de bază al unui site web Gatsby doar pentru testarea acestui lucru.

Deși acesta nu este de fapt un caz de utilizare obișnuit al variabilelor de mediu, unde în mod normal le-ați folosi pentru lucruri precum chei API și configurații de servicii, acest lucru vă va oferi o idee minunată despre cum funcționează fundamental.

Vom folosi acest Gatsby Sass Starter pe care l-am creat, care ne va oferi un punct de plecare și vom adăuga „Hello, [Environment]”, în funcție de locul în care rulează.

Pentru a începe, să creăm proiectul nostru local folosind CLI-ul Gatsby. Navigați la locul în care doriți să stocați acest proiect și să executați:

gatsby new my-env-project //github.com/colbyfayock/gatsby-starter-sass 

Puteți trece my-env-projectla orice director doriți să creați acest proiect, dar odată ce rulați această comandă, veți avea acum un proiect în acel nou director.

Pentru a începe, o dată în acel director, alergați yarn developpentru a face modificări la nivel local sau yarn buildpentru a compila noul dvs. site.

Once you're ready to go, you'll want to add this project to Github. If you're not familiar with how to do this, you can learn how to add an existing project to Github here.

Step 2: Creating a local environment variable with Gatsby

Our next step is to create a local environment and add a change that will let us see that it works.

To get started, let's first create a new file at the root of our project called .env.development. It might ask you if you really want to use the . prefix, make sure you say yes!

Inside that file, let's add:

# Inside .env.development GATSBY_MY_ENVIRONMENT="Development" 

Next, to make sure we don't forget to do this, let's also add this .env.development file to our .gitignore so we don't accidentally commit this to our git history. If you don't already have a .gitignore file, make sure you create it at the root of your project.

Finally, to check that this works, let's open pages/index.js and let's replace our

tag's content with a "Hello, world!" variation:

Hello, {process.env.GATSBY_MY_ENVIRONMENT}

And if we save that change and open it in our browser, we should see "Hello, Development"!

Follow along with the commit!

Step 3: Deploying the website to Netlify

So we have our website created using a simple environment variable. Next we'll want to actually deploy that site to Netlify. If you haven't already, we'll need to add our website to Github or another Git provider. Make sure to have that set up before continuing on.

After creating an account and logging in to Netlify, let's click the New site from Git button the main dashboard, follow the instructions for connecting your Github or other Git provider to Netlify, and then find your new repository.

Once you select your repository, you'll be asked to configure your build process. Luckily, Netlify can detect that we're using a Gatsby site and has it pre-filled for us. Unless you've added something special, keep the basic configuration to use gatsby build to build your project and public/ for the output.

Now before we hit Deploy, there's one thing we want to add, and that's our environment variable!

Right above the Deploy site button there's an Advanced button. Click that and you'll see a new dropdown with an additional New variable button.

Click that New variable button, add our GATSBY_MY_ENVIRONMENT as a new variable and add Production as the value. And finally, hit Deploy site!

From here, you should be able to watch your website deploy and once finished, you'll see your new site with "Hello, Production"!

Where can you add or update more variables in Netlify?

With our example, we only added one variable during the setup. But Netlify lets you add or update any other variables you'd like.

If you'd ever like to change that variable or add more, you can navigate to the Environment section of the Build & deploy settings, where you can edit and add any other variables in the Environment variables section.

Looking to learn more?

Here are a few other things to help you get started with development fundamentals!

  • What is Gatsby and why it's time to get on the hype train?
  • What is the JAMstack and how do I get started?
  • How to Become a Full Stack Web Developer in 2020
  • Put Down the Javascript - Learn HTML & CSS
  • Set Future You Up for Success with Good Coding Habits

Follow me for more Javascript, UX, and other interesting things!

  • ? Follow Me On Twitter
  • ?️ Subscribe To My Youtube
  • ✉️ Sign Up For My Newsletter