Azure pro studenty 2: Používání

Azure v DreamSparku je zajímavý způsob, jak začít s cloudovou platformou společnosti Microsoft. V minulém článkujsme si ukázali, jak tuto nabídku aktivovat, nyní se podíváme na to, co je vlastně její součástí.

Při využívání Azure v rámci DreamSparku máte jistotu, že neutratíte ani korunu – systém vám totiž nedovolí vytvořit nic jiného, než služby, které jsou zdarma. K dispozici je následující:

• Azure Web App pro hostování webů.
• Visual Studio Online pro ukládání zdrojových kódů a týmovou spolupráci.
• Application Insights pro sběr informací o návštěvnosti webu a diagnostiku.

Web App

Služba Azure Web App slouží k hostování webových stránek a aplikací. Jakmile na portále vytvoříte nový web, můžete na něj nahrát soubory přes FTP, Visual Studio Online nebo například Git.

1. Začínáme na novém portále Microsoft Azure, na adrese https://portal.azure.com.

Tip: Pokud se moc nepřátelíte s angličtinou, můžete celý portál přepnout do češtiny. Na hlavní obrazovce klikněte na Portal settings a v LANGUAGE vyberte čeština. Tento návod nicméně pracuje s anglickou verzí.

Poznámka: Druhý management portál (na adrese manage.windowsazure.com) není u DreamSparku dostupný.

2. Klikněte na NEW, zvolte Web + Mobile a poté Web App.

• Do políčka URL zadejte adresu, kterou bude váš web mít. Tato hodnota musí být jedinečná napříč všemi Web App všech zákazníků. Azure k ní pak přidá doménu druhého řádu a vznikne například "mujsparkweb.azurewebsites.net".
• Do pole CREATE NEW APP SERVICE PLAN vyplňte libovolný název bez mezer a speciálních znaků, např. "MujsparkwebASP".
• Podobně do pole CREATE NEW RESOURCE GROUP vložte libovolný název bez mezer a speciálních znaků, např. "MujsparkwebRG".
• LOCATION změňte třeba na North Europe, tím zajistíte, že váš web poběží v evropském datacentru.
• Potvrďte tlačítkem Create.

3. Na hlavní obrazovce portálu vznikne dlaždice nového webu a bude signalizovat, že Web App se připravuje. Kdybyste chtěli, můžete ji jednoduše odepnout, přesunou, zvětšit či zmenšit – nový portál je velmi přizpůsobitelný.

4. Po (krátké) chvíli bude web vytvořen a otevře se karta s jeho detaily. Na jednom místě jsou shrnuty základní informace, které můžete při práci s webem potřebovat – jeho adresa (URL), FTP a App Service plán. Když posunete zobrazení níž, uvidíte základní statistiky a další nastavení. I tento pohled je plně přizpůsobitelný.

5. Když teď kliknete na URL webu, uvidíte, že opravdu funguje – Azure automaticky poskytuje startovací stránku. Zatím na webu nic jiného není, tak to v dalších krocích napravíme.

FTP

Pro nahrání prvních souborů použijeme jednoduchý a oblíbený způsob – FTP.

1. Jako testovací aplikace nám poslouží prostý PHP skript, který vypíše tradiční hlášku:

(Na obrázku se používá Visual Studio Code – multiplatformní editor kódu, který se dá stáhnout zadarmo.)

2. Protože tento proces absolvujeme poprvé, musíme vytvořit přihlašovací údaje (jméno a heslo), které budeme v rámci svého účtu používat.

• Na kartě webu klikněte na All settings (nebo nahoře na ozubené kolečko Settings).
• Zascrollujte dolů a vyberte Deployment credentials.
• Zadejte uživatelské jméno (musí být unikátní napříč Azure) a heslo.
• Klikněte na Save.

3. V přehledu se aktualizuje položka "FTP/Deployment username" a my nyní můžeme podržet kurzor myši nad FTP hostnamea kliknout na ikonku kopírování, která se po chvíli objeví.

4. Zkopírovanou adresu potom můžeme vložit do FTP klienta (např. Průzkumníka Windows nebo Total Commanderu). Jako jméno zadejte FTP/Deployment usernamez portálu a heslo, které jste nastavili v předchozím kroku.

5. Otevře se výpis složek, které přísluší vašemu webu na serveru v Azure. Soubory aplikace najdete v adresáři site/wwwroot. Soubor hostingstart.htmlje právě ta modrá stránka, kterou jsme dostali od Azure automaticky.

