Cvičení – napsání kódu, který implementuje webovou aplikaci
V této lekci použijete vývojářské nástroje k vytvoření kódu pro úvodní webovou aplikaci.
Vytvoření nového webového projektu
Jedním z nejdůležitějších nástrojů rozhraní příkazového řádku .NET CLI je nástroj dotnet
. Pomocí tohoto příkazu vytvoříte nový webový projekt ASP.NET Core.
Nejprve nainstalujme verzi dotnet
8.0 do Cloud Shellu. V tomto cvičení budeme používat sadu SDK verze 3.1.102.
Spuštěním následujících příkazů vpravo stáhněte a nainstalujte dotnet 8.0:
wget https://dot.net/v1/dotnet-install.sh -O dotnet-install.sh chmod +x ./dotnet-install.sh ./dotnet-install.sh --channel 8.0 export PATH="~/.dotnet:$PATH" echo "export PATH=~/.dotnet:\$PATH" >> ~/.bashrc
Potom spuštěním následujícího příkazu vytvořte novou aplikaci ASP.NET Core MVC s názvem BestBikeApp:
dotnet new mvc --name BestBikeApp
Tento příkaz vytvoří novou složku s názvem BestBikeApp, do které se bude ukládat tento projekt.
Volitelné otestování webové aplikace
Otevřete druhou relaci příkazového prostředí tak, že přejdete na https://shell.azure.com/ novou kartu. Aplikaci můžete otestovat místně v Azure. Můžete to udělat podle následujících kroků:
V primární relaci prostředí příkazového řádku spusťte následující příkazy, které sestaví a spustí webovou aplikaci:
cd BestBikeApp dotnet run
Měl by se zobrazit výstup podobný tomuto:
warn: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[35] No XML encryptor configured. Key {b4a2970c-215c-4eb2-92b4-c28d021158c6} may be persisted to storage in unencrypted form. info: Microsoft.Hosting.Lifetime[14] Now listening on: http://localhost:5022 info: Microsoft.Hosting.Lifetime[0] Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0] Hosting environment: Development info: Microsoft.Hosting.Lifetime[0] Content root path: /home/cephas_lin/BestBikeApp
Výstup popisuje situaci po spuštění aplikace: aplikace běží a naslouchá na portu 5022.
Z jiné relace Cloud Shellu spusťte následující příkaz a přejděte do své webové aplikace:
curl -kL http://127.0.0.1:5000/
Měl by se zobrazit nějaký kód HTML, který končí na následujících řádcích:
<div class="text-center"> <h1 class="display-4">Welcome</h1> <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p> </div> </main> </div> <footer b-b5g3qljvtd class="border-top footer text-muted"> <div b-b5g3qljvtd class="container"> © 2024 - BestBikeApp - <a href="/Home/Privacy">Privacy</a> </div> </footer> <script src="/lib/jquery/dist/jquery.min.js"></script> <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="/js/site.js?v=hRQyftXiu1lLX2P9Ly9xa4gHJgLeR1uGN5qegUobtGo"></script> </body> </html>
Z primární relace příkazového prostředí ukončete webovou aplikaci stisknutím kláves Ctrl+C.
K vytvoření úvodní webové aplikace použijeme Maven, běžně používaný nástroj pro správu projektů a sestavení pro aplikace v Javě. Ke generování kódu webové aplikace použijte šablonu maven-archetype-webapp
.
Spuštěním následujících příkazů v Azure Cloud Shellu teď vytvořte novou webovou aplikaci:
cd ~ mvn archetype:generate -DgroupId=example.demo -DartifactId=helloworld -DinteractiveMode=false -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.4
A teď spusťte tyto příkazy, kterými přejdete do nového adresáře aplikace „helloworld“ a zabalíte aplikaci pro nasazení:
cd helloworld mvn package
Po dokončení spuštění příkazu spusťte tyto příkazy a otevřete cílový adresář a zobrazte jeho obsah:
cd target ls
Budete mít uvedený soubor s názvem helloworld.war
. Toto je balíček webové aplikace, který nasadíme do služby App Service.
K vytvoření počáteční webové aplikace Node.js použijete Node Package Manager (npm
) a javascriptový kód, který spustí vlastní zpracování webové stránky.
Spuštěním následujících příkazů v Azure Cloud Shellu vytvořte novou
package.json
aplikaci, která bude popisovat naši Node.js aplikaci:cd ~ mkdir helloworld cd helloworld npm init -y
Tím se vytvoří nový package.json
soubor v aktuální složce. Pokud zadáte ls
okno terminálu, měli byste ho najít v aktuální složce. Ke spuštění logiky webu budeme potřebovat javascriptový soubor. Vzhledem k tomu, že je to jen základní příklad, budeme potřebovat jenom jeden soubor: index.js
.
Spuštěním následujícího příkazu v terminálu vytvořte soubor:
touch index.js
Teď je potřeba v obou souborech provést několik úprav. Spuštěním následujícího příkazu v terminálu otevřete interaktivní editor:
code .
package.json
Vyberte soubor a v oddíluscripts
proveďte následující úpravy, které použijí Node.js ke spuštění webové aplikace:{ "name": "helloworld", ... "scripts": { "start": "node index.js" }, ... }
Soubor uložte tak , že vyberete nabídku ... nebo stisknete Kombinaci kláves Ctrl+S ve Windows a Linuxu nebo Command+S v macOS.
Důležité
Pokaždé, když upravujete soubor v editoru, nezapomeňte ho uložit tak, že vyberete nabídku ... v pravém horním rohu editoru nebo stisknete Ctrl+S ve Windows a Linuxu nebo Command+S v macOS. Pokud chcete editor ukončit, stiskněte Ctrl+Q ve Windows a Linuxu nebo klikněte v pravém horním rohu editoru a vyberte Ukončit v macOS.
Přepněte na soubor
index.js
a přidejte do něj následující obsah. Jedná se o malý Node.js program, který vždy odpoví "Hello World!" při každém požadavku GET na server.const http = require('http'); const server = http.createServer(function(request, response) { response.writeHead(200, { "Content-Type": "text/html" }); response.end("<html><body><h1>Hello World!</h1></body></html>"); }); const port = process.env.PORT || 1337; server.listen(port); console.log(`Server running at http://localhost:${port}`);
Uložte soubor a ukončete editor výběrem ikony ... v pravém horním rohu a výběrem možnosti Uložit a zavřít editor z místní nabídky nebo pomocí kláves akcelerátoru Ctrl+S a Ctrl+Q ve Windows a Linuxu.
Volitelné otestování webové aplikace
Když spouštíte webovou aplikaci helloworld, můžete ji ověřit místně otevřením druhé relace příkazového prostředí.
Na nové kartě prohlížeče přejděte na https://shell.azure.com/.
Z primární relace příkazového prostředí spusťte následující příkazy, které spustí vaši webovou aplikaci:
cd ~/helloworld npm start
Z druhé relace příkazového prostředí spusťte následující příkaz, který přejde na vaši webovou aplikaci:
curl http://127.0.0.1:1337/
Měli byste získat následující výstup:
<html><body><h1>Hello World!</h1></body></html>
Z primární relace příkazového prostředí ukončete webovou aplikaci stisknutím kombinace kláves Ctrl+C a potom zavřete druhou kartu prohlížeče relace prostředí.
K vytvoření úvodní webové aplikace použijeme architekturu webové aplikace Flask.
Spuštěním následujících příkazů v Azure Cloud Shellu nastavte virtuální prostředí a nainstalujte Flask do svého profilu:
python3 -m venv venv source venv/bin/activate pip install flask
Spuštěním těchto příkazů vytvořte a přepněte do nového adresáře webové aplikace:
mkdir ~/BestBikeApp cd ~/BestBikeApp
Otevřete application.py v interaktivním editoru Pythonu a vytvořte nový soubor pro webovou aplikaci:
code application.py
Zkopírováním a vložením následujícího kódu v Pythonu vytvořte hlavní funkce webové aplikace:
from flask import Flask app = Flask(__name__) @app.route("/") def hello(): return "<html><body><h1>Hello Best Bike App!</h1></body></html>\n"
Uložte soubor a ukončete editor tak, že v pravém horním rohu vyberete nabídku ... a pak vyberete Uložit>zavřený editor nebo stisknete Kombinaci kláves Ctrl+S a Ctrl+Q ve Windows a Linuxu.
Pokud chcete nasadit aplikaci do Azure, budete muset uložit seznam požadavků na aplikace, které jste pro ni vytvořili, do souboru requirements.txt . Provedete to pomocí následujícího příkazu:
pip freeze > requirements.txt
Volitelné otestování webové aplikace
Aplikaci můžete otestovat místně v Azure, když je spuštěná.
Otevřete druhou relaci příkazového prostředí na nové kartě https://shell.azure.com/prohlížeče .
Z primární relace příkazového prostředí (vpravo) spusťte následující příkazy, které aktivují virtuální prostředí:
cd .. source venv/bin/activate
Z primární relace příkazového prostředí (vpravo) spusťte následující příkazy, které spustí vaši webovou aplikaci:
cd ~/BestBikeApp export FLASK_APP=application.py flask run
Z druhé relace příkazového prostředí spusťte následující příkaz, který přejde na vaši webovou aplikaci:
curl http://127.0.0.1:5000/
Měli byste získat následující výstup HTML:
<html><body><h1>Hello Best Bike App!</h1></body></html>
Z primární relace příkazového prostředí stisknutím kombinace kláves Ctrl+C ukončete webovou aplikaci a pak zavřete sekundární Azure Cloud Shell.