Mik azok a környezeti változók, és hogyan használhatom őket a Gatsby és a Netlify segítségével?

Amikor elkezdi integrálni a harmadik féltől származó szolgáltatásokat az alkalmazásába vagy a webhelyébe, hasznosnak találja a különböző környezetek, például a fejlesztési és a termelési környezet használatát.

Hogyan konfigurálhatjuk ezt úgy, hogy ne kelljen közvetlenül módosítanunk a kódunkat a környezetünk megváltoztatásához?

  • Mik a környezeti változók?
  • Hogyan lehetnek hasznosak a környezeti változók?
  • Hogyan tudom ezeket a fájlokat biztonságban tartani?
  • Gatsby és környezeti változók
  • Netlify és környezeti változók
  • 1. lépés: "Hello, world" weboldal létrehozása
  • 2. lépés: Helyi környezeti változó létrehozása a Gatsby segítségével
  • 3. lépés: A webhely telepítése a Netlify-hoz
  • Hol adhat hozzá vagy frissíthet több változót a Netlify-ban?

Mik a környezeti változók?

A környezeti változók előre meghatározott értékek, amelyeket általában arra használnak, hogy az alkalmazáson kívülről konfigurálhassanak egy értéket a kódban.

Helyi, vagy néha akár egy telepítési folyamat során történő fejlesztés során gyakran megtalálja ezeket a változókat egy fájlban, amelyet valamilyen változattal neveznek el   .env.

Hogyan lehetnek hasznosak a környezeti változók?

Valószínűleg a környezeti változók leggyakoribb használati esete az, hogy különböző konfigurációs lehetőségeket állíthat be különböző környezetekhez. A harmadik fél által nyújtott szolgáltatások fejlesztésekor gyakran azt szeretné, hogy elérhető legyen egy fejlesztői verzió vagy homokozó, amellyel tesztkéréseket tehet, így ez nem befolyásolja a valós gyártási adatokat.

A környezeti változók azért hasznosak, mert lehetővé teszik annak megváltoztatását, hogy melyik környezete melyik harmadik fél szolgáltatási környezetét használja az API-kulcs, végpont vagy bármi más használatával, amelyet a szolgáltatás a környezetek megkülönböztetésére használ.

A telepített kódnak kiszámíthatónak kell lennie, így ha nem kell módosítania egyetlen kódot, csak a kódon kívüli konfigurációt, akkor fenntarthatja ezt a kiszámíthatóságot.

Hogyan tudom ezeket a fájlokat biztonságban tartani?

Ez valószínűleg itt az egyik fontosabb pont - meg kell győződnie arról, hogy ezeket a fájlokat óvatosan kezeli, és nem ellenőrzi őket egy git-adattárba. Ha ezeket a kulcsokat véletlenül nyilvános helyre tölti fel, az internet könnyen megtalálhatja ezeket a kulcsokat, és saját hasznuk érdekében visszaélhet velük.

Például az AWS kulcsok értékes forrást jelentenek. Az emberek botokat futtatnak azzal a kizárólagos céllal, hogy megpróbálják kulcsok után kutatni a Githubot. Ha valaki talál egy AWS-kulcsot, használhatja ezt a kulcsot az erőforrások eléréséhez, például egy bitcoin-művelet futtatásához az ön költségén. Ez nem ijesztgetni, hanem tudatosítani, hogy elkerülje a kulcsok veszélyeztetését.

Tehát hogyan tudjuk ezeket biztonságban tartani? A legegyszerűbb módszer hozzáadni azt a környezeti fájlt, ahol ezeket a kulcsokat .gitignoretárolja.

Ehhez egyszerűen nyissa meg a meglévő .gitignorefájlt, vagy hozzon létre egy újat a tárház gyökerében, és adja hozzá a fájlnevet új sorként:

# Inside .gitignore .env 

Ha fejlettebb szeretne lenni, és meg akarja győződni arról, hogy ez soha nem történik meg egy adattárral, megnézhet néhány eszközt, például az AWS Labs vagy a GitLeaks git-titkait, amelyek még Github művelettel is rendelkeznek, hogy megkönnyítsék a Githubba történő integrálást.

Gatsby és környezeti változók

A Gatsby alapértelmezés szerint két fájlt tesz elérhetővé a környezeti változó munkafolyamatának részeként, amely elérhetővé teszi ezeket az értékeket az ügyfélben: .env.developmentés .env.production. Ezek korrelálnak a gatsby developés a gatsby buildszkriptekkel a webhely fejlesztése vagy építése céljából.

Ahhoz, hogy ezeket a fájlokat a Gatsby fejlesztési és építési folyamatán belül felhasználja, a Gatsby megköveteli, hogy ezeket a változókat előtaggal töltse fel GATSBY_. Ez akkor is működik, ha azt szeretné, hogy elérhetőek legyenek operációs rendszer folyamat szintjén.

Bár integrálhatná a dotenv-t, ha fejlettebb igényei vannak, vagy nem szeretné használni az GATSBY_előtagot, a legkevésbé ellenálló útja valószínűleg az, hogy csak a Gatsby-utat követi, amikor Gatsby-ban dolgozik.

Netlify és környezeti változók

A Netlify lehetőséget nyújt környezeti változók hozzáadására a Build & deploy beállítások részeként, amelyek a build folyamat részeként kerülnek felvételre.

Szerencsére a Netlify megkönnyíti a kívánt környezeti változó hozzáadását az építési folyamathoz! Az egyik hozzáadásához egyszerűen navigáljon a projekt Környezet szakaszára a Építés és telepítés beállítások oldalon, és adjon hozzá egy változót a Környezeti változók alatt.

Kicsit később végigvezetjük ezt a folyamatot.

1. lépés: "Hello, world" weboldal létrehozása

Áttekintésünk érdekében egy igazán alapos példát fogunk létrehozni a Gatsby webhelyéről, csak ennek kipróbálása céljából.

Bár ez valójában nem a környezeti változók gyakori esete, ahol általában az API kulcsokhoz és a szolgáltatáskonfigurációkhoz használná őket, ez nagyszerű képet ad arról, hogyan működik alapvetően.

Ezt az általam létrehozott Gatsby Sass Starter-t fogjuk használni, amely kiindulópontot ad nekünk, és hozzáadja a "Hello, [Környezet]" szót attól függően, hogy hol fut.

A kezdéshez készítsük el helyi projektünket a Gatsby CLI használatával. Keresse meg azt a helyet, ahol tárolni szeretné ezt a projektet, és futtassa:

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

Változtathat my-env-projectbármelyik könyvtárra, amelyben létre szeretné hozni ezt a projektet, de miután futtatta ezt a parancsot, mostantól lesz egy projekt az új könyvtárban.

A kezdéshez futtasson yarn developa könyvtárba, futtassa a helyben yarn buildtörténő módosításokat vagy az új webhely összeállítását.

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