Übung: Schreiben von Code zum Implementieren einer Web-Anwendung

  • 5 Minuten

In dieser Lerneinheit verwenden Sie Entwicklertools, um den Code für eine Webanwendung für Einsteiger zu erstellen.

Erstellen eines neuen Webprojekts

Das Herzstück der .NET-CLI-Tools ist das dotnet-Befehlszeilentool. Mit diesem Befehl erstellen Sie ein neues ASP.NET Core-Webprojekt.

Installieren Sie zunächst die geeignete Version von dotnet in Cloud Shell. Für diese Übung verwenden wir die SDK-Version 3.1.102.

  1. Führen Sie die folgenden Befehle rechts in Azure Cloud Shell aus, um .NET herunterzuladen und zu installieren:

    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. Führen Sie anschließend den folgenden Befehl aus, um eine neue ASP.NET Core-MVC-Anwendung namens „BestBikeApp“ zu erstellen:

    dotnet new mvc --name BestBikeApp

Der Befehl erstellt einen neuen Ordner namens „BestBikeApp“ für Ihr Projekt.

Optionales Testen der Web-App

Wenn Sie eine zweite Befehlsshellsitzung öffnen, indem Sie auf einer neuen Registerkarte zu https://shell.azure.com/ navigieren. Sie können Ihre Anwendung lokal in Azure testen. Führen Sie dazu die folgenden Schritte aus:

  1. Führen Sie die folgenden Befehle in Ihrer primären Befehlsshellsitzung aus, um Ihre Webanwendung zu erstellen und auszuführen:

    cd BestBikeApp
dotnet run

    Sie sollten eine Ausgabe wie die folgende erhalten:

    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

    Die Ausgabe beschreibt die Situation nach dem Start Ihrer App: Die Anwendung wird ausgeführt und lauscht auf Port 5000.

  2. Führen Sie in der sekundären Befehlsshellsitzung den folgenden Befehl aus, um zu Ihrer Webanwendung zu navigieren:

    curl -kL http://127.0.0.1:5000/

    Es sollte HTML angezeigt werden, das mit den folgenden Zeilen endet:

         <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. Drücken Sie in der primären Befehlsshellsitzung STRG+C, um Ihre Web-App zu beenden.

Wir verwenden zum Erstellen einer Starter-Webanwendung hier Maven, ein häufig verwendetes Projektmanagement- und Erstellungstool für Java-Apps. Zum Generieren des Codes für die Webanwendung wird die Vorlage maven-archetype-webapp verwendet.

  1. Führen Sie jetzt die folgenden Befehle in Azure Cloud Shell aus, um eine neue Web-App zu erstellen:

    cd ~
mvn archetype:generate -DgroupId=example.demo -DartifactId=helloworld -DinteractiveMode=false -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.4

  2. Führen Sie nun die folgenden Befehle aus, um zum Verzeichnis der neuen helloworld-Anwendung zu wechseln und die Anwendung für die Bereitstellung zu verpacken:

    cd helloworld
mvn package

  3. Wenn die Ausführung des Befehls abgeschlossen ist, führen Sie die folgenden Befehle aus, um das Verzeichnis target zu öffnen und dessen Inhalt aufzulisten:

    cd target
ls

In dieser Liste ist eine Datei namens helloworld.war enthalten. Hierbei handelt es sich um das Webanwendungspaket, das in App Service bereitgestellt werden soll.

Zum Starten einer Node.js-Web-Starteranwendung werden im Folgenden Node Package Manager (npm) und JavaScript-Code zum Ausführen der eigentlichen Webseitenverarbeitung verwendet.

  1. Führen Sie jetzt die folgenden Befehle in Azure Cloud Shell aus, um eine neue Datei package.json zu erstellen, die die Node.js-Anwendung beschreibt:

    cd ~
mkdir helloworld
cd helloworld
npm init -y

