Шта су променљиве околине и како их могу користити са Гатсби и Нетлифи?

Кад започнете да интегришете услуге независних произвођача у своју апликацију или на веб локацију, биће вам корисно имати различита окружења, попут развојног и производног окружења.

Како то можемо конфигурисати да не бисмо морали директно да уређујемо наш код да бисмо променили окружење?

  • Шта су променљиве окружења?
  • Како варијабле окружења могу бити корисне?
  • Како могу да заштитим ове датотеке?
  • Гатсби и променљиве околине
  • Нетлифи и променљиве околине
  • 1. корак: Израда веб странице „Здраво, свете“
  • Корак 2: Стварање променљиве локалног окружења помоћу Гатсби-а
  • Корак 3: Примена веб странице на Нетлифи
  • Где можете да додате или ажурирате више променљивих у Нетлифи-у?

Шта су променљиве окружења?

Променљиве околине су унапред одређене вредности које се обично користе за пружање могућности конфигурисања вредности у вашем коду изван ваше апликације.

Када се развијате локално, или понекад чак и у цевоводу за размештање, често ћете пронаћи ове променљиве ускладиштене у датотеци названој неком врстом варијације   .env.

Како варијабле окружења могу бити корисне?

Вероватно најчешћи случај употребе променљивих околине је могућност постављања различитих опција конфигурације за различита окружења. Често када развијате услуге независних произвођача, желите да имате на располагању верзију за развој или окружење за тестирање за постављање захтева за тестирање, на тај начин то не утиче на стварне производне податке.

Варијабле окружења су корисне јер вам омогућавају да промените које од ваших окружења користи неко окружење услуге независних произвођача променом АПИ кључа, крајње тачке или било чега другог што услуга користи за разликовање окружења.

Код који примените треба да буде предвидљив, тако да ако не морате да мењате ниједан код, већ само конфигурацију изван кода, можете да задржите ту предвидљивост.

Како могу да заштитим ове датотеке?

Ово је вероватно једна од најважнијих тачака овде - морате бити сигурни да пажљиво рукујете тим датотекама и да их не проверавате у гит спремишту. Излажући ове кључеве нехотичним постављањем на јавну локацију, Интернет би могао лако да их пронађе и злоупотреби ради сопствене користи.

На пример, АВС кључеви су драгоцен извор. Људи покрећу ботове с једином сврхом да покушају да Гитхуб-ом претраже кључеве. Ако неко пронађе АВС кључ, могао би да користи овај кључ за приступ ресурсима као што је покретање битцоин операције на ваш рачун. Ово не жели да вас уплаши, већ да вас освести како бисте избегли да вам кључеви буду угрожени.

Па како можемо да их заштитимо? Најлакши начин је додати датотеку окружења у коју држите ове кључеве .gitignore.

Да бисте то урадили, једноставно отворите постојећу .gitignoreдатотеку или креирајте нову у корену спремишта и додајте назив датотеке у нови ред:

# Inside .gitignore .env 

Ако желите да постанете напреднији и уверите се да се то никада не догоди спремишту, можете да погледате неке алате попут гит-тајни из АВС Лабс или ГитЛеакс који чак имају и Гитхуб Ацтион да би олакшали интеграцију са Гитхуб-ом.

Гатсби и променљиве околине

Гатсби подразумевано чини две датотеке доступним као део свог процеса променљиве окружења који ове вредности чини доступним у клијенту: .env.developmentи .env.production. Они су повезани са скриптама gatsby developи и gatsby buildза развој или изградњу ваше странице.

Да би искористио ове датотеке у процесу развоја и израде Гатсби-а, Гатсби од вас захтева да ове променљиве додате префиксом GATSBY_. Ово такође функционише ако желите да их имате на располагању са нивоа процеса ОС-а.

Иако бисте могли да интегришете дотенв ако имате напредније потребе или не желите да користите GATSBY_префикс, ваш пут најмањег отпора је вероватно да само следите Гатсбиев пут када радите у Гатсбију.

Нетлифи и променљиве околине

Нетлифи пружа могућност додавања променљивих окружења као део својих поставки за изградњу и постављање које се узимају као део процеса израде.

Срећом, Нетлифи олакшава додавање било које променљиве окружења коју желите у процес израде! Да бисте га додали, можете једноставно да одете до одељка Животна средина на страници Подешавања изградње и примене у вашем пројекту и додате променљиву под Променљиве окружења.

Провешћемо вас кроз овај процес мало касније.

1. корак: Израда веб странице „Здраво, свете“

За наше кораке поставићемо заиста основни пример веб странице Гатсби само у сврху тестирања овога.

Иако ово заправо није чест случај променљивих околине, где бисте их обично користили за ствари попут АПИ кључева и конфигурација услуге, ово ће вам дати сјајну представу о томе како то у основи функционише.

Користићемо овај Гатсби Сасс Стартер који сам креирао и који ће нам дати почетну тачку и додати „Здраво, [окружење]“ у зависности од тога где се покреће.

За почетак, креирајмо наш локални пројекат користећи Гатсби ЦЛИ. Дођите до места где желите да сачувате овај пројекат и покрените:

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

Можете да пређете my-env-projectу било који директоријум у којем желите да се овај пројекат креира, али када покренете ову наредбу, сада ћете имати пројекат у том новом директоријуму.

Да започнете, једном у том директоријуму покрените yarn developда бисте унели промене локално или yarn buildда бисте компајлирали своју нову веб локацију.

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.

Ако желите да промените ту променљиву или додате више, можете да одете до одељка Животна средина у подешавањима Изградња и постављање , где можете да измените и додате све друге променљиве у одељку Променљиве окружење .

Желите да сазнате више?

Ево још неколико ствари које ће вам помоћи да започнете са основама развоја!

  • Шта је Гатсби и зашто је време да уђемо у хиперски воз?
  • Шта је ЈАМстацк и како да започнем?
  • Како постати пуноправни веб програмер у 2020
  • Одложите Јавасцрипт - научите ХТМЛ и ЦСС
  • Поставите вам будућност за успех са добрим навикама кодирања

Пратите ме за још Јавасцрипта, УКС-а и других занимљивих ствари!

  • ? Запрати ме на твитеру
  • ? Претплатите се на мој Иоутубе
  • Уп Пријавите се за мој билтен