Upload web stranice na Azure koristeći Visual Studio Code + Git

Sunday, April 24, 2016


Kako uplodovati web sajt na Microsoft Azure koristeći Git source control, upravo je to tema ovog blog posta. Demonstrirati ću kako da pomoću Visual Studio Code i Git-a postavite vaš web sajt na Azure portal.
Kao što je i poznato Visual Studio Code nema neku posebnu podršku za upload na Azure direktno, ali imamo odličnu podršku za Git source control, pa ćemo iskoristit Git kao posrednika za ovaj proces uploada web stranice na Microsoft Azure.


Prije svega bitno je navesti ono što vam je potrebno da ovaj tutorijal bude uspješan:


  • Instaliran Git protokol na vašoj Windows/Mac/Linux mašini
  • Visual Studio Code
  • Azure račun (DreamSpark, MSDN, BizSpark ...)

1. Korak:

U Visual Studio Code-u ću napraviti novi folder sa jednostavnom HTML stranicom, vi ako imate već postojeći projekat ne morate ovaj korak da radite. Ja ću u svoj html dodati jedna div sa h1 i h4 tagom čisto radi prezentacije da imam neku smislenu poruku i dodat ću jedan style.css fajl u kojem ću stilizovati moj index.html page.

Ovako izgleda trenutno moj Visual Studio Code sa fajlovima:




2. Korak:

Pošto ćemo za ovaj tutorial koristiti Git source control, prva stvar koju ćemo uraditi je inicijalizovati lokalni git repozitorij iz našeg Visual Studio Code-a.

Sa lijeve strane na Viewbaru od VS Code idemo na Git dio te inicijaliziramo naš lokalni repozitorij:



Nakon toga radim inicijalni commit kako bi uradio sync mojih podataka sa lokalnim git repozitorijem kreiranim u prošlom paragrafu:


I potvrdim ovaj commit sa kombinaciom tipki CTRL + Enter ili tačnicom iznad boxa za unos imena commit-a.


3. Korak:

Ako smo sve uradili kao u predhodnim koracima... sada prelazimo na dio oko Microsoft Azure portala. Ovaj tutorial je moguće pratiti ako imate bilo kakav oblik predplate na Azure bilo da je riječ o studentskom DreamSpark, BizSpark, MSDN računu ili ako je obični poslovni akaunt u pitanju, sve dolazi u obzir. Nakon što se uspješno prijavimo na naš Azure portal potrebno je da kreiramo novu Web App na slijedeći standardni način:

Odaberemo New -> Web + Mobile -> Web App ... nakon toga u okviru koji dobijemo vezano za novu Web App unesemo App Name naše novi web aplikacije (ovo će ujedno biti i dio url-a za ovu app) , način predplate, unosimo resource group (ja koristim moj već kreirani resource group) i zadnje je lokacija na kojoj će se nalaziti naša web app, najbolje rješenje je da to bude što bliže vašoj ciljanoj skupini korisnika.



Potrebno je sačekati nekoliko trenutaka dok se kreira naša app... nakon toga ćemo dobiti notifikaciju o uspješnosti i na našem dashboardu će se pojaviti (u slučaju da smo odabrali opciju pin to dashborad) naša nova web app.



Kada pronađemo našu app na dashboardu te ako smo sigurno da je u Running stanju, klikom na web app otvaramo postavke te slijedećom putanjom idemo na Deployment Source koji nam je bitan za ovaj tutorial.

Naša Web App -> All settings -> U publishing dijelu odaberemo Deployment Source -> i odaberemo Local Git Repository -> i to sve potvrdimo sa Ok




Pred nama vidimo slijedeću poruku:



Nakon toga se vraćamo u našu Web App i vidimo da je za nas Azure kreirao podatke o autentifikaciji... tačnije
Git/Deployment username i Git clone url... da ja ne bi koristio ove defaultne postavke otići ću u All Settings i pod Set deployment credentials podesit ću moj user name i password.



Nakon toga se mogu uvjeriti da se moj username promjenio u predhodno zadani:


Što se ovog koraka tiče mi smo manje više gotovi i samo je preostalo da sa naše lokalne PC/Mac/Linux mašine uradimo sync naših podataka (web stranice) sa Azure portalom tačnije sa našom Web App.


4. Korak:

Na našoj mašini otvaramo terminal ili command prompt zavisno od toga sa kojeg operativnog sistema ovo pratite. Provjerimo putanju i uvjerimo se da se kontekstualno nalazimo u našem web site folderu. Također ovo na brži način možemo uraditi u Visual Studio Code-u. U dijelu Explorer desnim klikom otvara nam se niz mogućnosti od kojih nam je najzanimljivija Open in Command Prompt (ili Terminal)



U komandnom promptu ispred nas upisujemo slijedeću komandu:

 git remote add azure MJESTO_ZA_URL 

Na mjesto URL ide naš Git clone url koji ćemo kopirati iz Azure portala iz Web App postavki, najbolji i najlakši način je preko opcije Click to copy kako bismo bili sigurno da je čitav url uspješno kopiran.



I ovo zalijepimo u command prompt na odgovarajuće mjesto, sa ovom komandom povezujemo naš lokalni repozitorij sa onim na Azure cloud-u:

Potvrdimo sa enter i idemo na slijedeću komandu sa kojom ćemo uraditi push naših podataka na Azure, sada unosimo slijedeću komandu:

 git push -u azure master

O pojedinim dijelovima komandi za git neću u ovom tutorijalu puni pričati jer svakako planiram uraditi mnogo detaljniju seriju tutorijala vezanih za Git protokol za sada je bitno samo da pratite ove korake.

Nakon gore unsesne komande command prompt će od mene tražiti password koji sam predhodno definisao vezano za Deployment credentials i potvrdimo sa Enter.

Primjetit ćemo da se u našem Command Promptu dešavaju neka izlistavanja i promjene i kada command prompt završi sve radnje uspješnp vidimo poruku: Deployment successful.




5. Korak:

Sve što sada treba da uradimo je da odemo u našu Web App -> Settings -> Deployments




Nakon ovoga možemo ići na URL od od web stranice i uvjerit se da web sajt koji smo razvijali na lokalnom računaru sada je uspješno uplodovan na Azure i globalno je dostupan.

Za one koji ne znaju, obično URL vaše app/stranice je App Name + .azurewebsites.net pa u mom slučaju moja web stranica je dostupna na slijedećem linku: http://vscodeazuregittutorial.azurewebsites.net/


Ili jednostavno možete otići na URL koji je dostupan u okviru Web App opcija:



Sada kada smo uspješno uplodovali naš web sajt možemo nastaviti raditi na njemu, editovati ga i sve ono što nam je potrebno, kada smo sigurno da smo spremni da te izmjene prebacimo na Azure ponovimo postupak push komande ili naravno ono što je mnogo lakše, a to je direktno iz Visual Studio Code editora, nakon toga izmjene na web sajtu će biti globalno vidljive.


I kao dokaz da je ovaj tutorijal uspio, otići ću na url od moje web app:


Nadam se da vam je ovaj blog post/tutorijal bio od koristi i da ste nešto novo naučili, vezano za Microsoft Azure, Visual Studio Code i naravno Git protokol pomoću kojeg smo ovo sve i uradili.

Ako vam je ovaj blog post bio od pomoći podijelite ga sa vašim prijateljima ili kolegama kako bi došao do što više ljude, uskoro dolazi i engleska verzija ovog tutorijala.

Pozdrav! Almir Vuk | AV Development | http://almirvuk.blogspot.ba/

You Might Also Like

0 comments