Dadurch wird eine neue package.json-Datei im aktuellen Ordner erstellt. Wenn Sie im Terminalfenster ls eingeben, sollte sie im aktuellen Ordner aufgeführt werden. Sie benötigen eine JavaScript-Datei, um die Websitelogik auszuführen. Da es sich nur um ein einfaches Beispiel handelt, wird nur eine Datei benötigt: index.js.

  1. Verwenden Sie zum Erstellen der Datei den folgenden Befehl im Terminal:

    touch index.js

  2. Jetzt müssen Sie ein paar Änderungen an beiden Dateien vornehmen. Führen Sie den folgenden Befehl im Terminal aus, um einen interaktiven Editor zu öffnen:

    code .

  3. Wählen Sie die Datei package.json aus, und nehmen Sie die folgenden Bearbeitungen am Abschnitt scripts vor, um Node.js zum Starten der Web-App zu verwenden.

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

  4. Speichern Sie die Datei über das Menü … oder die Tastenkombination (STRG+S unter Windows und Linux oder CMD+S unter macOS).

    Wichtig

    Achten Sie beim Ändern einer Datei im Editor darauf, dass Sie sie anschließend speichern, indem Sie das Menü … rechts oben im Editor oder eine Tastenkombination (Strg+S unter Windows und Linux oder Command+S unter macOS) verwenden. Drücken Sie zum Beenden des Editors unter Windows und Linux STRG+Q. Klicken Sie zum Beenden unter MacOS auf die obere rechte Ecke des Editors, und wählen Sie Beenden aus.

  5. Wechseln Sie zur Datei index.js, und fügen Sie die folgenden Inhalte hinzu. Dies ist ein kleines Node.js-Programm, das immer mit „Hello World!“ antwortet, wenn eine GET-Anforderung an den Server gesendet wird.

    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. Speichern Sie Ihre Datei, und beenden Sie den Editor, indem Sie oben rechts das Symbol ... und dann im Kontextmenü Speichern und Editor schließen auswählen oder indem Sie die Tastenkombinationen Strg+S und Strg+Q unter Windows bzw. Linux drücken.

Optionales Testen der Web-App

Während Sie die helloworld-Web-App ausführen, können Sie überprüfen, ob die Ausführung lokal erfolgt, indem Sie eine zweite Befehlsshellsitzung öffnen.

  1. Navigieren Sie in einer neuen Browserregisterkarte zu https://shell.azure.com/.

  2. Führen Sie in der primären Befehlsshellsitzung die folgenden Befehle aus, um die Webanwendung zu starten:

    cd ~/helloworld
npm start

  3. Führen Sie in der sekundären Befehlsshellsitzung den folgenden Befehl aus, um zu Ihrer Webanwendung zu navigieren:

    curl http://127.0.0.1:1337/

    Die Ausgabe sollte wie folgt aussehen:

    <html><body><h1>Hello World!</h1></body></html>

  4. Drücken Sie in der primären Befehlsshellsitzung Strg+C, um Ihre Web-App zu beenden, und schließen Sie dann die Browserregisterkarte für die zweite Shellsitzung.

Zum Erstellen einer Starter-Webanwendung wird hier das Webanwendungsframework Flask verwendet.

  1. Führen Sie die folgenden Befehle in Azure Cloud Shell aus, um eine virtuelle Umgebung einzurichten und Flask in Ihrem Profil zu installieren:

    python3 -m venv venv
source venv/bin/activate
pip install flask

  2. Führen Sie die folgenden Befehle aus, um Ihr neues Web-App-Verzeichnis zu erstellen und zu ihm wechseln:

    mkdir ~/BestBikeApp
cd ~/BestBikeApp

  3. Erstellen Sie eine neue Datei für Ihre Web-App, indem Sie application.py im interaktiven Python-Editor öffnen:

    code application.py

  4. Kopieren Sie den folgenden Python-Code, und fügen Sie ihn ein, um die Hauptfunktionalität der Web-App zu erstellen:

    from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "<html><body><h1>Hello Best Bike App!</h1></body></html>\n"

  5. Speichern Sie Ihre Datei, und beenden Sie den Editor, indem Sie oben rechts das Menü ... und dann Speichern>Editor schließen auswählen oder indem Sie STRG+S und STRG+Q unter Windows und Linux drücken.

  6. Um Ihre Anwendung in Azure bereitzustellen, müssen Sie die Liste der Anwendungsanforderungen, die Sie dafür erstellt haben, in einer Datei namens requirements.txt speichern. Führen Sie hierzu den folgenden Befehl aus:

    pip freeze > requirements.txt

Optionales Testen der Web-App

Sie können Ihre Anwendung lokal in Azure testen, während sie ausgeführt wird.

  1. Öffnen Sie eine zweite Befehlsshellsitzung in einer neuen Browserregisterkarte https://shell.azure.com/.

  2. Führen Sie in der primären Befehlsshellsitzung (rechts) die folgenden Befehle aus, um die virtuelle Umgebung zu aktivieren:

    cd ..
source venv/bin/activate

  3. Führen Sie in der primären Befehlsshellsitzung (rechts) die folgenden Befehle aus, um die Webanwendung zu starten:

    cd ~/BestBikeApp
export FLASK_APP=application.py
flask run

  4. Führen Sie in der sekundären Befehlsshellsitzung den folgenden Befehl aus, um zu Ihrer Webanwendung zu navigieren:

    curl http://127.0.0.1:5000/

    Die folgende HTML-Ausgabe sollte angezeigt werden:

    <html><body><h1>Hello Best Bike App!</h1></body></html>

  5. Drücken Sie in der primären Befehlsshellsitzung Strg+C, um Ihre Web-App zu beenden, und schließen Sie dann die sekundäre Azure Cloud Shell.