Upload na Microsoft Azure + FileZilla (FTP metoda)

Monday, December 07, 2015


Kako uplodovati web site na Azure putem FTP-a tema je ovog tutorijala, konkretno za ovaj mini tutorijal ću koristiti FileZilla-u. Tutorijal i blog post prvenstveno pišem radi web radionice pod nazivom Hello Cloud koju namjeravam da održim u sklopu Microsoft Student Partner programa u jednoj srednjoj školi... potrebu za ovim načinom imamo ako računari (u školi) ne mogu da podrže Visual Studio zbog performansi ili bilo čega drugoga..

Za potrebe tutorijala ćemo koristiti, Azure portal sa DreamSpark pretplatom (u mom slučaju je MSDN), Visual Studio Code (Microsoft kod editor) te FileZilla FTP program...


Za početak ću kreirati WebApp na našem Azure portalu sa slijedećim koracima:

  • "+ New" -> 
  • Web + Mobile ->
  • Web App

Pod App Service Name unosimo jedinstveno ime naše App/Stranice koji će imati nastavak ".azurewebsites.net" te će tako URL i glasiti u trenutku kada kreiramo našu Web App/Stranicu:

Za potrebe ovog tutorijala ja unosim ime "Demo-Elektro-FTP", za Subscription odabiremo naš način pretplate na Azure (DreamSpark ili MSDN), koristimo već kreiran Resource Group koji imamo, ako ne ... vratimo se u Azure Portal na početnu i kreiramo novi Resource Group. Na slijedeći način: u lijevom dijelu našeg portala idemo na Resource Group, odaberemo + Add ... i pred nama će se pojaviti slijedeći prozor koji popunimo po našim potrebama. U slučaju da već imate kreiran Resource Group ovaj korak zanemarite...




Sada kada imamo kreiran Resource Group možemo nastaviti sa procesom kreiranja Web App, kada smo popunili sva polja sa ispravnim podacima možemo ići na kreiranje Web App:


Potvrdom na Create naša web app počinje proces kreiranja i za manje od minute na početnoj stranici bi trebali imati našu novu tek kreiranu Web App... kao na slijedećoj slici:


Kada smo uspješno kreirali Web App, idemo sa web stranicom koju ćemo lokalno napraviti pomoću Visual Studio Code-a... Kao sadržaj stranice će biti jednostavna pozdravna poruka, a HTML kod glasi ovako:


Trenutno imamo našu Web App kreiranu i podešenu na Azure portalu i našu Web stranicu koja se nalazi lokalno na našem računaru. Pošto je glavni cilj ovog tutorijala da naučimo kako se sajt uploduje bez Visual Studio, mi koristimo FileZilla FTP program, nakon što instaliramo FileZilla-u moramo podesiti nekoliko stvari na našoj Web App... stoga u portalu pronađemo našu App i idemo na podešavanja sa slijedećim koracima:

Web App -> All settings -> u dijelu Publishing pronađemo Deployment credentials ... Pred nama se otvara prozor Set deployment credentials u kojem je potrebno da podesimo naš FTP user name i Password (unosimo dva puta)... Što se tiče user name-a može ostati defaultni koji nam je Azure dodjelio, ako vam to ne odgovara vi unosite svoj...



Nakon što je predhodni korak uspješno završen možemo preći na tutorijal koji se odnosi na FileZilla dio. Otvorimo FileZilla -> File -> Site Manager -> New Site... (kojem dajemo novo ime u mom slučaju BlogTutorijal)

Nakon ovog koraka pred nama se nalazi slijedeći prozor:



Ako probamo sa Connect ili OK, dobit ćemo poruku kako nismo podesili Host dio, a informacija o Host-u, User i Password se nalaze na našem Azure portalu pod Web App... na slijedećoj slici se nalazi side-by-side prozor od Azure Web App postavki i File Zilla Site Manager prozora na kojem su označena polja koja trebamo kopirati iz jednog dijela u drugi. Mala napomena je da na Azure portalu kraj ovih polja koristite opciju Click to Copy kako bi čitav username i hostname bili pravilno kopirani... pod Password unosimo predhodno postavljeni Password pod Set deployment credentials...




Ako ste sve kopirali tačno iz Web App postavki, potvrdom na Connect kroz par sekundi pred vama bi trebala biti ovakva poruka:



U ovom trenutku je uspostavljena "veza" između FTP Servera na Cloudu i vašeg lokalnog PC-ija... U donjem desno uglu FileZilla prozora pod dijelom Remote site: imamo glavni folder i dva pod foldera, nama trenutno je najzanimljiviji folder "site", a u njemu se nalazi folder "wwwroot".

Cilj nam je otvoriti wwwroot folder i u njega Drag & Drop metodom prebaciti naš index.html sa PC-ija koji smo kreirali u jednom od predhodnih koraka. Kada prevučemo index.html u wwwroot imamo slijedeću situaciji:




Ako je sve prošlo kako treba u ovom trenutku na URL od naše Web App bismo trebali imati sadržaj index.html-a tj izgled i sadržaj koji smo definisali u tom html fajlu...


Ovaj prozor dokazuje da je naš tutorijal u potpunosti uspio, i da je index.html page koji smo kreirali uspješno postavljen na našu Web App na Azure cloud platformi.

Nadam se da vam je ovaj mini tutorijal bio od pomoći, te da vam je pomogao da shvatite kako uplodovati vaš sajt na Azure putem FTP-a, ako ste korisnik DreamSpark-a ili nekog drugog računa koji je spojen sa Microsoft Azure-om. Hvala na pažnji ako ste pratili ovaj tutorijal i nadam se da ste objavili svoju prvu stranicu na Azure-u. U tutorijalu je korišten FileZilla FTP program, uvjeren sam da i neke druge alternativne varijante ftp programa će podjednako uspješni biti.. Također na mom blogu se nalazi i članak/tutorijal kako uplodovati sajt putem Visual Studija koji se nalazi na ovom linku.

Ako vam je od pomoći bio mini tutorijal, podijelite ga putem društvenih mreža kako bi i ostalima bio od pomoći. Do sljedećeg tutorijala ...

Pozdrav! Almir Vuk | AV Development

You Might Also Like

0 comments