Előző

Következő

Gyakorlat: Kód írása webalkalmazás implementálásához

Befejeződött

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.

1. 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
   

2. 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:

1. 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.

2. 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">
                &copy; 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>
   

3. 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.

1. 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
   

2. 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
   

3. 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.

1. 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.

1. Futtassa a következő parancsot a terminálban a fájl létrehozásához:

   touch index.js
   

2. 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 .
   

3. Válassza ki a package.json fájlt, és végezze el a következő módosításokat a szakaszon a scripts Node.js használatával a webalkalmazás elindításához:

   {
     "name": "helloworld",
     ...
     "scripts": {
       "start": "node index.js"
     },
     ...
   }
   

4. 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.

5. 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}`);
   

6. 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.

1. Egy új böngészőlapon keresse meg a következőt https://shell.azure.com/: .

2. Futtassa a következő parancsokat az elsődleges parancssori munkamenetben a webalkalmazás elindításához:

   cd ~/helloworld
   npm start
   

3. 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>
   

4. 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.

1. 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
   

2. 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
   

3. 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
   

4. 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"
   

5. 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.

6. 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.

1. Nyisson meg egy második parancshéj-munkamenetet egy új böngészőlapon https://shell.azure.com/.

2. 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
   

3. 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
   

4. 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>
   

5. 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.

Folytatás