Hvad er miljøvariabler, og hvordan kan jeg bruge dem med Gatsby og Netlify?

Når du begynder at integrere tredjeparts tjenester i din applikation eller dit websted, vil du begynde at finde det nyttigt at have forskellige miljøer, såsom et udviklings- og produktionsmiljø.

Hvordan kan vi konfigurere dette, så vi ikke behøver at redigere vores kode direkte for at ændre vores miljø?

  • Hvad er miljøvariabler?
  • Hvordan kan miljøvariabler være nyttige?
  • Hvordan kan jeg beskytte disse filer?
  • Gatsby- og miljøvariabler
  • Netlify og miljøvariabler
  • Trin 1: Oprettelse af et "Hello, world" -websted
  • Trin 2: Oprettelse af en lokal miljøvariabel med Gatsby
  • Trin 3: Implementering af webstedet til Netlify
  • Hvor kan du tilføje eller opdatere flere variabler i Netlify?

Hvad er miljøvariabler?

Miljøvariabler er forudbestemte værdier, der typisk bruges til at give mulighed for at konfigurere en værdi i din kode uden for din applikation.

Når du udvikler lokalt eller nogle gange endda i en implementeringsrørledning, finder du ofte disse variabler, der er gemt i en fil, der er navngivet med en slags variation af   .env.

Hvordan kan miljøvariabler være nyttige?

Sandsynligvis er det mest almindelige anvendelses tilfælde for miljøvariabler at kunne opsætte forskellige konfigurationsindstillinger for forskellige miljøer. Ofte når du udvikler dig mod tredjepartstjenester, vil du have en udviklingsversion eller sandkasse tilgængelig til at stille testanmodninger imod, på den måde påvirker det ikke reelle produktionsdata.

Miljøvariabler er nyttige, fordi de giver dig mulighed for at ændre, hvilke af dine miljøer der bruger hvilket tredjeparts servicemiljø ved at ændre en API-nøgle, slutpunkt eller hvad tjenesten bruger til at skelne mellem miljøer.

Den kode, du implementerer, skal være forudsigelig, så ved ikke at skulle ændre nogen kode, bare konfigurationen uden for koden, kan du bevare denne forudsigelighed.

Hvordan kan jeg beskytte disse filer?

Dette er sandsynligvis et af de vigtigste punkter her - du skal sikre dig, at du håndterer disse filer med omhu og ikke kontrollerer dem i et git-arkiv. Ved at udsætte disse nøgler ved uforvarende at uploade dem til et offentligt sted, kunne internettet let finde disse nøgler og misbruge dem til deres egen gevinst.

For eksempel er AWS-nøgler en værdifuld kilde. Folk kører bots med det ene formål at forsøge at scanne Github for nøgler. Hvis nogen finder en AWS-nøgle, kan de bruge denne nøgle til at få adgang til ressourcer såsom at køre en bitcoin-operation på din regning. Dette er ikke for at skræmme dig, det er for at gøre dig opmærksom, så du undgår, at dine nøgler bliver kompromitterede.

Så hvordan kan vi beskytte disse? Den nemmeste måde er at tilføje miljøfilen, hvor du opbevarer disse nøgler til din .gitignorefil.

For at gøre dette skal du blot åbne din eksisterende .gitignorefil eller oprette en ny i roden af ​​dit arkiv og tilføje filnavnet som en ny linje:

# Inside .gitignore .env 

Hvis du vil blive mere avanceret og sørge for, at dette aldrig sker med et arkiv, kan du tjekke nogle værktøjer som git-hemmeligheder fra AWS Labs eller GitLeaks, der endda har en Github Action for at gøre det let at integrere med Github.

Gatsby- og miljøvariabler

Gatsby stiller som standard to filer til rådighed som en del af sin miljøvariabel arbejdsgang, der gør disse værdier tilgængelige i klienten: .env.developmentog .env.production. Disse korrelerer med gatsby developog gatsby buildscripts til enten at udvikle eller opbygge dit websted.

For at gøre brug af disse filer i Gatsby-udviklings- og byggeprocessen kræver Gatsby, at du forud for disse variabler med GATSBY_. Dette fungerer også, hvis du gerne vil have dem tilgængelige fra et OS-procesniveau.

Selvom du kunne integrere dotenv, hvis du har mere avancerede behov eller ikke vil bruge GATSBY_præfikset, er din vej med mindst modstand sandsynligvis bare at følge Gatsby-vejen, når du arbejder i Gatsby.

Netlify og miljøvariabler

Netlify giver mulighed for at tilføje miljøvariabler som en del af dets Build & deploy- indstillinger, der bliver samlet op som en del af buildprocesserne .

Heldigvis gør Netlify det nemt at tilføje den miljøvariabel, du gerne vil have, til byggeprocessen! For at tilføje en kan du simpelthen navigere til sektionen Miljø på dit projekts side Indstillinger for opbygning og implementering og tilføje en variabel under Miljøvariabler.

Vi gennemgår denne proces lidt senere.

Trin 1: Oprettelse af et "Hello, world" -websted

Til vores gennemgang vil vi oprette et virkelig grundlæggende eksempel på et Gatsby-websted kun med det formål at teste dette.

Selvom dette ikke rigtig er et almindeligt anvendt tilfælde af miljøvariabler, hvor du normalt bruger dem til ting som API-nøgler og servicekonfigurationer, vil dette give dig en god idé om, hvordan det grundlæggende fungerer.

Vi skal bruge denne Gatsby Sass Starter, jeg oprettede, hvilket giver os et udgangspunkt og tilføjer "Hej, [Miljø]" afhængigt af hvor den kører.

For at komme i gang, lad os oprette vores lokale projekt ved hjælp af Gatsby CLI. Naviger til, hvor du vil gemme dette projekt og køre:

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

Du kan skifte my-env-projecttil hvilken mappe du vil have dette projekt oprettet i, men når du kører denne kommando, har du nu et projekt i den nye mappe.

For at komme i gang, skal du køre for yarn developat foretage ændringer lokalt eller yarn buildkompilere dit nye websted , når du er inde i denne mappe .

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.

Hvis du nogensinde vil ændre den variabel eller tilføje mere, kan du navigere til sektionen Miljø i indstillingerne Byg og implementer , hvor du kan redigere og tilføje andre variabler i sektionen Miljøvariabler .

Ønsker du at lære mere?

Her er et par andre ting, der kan hjælpe dig med at komme i gang med udviklingsfundamental!

  • Hvad er Gatsby, og hvorfor er det tid til at komme på hype-toget?
  • Hvad er JAMstack, og hvordan kommer jeg i gang?
  • Sådan bliver du en Full Stack-webudvikler i 2020
  • Sæt Javascript ned - Lær HTML & CSS
  • Sæt Fremtiden dig op til succes med gode kodningsvaner

Følg mig for mere Javascript, UX og andre interessante ting!

  • ? Følg mig på Twitter
  • ? ️ Abonner på min Youtube
  • ✉️ Tilmeld dig mit nyhedsbrev