6. Smažeme soubor hostingstart.html a překopírujeme soubor index.php.

7. Hotovo, web nyní zobrazuje náš skript.

Visual Studio Online

Další službou, kterou máte v DreamSparku k dispozici, je Visual Studio Online. Není to online verze Visual Studia, jak by mohl název napovídat, ale cloudové prostředí pro týmový vývoj, správu zdrojového kódu a automatické nasazování aplikací. Ve spojení s Azure se používá typicky tak, že napojíte své IDE (třeba Visual Studio) na Visual Studio Online, ukládáte do něj změny v projektu a následně nastavíte automatické nasazování aplikace do Azure.

1. V novém portále Azure klikněte na NEW, vyberte Developer Services a poté Team Project.

Budete vyzvání k zadání návu nového projektu.

2. Protože vytváříme nový týmový projekt poprvé, musíme založit i nový účet VSO. Tento krok se skrývá pod ACCOUNT.

Název účtu zadáváte do pole URL. Jakmile se vytvoří, bude mít jedinečnou adresu <název>.visualstudio.com.

3. Poté stačí dokončit vyplňování další voleb. Můžete si zvolit, zda využít Team Foundation Version Control (TFVC), nebo Git. A také je vhodné přepnout LOCATION na Evropu. Azure v DreamSparku je připraveno na podporu Gitu, takže doporučujeme zvolit jako Version ControlGit.

4. Za okamžik se na hlavní obrazovce Azure objeví právě vytvořený týmový projekt.

5. Když nyní přejdete do svého účtu Visual Studio Online (na adrese <název>.visualstudio.com), měli byste pod Browsevidět nový projekt.

6. Tlačítko Navigateotevře zvolený projekt a můžete začít procházet zdrojový kód, check-iny, work items i upravovat členy týmu. Než do něj poprvé pošlete nějaké soubory, bude projekt prázdný.

7. Na záložce HOME najdete tlačítko Open in Visual Studio.

8. Po stvrzení, že chcete odkaz oteřít, se spustí Visual Studio a repozitář se vám automaticky nabídne v Team Exploreru.

9. Když kliknete na Clone this repository, zadáte cestu, kam chcete projekt naklonovat a potvrdíte tlačítkem Clone, Visual Studio připraví Git repozitář na vašem disku a vy do něj pak můžete začít vkládat soubory a pracovat na projektech.

Poznámka: Stejného efektu dosáhnete i přímo v Azure tlačítkem Open in Visual Studio.

Application Insights

Application Insightsje služba pro monitorování mobilních a webových aplikací. Dokáže detekovat pády a jejich příčiny i sledovat využití a zátěž aplikace. Pokročilé analytické nástroje jsou k dispozici pro weby v ASP.NET a J2EE a pro mobilní aplikace na platformách Windows, Android i iOS. Tady si ukážeme, jak jednoduše přidat Application Insights do webové aplikace ASP.NET MVC.

1. V novém portále Microsoft Azure (https://portal.azure.com) klikněte na NEW, vyberte opět Developer Services a poté Application Insights.

2. Název je libovolný, jako typ aplikace vybíráte, zda se bude jednat o mobilní, či webovou appku. V tomto případě vybereme webovou.

3. To je vše, po kliknutí na Create se vytvoří nová instance Application Insights pro web ASP.NET a otevře se její karta. Poznamenejte si údaje Resource group, Name, Instrumentation Key a Subscription Id.

4. Práce pokračuje ve Visual Studiu. Předpokládáme, že již máte vytvořený projekt webu v ASP.NET MVC (File –> New –> Project… –> Visual C# –> Web –> ASP.NET Web Application). Klikneme pravým tlačítkem na projekt a zvolíme Add Application Insights Telemetry.

5. Otevře se dialog, který nám po přihlášení oznámí, že nemáme žádné platné subskripce. To nevadí, protože můžeme použít Advanced Modea vyplnit vše potřebné ručně.

6. Do formuláře vyplníme hodnoty, které jsme v kroku 3 zkopírovali z portálu.

7. Tlačítkem Addpotvrdíme a Visual Studio nalinkuje potřebné NuGetové balíčky a připraví webový projekt pro odesílání telemetrických údajů. Správné fungování můžete ověřit jednoduše tím, že aplikaci spustíte (F5). Ve Visual Studiu se pak objeví malý popup informující o tom, že analytika byla odeslána.

8. Na portále Azure se první měření projeví za okamžik.