Gyakorlat: Kód írása webalkalmazás implementálásához
Ebben a leckében fejlesztői eszközökkel hozza létre a kódot egy kezdő webalkalmazáshoz.
Új webes projekt létrehozása
A .NET CLI-eszközök legfontosabb része a dotnet
parancssori eszköz. Ezzel a paranccsal létrehoz egy új ASP.NET Core webes projektet.
Először telepítse a dotnet
megfelelő verzióját a Cloud Shellben. Ebben a gyakorlatban az SDK 3.1.102-es verzióját fogjuk használni.
Futtassa a következő parancsokat az Azure Cloud Shellben a dotnet letöltéséhez és telepítéséhez a jobb oldalon:
wget -q -O - https://dotnet.microsoft.com/download/dotnet/scripts/v1/dotnet-install.sh | bash -s -- --version 6.0.404 export PATH="~/.dotnet:$PATH" echo "export PATH=~/.dotnet:\$PATH" >> ~/.bashrc
Ezután futtassa a következő parancsot egy új ASP.NET Core MVC-alkalmazás "BestBikeApp" nevű létrehozásához:
dotnet new mvc --name BestBikeApp
A parancs létrehoz egy új mappát „BestBikeApp” néven, amely a projektet tárolja majd.
A webalkalmazás igény szerinti tesztelése
Nyisson meg egy második parancshéj-munkamenetet egy új lapon való böngészéssel https://shell.azure.com/ . Az alkalmazást helyileg tesztelheti az Azure-ban. Ehhez a következőket kell tennie:
Futtassa a következő parancsokat az elsődleges parancssori munkamenetben a webalkalmazás létrehozásához és futtatásához:
cd BestBikeApp dotnet run
A kimenetet a következőhez hasonlóan kell megkapnia:
info: Microsoft.Hosting.Lifetime[0] Now listening on: https://localhost:5001 info: Microsoft.Hosting.Lifetime[0] Now listening on: http://localhost:5000 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/user/BestBikeApp
A kimenet az alkalmazás indítása utáni helyzetet írja le: az alkalmazás fut, és az 5000-es porton figyel.
Futtassa a következő parancsokat a második parancssori munkamenetben a webalkalmazás kitallózásához:
curl -kL http://127.0.0.1:5000/
Meg kell jelennie néhány HTML-nek, amely a következő sorokban végződik:
<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 class="border-top footer text-muted"> <div class="container"> © 2021 - 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=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script> </body> </html>
A webalkalmazást az elsődleges parancssori munkamenetben zárhatja be a Ctrl+C billentyűkombinációval.
Kezdő webalkalmazás létrehozásához a Mavent, a Java-alkalmazások gyakran használt projektfelügyeleti és buildelési eszközét fogjuk használni. A webalkalmazás kódjának létrehozásához a maven-archetype-webapp
sablont fogjuk használni.
Most futtassa az alábbi parancsokat az Azure Cloud Shellben egy új webalkalmazás létrehozásához:
cd ~ mvn archetype:generate -DgroupId=example.demo -DartifactId=helloworld -DinteractiveMode=false -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.4
Most pedig futtassa ezeket a parancsokat, hogy az új „helloworld” alkalmazásmappába lépjen, és összecsomagolja az alkalmazást az üzembe helyezéshez:
cd helloworld mvn package
A parancs futtatása után futtassa ezeket a parancsokat a célkönyvtár megnyitásához és a tartalom listázásához:
cd target ls
Ekkor megjelenik egy fájl neve helloworld.war
. Ez az App Service-ben üzembe helyezendő webalkalmazás-csomag.
Az alapszintű Node.js-webalkalmazás létrehozásához a Node Package Managert (npm
) használjuk, és egy JavaScript-kóddal futtatjuk a webhely tényleges feldolgozási folyamatát.
Futtassa a következő parancsokat az Azure Cloud Shellben egy új, a Node.js-alkalmazást leíró új
package.json
létrehozásához:cd ~ mkdir helloworld cd helloworld npm init -y
Ezzel létrehoz egy új package.json
fájlt az aktuális mappában. Ha beírja ls
a terminálablakba, az aktuális mappában kell megtalálnia. A webhelylogika futtatásához JavaScript-fájlra lesz szükségünk. Mivel ez csak egy egyszerű példa, csak egy fájlra lesz szükségünk: index.js
.
Futtassa a következő parancsot a terminálban a fájl létrehozásához:
touch index.js
Most mindkét fájlt kissé módosítanunk kell. Futtassa az alábbi parancsot a terminálban egy interaktív szerkesztő megnyitásához:
code .
Válassza ki a
package.json
fájlt, és végezze el a következő módosításokat a szakaszon ascripts
Node.js használatával a webalkalmazás elindításához:{ "name": "helloworld", ... "scripts": { "start": "node index.js" }, ... }
Mentse a fájlt a ... menü kiválasztásával, vagy nyomja le a Ctrl+S billentyűkombinációt Windows és Linux rendszeren, illetve a Command+S billentyűkombinációt macOS rendszeren.
Fontos
Amikor szerkeszt egy fájlt a szerkesztőben, a szerkesztő jobb felső sarkában található ... menü kiválasztásával, vagy a Ctrl+S billentyűkombináció lenyomásával windowsos és Linux rendszeren vagy Command+S billentyűkombinációval macOS rendszeren. A szerkesztőből való kilépéshez nyomja le a Ctrl+Q billentyűkombinációt Windows és Linux rendszeren, vagy kattintson a szerkesztő jobb felső sarkára, és válassza a Kilépés a MacOS-en lehetőséget.
Nyissa meg az
index.js
fájlt, és adja hozzá az alábbi tartalmat. Ez egy kis Node.js program, amely mindig ""Helló világ!" alkalmazás!" választ ad a kiszolgálóra irányuló GET kérések esetén.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}`);
Mentse a fájlt, és lépjen ki a szerkesztőből a jobb felső sarokban található ... ikonra kattintva, és válassza a Helyi menü Mentés és bezárás parancsát, vagy a Ctrl+S és a Ctrl+Q billentyűkombinációval Windows és Linux rendszeren.
A webalkalmazás igény szerinti tesztelése
A helloworld webalkalmazás futtatása közben egy második parancshéj-munkamenet megnyitásával ellenőrizheti, hogy helyileg fut-e.
Egy új böngészőlapon keresse meg a következőt https://shell.azure.com/: .
Futtassa a következő parancsokat az elsődleges parancssori munkamenetben a webalkalmazás elindításához:
cd ~/helloworld npm start
Futtassa a következő parancsokat a második parancssori munkamenetben a webalkalmazás kitallózásához:
curl http://127.0.0.1:1337/
A következő kimenetnek kell megjelennie:
<html><body><h1>Hello World!</h1></body></html>
Az elsődleges parancshéj-munkamenetben nyomja le a Ctrl+C billentyűkombinációt a webalkalmazásból való kilépéshez, majd zárja be a második rendszerhéj-munkamenet böngészőlapját.
Kezdő webalkalmazás létrehozásához a Flask webalkalmazás-keretrendszert fogjuk használni.
Futtassa a következő parancsokat az Azure Cloud Shellben egy virtuális környezet beállításához és a Flask telepítéséhez a profiljában:
python3 -m venv venv source venv/bin/activate pip install flask
Futtassa az alábbi parancsokat az új webalkalmazás-címtár létrehozásához és váltásához:
mkdir ~/BestBikeApp cd ~/BestBikeApp
Hozzon létre egy új fájlt a webalkalmazáshoz application.py megnyitásával a Python interaktív szerkesztőjében:
code application.py
Másolja ki és illessze be a következő Python-kódot a webalkalmazás fő funkcióinak létrehozásához:
from flask import Flask app = Flask(__name__) @app.route("/") def hello(): return "<html><body><h1>Hello Best Bike App!</h1></body></html>\n"
Mentse a fájlt, és lépjen ki a szerkesztőből a jobb felső sarokban található ... menüben, majd válassza a Szerkesztő bezárása lehetőséget>, vagy nyomja le a Ctrl+S és a Ctrl+Q billentyűkombinációt Windows és Linux rendszeren.
Az alkalmazás Azure-ban való üzembe helyezéséhez egy requirements.txt fájlba kell mentenie az alkalmazásra vonatkozó követelmények listáját. Ehhez futtassa az alábbi parancsot:
pip freeze > requirements.txt
A webalkalmazás igény szerinti tesztelése
Futtatás közben helyileg tesztelheti az alkalmazást az Azure-ban.
Nyisson meg egy második parancshéj-munkamenetet egy új böngészőlapon https://shell.azure.com/.
Az elsődleges parancshéj-munkamenetben (jobbra) futtassa a következő parancsokat a virtuális környezet aktiválásához:
cd .. source venv/bin/activate
Az elsődleges parancshéj-munkamenetben (jobbra) futtassa a következő parancsokat a webalkalmazás elindításához:
cd ~/BestBikeApp export FLASK_APP=application.py flask run
Futtassa a következő parancsokat a második parancssori munkamenetben a webalkalmazás kitallózásához:
curl http://127.0.0.1:5000/
A következő HTML-kimenetet kell kapnia:
<html><body><h1>Hello Best Bike App!</h1></body></html>
Az elsődleges parancshéj-munkamenetben nyomja le a Ctrl+C billentyűkombinációt a webalkalmazásból való kilépéshez, majd zárja be a másodlagos Azure Cloud Shellt.