Weboldal készítése percek alatt Azure-ban – lépésről lépésre

A Visual Studio 2015 és az Azure SDK segítségével készen állsz arra, hogy elkezdj a felhőben kódolni. Készítsünk egy weboldalt együtt és publikáljuk az Azure-on, mindezt a Visual Studio 2015-tel és lássuk, hogy is működik!

Mielőtt elkezdenénk, győződj meg róla, hogy az alábbiakat megtetted:

(Ha ezek a lépések még hiányoznak, nézd meg egy másik blog bejegyzésünket, amelyből megtudatod a kezdőlépéseket a Visual Studio 2015 és Azure terén. Ezt követően ide visszatérve el is kezdhetünk kódolni!)

 

Indítás és csatlakozás

Indítsd el a Visual Studio Community 2015-öt.

Ha még nem tetted volna meg, jelentkezz be a Microsoft felhasználóneveddel a jobb felső sarokban található Sign in menüpontra kattintva. Arra a fiókra van szükséged, amelyiket a Dreamsparkhoz és Azure-hoz már használtál.

01

A bejelentkezés után a Visual Studio 2015 automatikusan felismeri az Azure előfizetésed.

 

Nyisd meg a Cloud Explorert

A Cloud Explorer a Visual Studio 2015 közvetlen csatlakozása az Azure-hoz. Nyissuk meg az eszközt a következő menüből elérve:

View / Other Windows / Cloud Explorer

02

 

Itt látható is az Azure előfizetésed. Példaképpen nézd meg az enyém:

03

Látod alul az Actions panelt ?  (Ugyanezt elérheted, ha jobb egérgombbal ráklikkelsz a webes alkalmazásaid egyikére) Ez igen kézenfekvő: az “Open in portal” megnyitja a webes alkalmazásod az Azure Portálon belül, az “Open in Browser” pedig az alapértelmezett böngésződben fogja megjeleníteni a működő webalkalmazást.

Ezúttal azonban valami újat fogunk csinálni. Kezdjünk is hozzá!

 

Új wedoldal készítése

A menüsorban navigálj az alábbira:

File / New / Web Site

04

A megjelenő ablakban válaszd az ASP.NET Empty Website opciót:

05

Ezután látni fogod az új WebSite megoldásodat a Solution Explorer-ben.

 

Készítsd el a kezdőlapot

A Solution Explorer ablakban kattints jobb egérgombbal a WebSite solution-re, majd:

Add/Add New Item

06

Ezt egyébként a Ctrl+Shift+A billenytűkombináció lenyomásával is elérheted.

A megjelenő ablakból válaszd a HTML Page opciót, és kattints az Add gombra.

07

A Solution Explorerben megjelenik az üres weboldal fájlod.

08

Ennek HtmlPage.html a neve. Ez a fájl lesz a projekted kezdőlapja, úgyhogy nevezzük át index.html-re. Ez az általános elnevezés, amelyen alapértelmezettként elérhető egy weboldal kezdőlapja.

1. A Visual Studio projekt fájljainak átnevezésére két módod van:Jobb klikk a HtmlPage.html-re, majd a felugró menüből kattints a Rename menüpontra.

2. A Solution Explorer alatt található Properties ablakban megtalálod a File Name mezőt. Erre kattintva átnevezheted a HtmlPage.html-t index.html-re.

Készen vagy? Akkor itt az ideje, hogy elkezdjünk kódolni!

 

Weboldalad szerkesztése

Készítsünk egy egyszerű weboldalt hogy láthassuk, hogy is működik együtt a Visual Studio 2015 és az Azure. Az index.html fájl legyen megnyitva a főablakban (ha nincs, kattints rá kétszer a Solutions Explorer-ben)

A fájl már meglévő kódja:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body> </body>
</html>

 

Kattints a <title> és</title> tagok közé. A weboldaladnak címet kell adnunk. Legyen ez “Hello Cloud!”

Egyszerűen írd ezt be a tagok közé:

