Kad započnete integrirati usluge treće strane u svoju aplikaciju ili web mjesto, počet će vam biti korisno imati različita okruženja, poput razvojnog i proizvodnog okruženja.
Kako to možemo konfigurirati da ne bismo morali izravno uređivati svoj kôd da bismo promijenili svoje okruženje?
- Što su varijable okruženja?
- Kako varijable okoline mogu biti korisne?
- Kako mogu zaštititi ove datoteke?
- Gatsby i varijable okoline
- Netlify i varijable okruženja
- Korak 1: Izrada web stranice "Zdravo, svijete"
- Korak 2: Stvaranje varijable lokalnog okruženja s Gatsbyem
- Korak 3: Postavljanje web stranice na Netlify
- Gdje možete dodati ili ažurirati više varijabli u Netlifyu?
Što su varijable okruženja?
Varijable okruženja su unaprijed određene vrijednosti koje se obično koriste za pružanje mogućnosti konfiguriranja vrijednosti u vašem kodu izvan vaše aplikacije.
Kada se razvijate lokalno, ili ponekad čak i u instalacijskom cjevovodu, često ćete pronaći ove varijable pohranjene u datoteci nazvanoj s nekom vrstom varijacije .env.
Kako varijable okoline mogu biti korisne?
Vjerojatno najčešći slučaj upotrebe varijabli okoline je mogućnost postavljanja različitih opcija konfiguracije za različita okruženja. Često kada razvijate usluge trećih strana, želite imati dostupnu razvojnu verziju ili sigurnosni okvir za postavljanje zahtjeva za testiranje, na taj način to ne utječe na stvarne proizvodne podatke.
Varijable okruženja korisne su jer vam omogućavaju da promijenite koje od vaših okruženja koristi koje okruženje usluge treće strane mijenjajući API ključ, krajnju točku ili bilo što drugo što usluga koristi za razlikovanje okruženja.
Kôd koji implementirate trebao bi biti predvidljiv, tako da ako ne morate mijenjati nijedan kod, već samo konfiguraciju izvan koda, možete održati tu predvidljivost.
Kako mogu zaštititi ove datoteke?
Ovo je vjerojatno jedna od važnijih točaka ovdje - morate osigurati da pažljivo rukujete tim datotekama i da ih ne provjeravate u git spremištu. Izlažući ove ključeve nehotice prenoseći ih na javno mjesto, Internet bi ih mogao lako pronaći i zloupotrijebiti radi vlastite dobiti.
Na primjer, AWS ključevi dragocjeni su izvor. Ljudi pokreću botove s jedinom svrhom da Github pokušaju potražiti ključeve. Ako netko pronađe AWS ključ, mogao bi koristiti taj ključ za pristup resursima kao što je pokretanje bitcoin operacije na vaš račun. Ovo vas ne želi uplašiti, već radi osvješćivanja kako biste izbjegli da vam ključevi budu ugroženi.
Pa kako ih možemo zaštititi? Najlakši je način dodati datoteku okruženja u koju držite ove ključeve .gitignore.
Da biste to učinili, jednostavno otvorite postojeću .gitignoredatoteku ili stvorite novu u korijenu spremišta i dodajte naziv datoteke kao novi redak:
# Inside .gitignore .env Ako želite postati napredniji i osigurati da se to nikada ne dogodi spremištu, možete provjeriti neke alate poput git-tajni iz AWS Labs ili GitLeaks koji čak imaju i Github Action kako bi se olakšala integracija s Githubom.
Gatsby i varijable okoline
Gatsby prema zadanim postavkama čini dostupnim dvije datoteke kao dio svog tijeka promjenjivih tokova okoline koji ove vrijednosti čini dostupnim u klijentu: .env.developmenti .env.production. Oni su povezani sa skriptama gatsby developi i gatsby buildza razvoj ili izradu web stranice.
Da bi se koristio ovim datotekama u Gatsbyjevom procesu razvoja i izrade, Gatsby od vas traži da pred ove varijable dodate prefiks GATSBY_. To također radi ako ih želite imati na raspolaganju s razine OS-a.
Iako biste mogli integrirati dotenv ako imate naprednije potrebe ili ne želite koristiti GATSBY_prefiks, vaš put najmanjeg otpora vjerojatno je slijediti Gatsbyev put kad radite u Gatsbyu.
Netlify i varijable okruženja
Netlify pruža mogućnost dodavanja varijabli okruženja kao dio svojih postavki Build & deploy koji se uzimaju kao dio procesa gradnje.
Srećom, Netlify olakšava dodavanje bilo koje varijable okruženja koju želite u proces izrade! Da biste ga dodali, jednostavno se možete pomaknuti do odjeljka Okoliš na stranici Postavke gradnje i postavljanja vašeg projekta i dodati varijablu pod Varijable okruženja.
Provest ćemo vas kroz ovaj postupak malo kasnije.
Korak 1: Izrada web stranice "Zdravo, svijete"
Za naše korake postavit ćemo zaista osnovni primjer web stranice Gatsby samo u svrhu testiranja ovoga.
Iako ovo zapravo nije uobičajeni slučaj varijabli okoline, gdje biste ih obično koristili za stvari poput API ključeva i konfiguracija usluge, ovo će vam dati sjajnu ideju o tome kako to u osnovi funkcionira.
Koristit ćemo ovaj Gatsby Sass Starter koji sam stvorio, a koji će nam dati polaznu točku i dodati "Hello, [Environment]", ovisno o tome gdje se izvodi.
Za početak, kreirajmo naš lokalni projekt pomoću Gatsby CLI. Dođite do mjesta gdje želite pohraniti ovaj projekt i pokrenite:
gatsby new my-env-project //github.com/colbyfayock/gatsby-starter-sass Možete promijeniti my-env-projectbilo koji direktorij u kojem želite da se ovaj projekt kreira, ali nakon što pokrenete ovu naredbu, sada ćete imati projekt u tom novom direktoriju.
Da biste započeli, pokrenite se jednom u taj direktorij yarn developda biste unijeli promjene lokalno ili yarn buildda biste sastavili novo mjesto.
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 On Twitter
- ?️ Subscribe To My Youtube
- ✉️ Sign Up For My Newsletter