Kas ir vides mainīgie un kā tos izmantot kopā ar Getsby un Netlify?

Sākot integrēt trešo pušu pakalpojumus savā lietojumprogrammā vai vietnē, jums būs noderīgi izmantot dažādas vides, piemēram, izstrādes un ražošanas vidi.

Kā mēs to varam konfigurēt, lai mums nebūtu tieši jārediģē kods, lai mainītu vidi?

  • Kas ir vides mainīgie?
  • Kā vides mainīgie var būt noderīgi?
  • Kā es varu saglabāt šos failus drošībā?
  • Getsbijs un vides mainīgie
  • Netlify un vides mainīgie
  • 1. darbība: izveidojiet vietni “Sveika, pasaule”
  • 2. solis: Vietējā vides mainīgā izveidošana, izmantojot Gatsby
  • 3. darbība. Vietnes izvietošana Netlify
  • Kur var pievienot vai atjaunināt vairāk mainīgo Netlify?

Kas ir vides mainīgie?

Vides mainīgie ir iepriekš noteiktas vērtības, kuras parasti izmanto, lai nodrošinātu iespēju konfigurēt koda vērtību ārpus jūsu lietojumprogrammas.

Izstrādājot lokāli vai dažreiz pat izvietošanas cauruļvadā, jūs bieži atradīsit šos mainīgos, kas saglabāti failā, kura nosaukums ir ar dažāda veida izmaiņām   .env.

Kā vides mainīgie var būt noderīgi?

Iespējams, visizplatītākais vides mainīgo izmantošanas gadījums ir spēja iestatīt dažādas konfigurācijas opcijas dažādām vidēm. Bieži vien, izstrādājot trešās puses pakalpojumus, vēlaties, lai būtu pieejama izstrādes versija vai smilškaste, lai veiktu testa pieprasījumus, tādējādi tas neietekmē reālos ražošanas datus.

Vides mainīgie ir noderīgi, jo tie ļauj mainīt to, kura no jūsu vidēm izmanto trešo personu pakalpojumu vidi, mainot API atslēgu, galapunktu vai visu citu, ko pakalpojums izmanto, lai nošķirtu vides.

Izvietotajam kodam jābūt paredzamam, tāpēc, nemainot kodu, tikai konfigurāciju ārpus koda, jūs varat saglabāt šo paredzamību.

Kā es varu saglabāt šos failus drošībā?

Tas, iespējams, ir viens no svarīgākajiem punktiem šeit - jums jāpārliecinās, ka jūs ar šiem failiem rīkojaties uzmanīgi un nepārbaudāt tos git repozitorijā. Atklājot šīs atslēgas, netīšām augšupielādējot tās publiskā vietā, internets varētu viegli atrast šīs atslēgas un ļaunprātīgi izmantot viņu pašu labā.

Piemēram, AWS atslēgas ir vērtīgs avots. Cilvēki vada robotus tikai ar mērķi mēģināt meklēt Github atslēgas. Ja kāds atrod AWS atslēgu, viņš var izmantot šo atslēgu, lai piekļūtu resursiem, piemēram, bitcoin operācijas veikšanai uz jūsu rēķina. Tas nenobiedē jūs, tas ir domāts, lai jūs netiktu apdraudēti.

Tātad, kā mēs varam nodrošināt šo drošību? Vieglākais veids ir pievienot failam vides failu, kurā glabājat šos taustiņus .gitignore.

Lai to izdarītu, vienkārši atveriet esošo .gitignorefailu vai izveidojiet jaunu glabātuves saknē un pievienojiet faila nosaukumu kā jaunu rindu:

# Inside .gitignore .env 

Ja vēlaties kļūt modernāks un pārliecināties, ka tas nekad nenotiek ar krātuvi, varat pārbaudīt dažus rīkus, piemēram, AWS Labs vai GitLeaks git-secrets, kuriem pat ir Github darbība, lai būtu viegli integrēt Github.