<!DOCTYPE html>
<html>
<head>
<title>Hello Cloud!</title>
<meta charset="utf-8" />
</head>
<body> </body>
</html>

 

Ezután a <body> és </body> elemek közé írd be a következő kódot:

<h1>Hello Cloud!</h1>
<p>Check out this sweet website I made in Visual Studio 2015!</p>

 

Ezzel elkészült a weboldalad kódja! így kell kinéznie:

<!DOCTYPE html>
<html>
<head>
<title>Hello Cloud!</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Hello Cloud!</h1>
<p>Check out this sweet website I made in Visual Studio 2015!</p>
</body>
</html>

 

Kész is vagyunk! Ideje publikálni a munkád. Annyit kell tennünk, hogy közzétesszük a webes alkalmazást az Azure-ban.

 

Webes alkalmazás közzététele

A Solutions Explorer-ben kattints jobb egérgombbal a WebSite megoldásra, majd válaszd a Publish Web App opciót:

09

Ezzel megnyílik a Publish Web ablak. A bal oldalon a Profile fül van alapértelmezettként kiválasztva. Kattints a Microsoft Azure Web Apps menüpontra, majd a felugró ablakban kattints a New gombra.

 

10

El fogjuk nevezni a webes appunkat és hozzárendelünk néhány Azure attribútumot: az App Service plant, a Resource Groupot, és a Regiont. így néz ki az ablak:

 

11

Ezután a következőket kell tenned:

1. Kattints a Web App name melletti üres mezőre. Ez lesz a weboldalad URL címe. Az itt megadott név a “.azurewebsites.net” elé fog kerülni. A példánkban a web app neve “myhellocloud”, tehát a weboldal URL címe myhellocloud.azurewebsites.net lesz. (Ez egyébként most is elérhető, te is megnézheted!) Mivel én ezt a nevet használtam, neked már mást kell választanod.

2. Az App Service plan legördülő menüből válaszd ki a “Create new App Service plan” pontot.

3. A Resource group menüből válaszd a “Create new resource group” pontot.

4. A Region menüben a hozzád földrajzilag legközelebbi helyszínt válaszd.

 

Ha mindent jól csináltál, az ablaknak így kell festenie:

 

12

 

Töltsük ki a kimaradt üres mezőket! Az App Service plan és Resource group tetszőleges nevet kaphatnak.

Mi az az App Service plan? Ez attribútumok egy halmaza, amelyet újra felhasználhatsz több appon keresztül. Az attribútumok között megtalálható a fizetési modul (ez egyelőre maradjon “Free”!) és az előfizetés (ha több Azure előfizetésed van). A most elkészített plan valószínűleg megfelelő lesz a diákként elkészített webes alkalmazásaidhoz. Ezt is elnevezheted tetszőlegesen. Én “myappserviceplan”-nek hívom.

Mi az a Resource group? Egy címke, melynek segítségével több Azure erőforrást csoportosíthatsz, hogy egyszerűen kezelhesd őket az Azure Portalon. Haladó programozók, akik az Azure-t használják több, specifikus erőforrást csoportosítanak egybe, hogy felügyelhessék őket,  követhessék a csoportok költségeit, könyvelését, stb. Mivel ez a címke is tetszőleges, bátran nevezd el úgy, ahogy szeretnéd. Az enyém a “myresourcegroup” nevet kapta.

Mi az a Region?  A legördülő menü tartalmazza a világ összes Azure adatközpontját, ahol hosztolhatod a webes alkalmazásod. Minden adatközpont egy hatalmas épület tele Azure erőforrást futtató számítógépekkel. így amikor kiválasztod a Regiont, azt határozod meg, hogy a világ mely részén legyen a számítógép, amelyen a weboldal elérhető. Általában a hozzád legközelebbet ajánlott választani, de a régió kiválasztása olcsóbb mint egy repülőjegy, úgyhogy miért ne utaztatnád a weboldalad egy olyan helyre, ahová mindig is el akartál jutni? Én nagyon szeretem a Nagy-tavakat, ezért a North Central US adatközpontot választottam.

 

Az ablak jelenleg így néz ki:

 

13

 

Kattintsunk a Create-re, és lássuk mi történik!

 

14

 

Egy kis idő múlva, esetleg pár percen belül a webes alkalmazásod elkészül, így ideje publikálni a weboldalt.

Íme az ablak – a teendőd csupán annyi, hogy a Publish gombra kattintasz.

 

15

 

Ekkor az ablak eltűnik. A képernyő aljára tekintve láthatod az Output ablakot, amelyen figyelemmel követheted, ahogy a kezdőlapod épp az általad választott Azure központba feltöltésre kerül.

 

Egy böngészőablak ugrik elő, itt is van a kezdőlapod, élőben, az interneten keresztül, egyenesen Észak Amerikából! (vagy az általad választott régióból)

 

16

 

Magad is meg akarsz róla győződni? Ezen a linken keresztül megteheted:

http://myhellocloud.azurewebsites.net/

 

Vissza a Cloud Explorer-hez

Emlékszel a Cloud Explorerre? Egyáltalán miért nyitottuk ezt meg? Menjünk vissza és nézzük meg újra! Két teendőd van:

 

1.Kattints a Refresh gombra. Ez a kék körkörös nyíl a képernyő tetején.

2. Kattints duplán a Web Apps-ra a listában, hogy láthatóvá tedd a tartalmát

 

Itt is van! Az új webes alkalmazásom, a myhellocloud látható a Cloud Explorer-ben. Jobb klikkel (vagy az Actions panel segítségével) bármikor megnyithatom a böngészőmben. Az Azure Portal-ból is elérhetem, de azt egy másik alkalommal fogjuk felfedezni.

 

Változtass valamin és publikálj újra!

Mi történik, ha csak egy kis dolgot akarok megváltoztatni és újra közzétenni a weboldalamat? Próbáljuk ki!

 

Az index.html fájl valószínűleg még mindig nyitva van. Ha nincs, kattints rá kétszer a Solutions Explorer-ben!

 

<!DOCTYPE html>
<html>
<head>
<title>Hello Cloud!</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Hello Cloud!</h1>
<p>Check out this sweet website I made in Visual Studio 2015!</p>
</body>
</html>

 

Vidd a kurzort a </p>-vel záruló sor végére, nyomj Entert, ezzel új sort kezdve, majd írj be valami ilyesmit:

 

<p>Coming at ya live from the North Central US datacenter!</p>

 

Bármit is írsz, a <p> és </p> közé kell, hogy essen.

Ezzel az index.html fájlunk az alábbira változott:

<!DOCTYPE html><html>
<head>
<title>Hello Cloud!</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Hello Cloud!</h1>
<p>Check out this sweet website I made in Visual Studio 2015!</p>
<p>Coming at ya live from the North Central US datacenter!</p>
</body>
</html>

 

Szuper! Publikáljuk újra. Ne gondold, hogy ez sokáig fog tartani! Jobb egérgombbal kattints a WebSite megoldásra a Solution Explorer-ben és válaszd a Publish Web App opciót a felugró menüből.

 

17

 

Ekkor ismét az alábbi ablakot láthatod:

18

 

Már csak annyit kell tenned, hogy megnyomod a Publish gombot. Az ablak eltűnik, az Output ablak a képernyő alján aktivitást mutat egy pillanatra, és íme, máris láthatod a frissített honlapod!

 

19

 

Ha esetleg nem lenne látható a változás, nyomd meg az F5 billentyűt, hogy frissítsd a böngésződ.

Készen is vagyunk, elkészítetted az első weboldalad a Visual Studio 2015 és az Azure segítségével!

Köszönöm, hogy velem tartottál! Vajon mit fogsz ezek után készíteni? Csak a fantáziád szabhat határt!

Szólj hozzá!

komment