Getsbijs un vides mainīgie

Pēc noklusējuma Gatsby padara pieejamus divus failus kā daļu no vides mainīgās darbplūsmas, kas šīs vērtības padara pieejamas klientā: .env.developmentun .env.production. Tie korelē ar gatsby developun gatsby buildskriptiem, lai vai nu izveidotu vai izveidotu vietni.

Lai izmantotu šos failus Gatsbija izstrādes un veidošanas procesā, Getsbijs pieprasa, lai šie mainīgie būtu pirms GATSBY_. Tas darbojas arī tad, ja vēlaties, lai tie būtu pieejami OS procesa līmenī.

Lai gan jūs varētu integrēt dotenv, ja jums ir sarežģītākas vajadzības vai nevēlaties izmantot GATSBY_prefiksu, jūsu ceļš ar vismazāko pretestību, iespējams, ir tikai sekot Getsbija veidam, strādājot Getsbijā.

Netlify un vides mainīgie

Netlify nodrošina iespēju pievienot vides mainīgos kā daļu no tās Izveidot un izvietot iestatījumus, kas tiek uzņemti kā daļa no būvēšanas procesiem.

Par laimi, Netlify ļauj ērti pievienot jebkura mainīgā vides mainīgo būvēšanas procesam! Lai to pievienotu, varat vienkārši pārvietoties uz projekta Veidot un izvietot iestatījumu lapas sadaļu Vide un pievienot mainīgo sadaļā Vides mainīgie.

Mēs jums nedaudz vēlāk iepazīsimies ar šo procesu.

1. darbība: izveidojiet vietni “Sveika, pasaule”

Lai to pārbaudītu, mēs izveidosim patiešām vienkāršu Gatsby vietnes piemēru.

Lai gan tas patiesībā nav izplatīts vides mainīgo gadījums, kur parasti tos izmantotu tādām lietām kā API atslēgas un pakalpojumu konfigurācijas, tas ļaus jums lieliski saprast, kā tas principā darbojas.

Mēs izmantosim šo manu izveidoto Gatsby Sass starteri, kas mums dos sākumpunktu un pievienos “Sveiki, [vide]” atkarībā no tā, kur tas darbojas.

Lai sāktu, izveidosim vietējo projektu, izmantojot Gatsby CLI. Pārejiet uz vietu, kur vēlaties glabāt šo projektu, un palaidiet:

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

Jūs varat pāriet my-env-projectuz jebkuru direktoriju, kurā vēlaties izveidot šo projektu, taču, izpildot šo komandu, tagad jums būs projekts šajā jaunajā direktorijā.

Lai sāktu, nokļūstiet šajā direktorijā, palaidiet, yarn developlai veiktu izmaiņas lokāli vai yarn buildapkopotu savu jauno vietni.

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.

Ja kādreiz vēlaties mainīt šo mainīgo vai pievienot vairāk, varat pārvietoties iestatījumu Izveidot un izvietot sadaļā Vide , kur rediģēt un pievienot citus mainīgos sadaļā Vides mainīgie .

Vai vēlaties uzzināt vairāk?

Šeit ir dažas citas lietas, kas palīdzēs jums sākt darbu ar attīstības pamatiem!

  • Kas ir Getsbijs un kāpēc ir pienācis laiks iekāpt ažiotāžas vilcienā?
  • Kas ir JAMstack un kā es varu sākt?
  • Kā kļūt par pilnvērtīgu tīmekļa izstrādātāju 2020. gadā
  • Atstājiet Javascript - uzziniet HTML un CSS
  • Nosakiet nākotni, lai gūtu panākumus ar labiem kodēšanas paradumiem

Sekojiet man, lai iegūtu vairāk Javascript, UX un citas interesantas lietas!

  • ? Seko man čivināt
  • ? ️ Abonējiet manu Youtube
  • ✉️ Reģistrējieties manam biļetenam