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

Führen Sie den folgenden Befehl aus, um eine neue ASP.NET Core-MVC-Anwendung (Model-View Controller) namens „BestBikeApp“ zu erstellen:

dotnet new mvc --name BestBikeApp

Der Befehl erstellt einen neuen Ordner namens „BestBikeApp“ zur Aufnahme Ihres Projekts.

Optionales Testen der Web-App

Sie können Ihre Anwendung lokal in Azure testen. Führen Sie dazu die folgenden Schritte aus:

Führen Sie die folgenden Befehle aus, um Ihre Webanwendung im Hintergrund zu erstellen und auszuführen:

cd BestBikeApp
dotnet run &

Sie sollten eine Ausgabe wie im folgenden Beispiel erhalten:

[1] <process-number>
<username> [ ~/BestBikeApp ]$ Building...
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:<port>
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

Achten Sie in der Ausgabe auf die Werte für <process-number> und <port>.

Führen Sie den folgenden Befehl aus, um zu Ihrer Webanwendung zu navigieren, und ersetzen Sie <port> durch den Port, den Sie sich im vorherigen Schritt notiert haben.

curl -kL http://localhost:<port>/

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 b-b5g3qljvtd class="border-top footer text-muted">
        <div b-b5g3qljvtd class="container">
            &copy; 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>

Verwenden Sie den Wert für <process-number>, den Sie sich zuvor notiert haben, um dotnet zu beenden:
```
kill <process-number>
```

Sie verwenden zum Erstellen einer Starterwebanwendung 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.

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

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
```
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
```

Sie haben jetzt eine Datei namens helloworld.war. Dabei handelt es sich um das Webanwendungspaket, das wir in App Service bereitstellen.

Zum Erstellen einer Node.js-Web-Starterwebanwendung verwenden Sie den Node-Paket-Manager (npm) und JavaScript-Code zum Ausführen der eigentlichen Webseitenverarbeitung.

Führen Sie die folgenden Befehle im Terminal aus, um eine neue Datei package.json mit der Beschreibung der Node.js-Anwendung zu erstellen:

cd ~
mkdir helloworld
cd helloworld
cat >package.json <<EOL
{
  "name": "helloworld",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js"
  }
}
EOL

Eine neue Datei vom Typ package.json wird 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. Für dieses einfache Beispiel benötigen wir nur eine Datei: index.js.

Erstellen Sie die Datei, indem Sie im Terminal den folgenden Befehl ausführen:

cat >index.js <<EOL
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}\`);
EOL

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.

Navigieren Sie in einer neuen Browserregisterkarte zu https://shell.azure.com/.
Führen Sie die folgenden Befehle in Ihrer primären Befehlsshellsitzung aus, um Ihre Webanwendung im Hintergrund zu starten:
```
cd ~/helloworld
npm start &
```
Sie sollten eine Ausgabe wie im folgenden Beispiel erhalten:
```
[1] <process-number>
> helloworld@1.0.0 start
> node index.js

Server running at http://localhost:1337
```
Achten Sie in der Ausgabe auf den Wert für <process-number>.
Führen Sie in derselben Cloud Shell-Sitzung den folgenden Befehl aus, um zu Ihrer Webanwendung zu navigieren.
```
curl -kL http://localhost:1337/
```
Die Ausgabe sollte wie folgt aussehen:
```
<html><body><h1>Hello World!</h1></body></html>
```
Verwenden Sie den Wert für <process-number>, den Sie sich zuvor notiert haben, um node zu beenden:
```
kill <process-number>
```

Zum Erstellen einer Starterwebanwendung wird hier das Webanwendungsframework Flask verwendet.

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
```
Führen Sie die folgenden Befehle aus, um Ihr neues Web-App-Verzeichnis zu erstellen und zu ihm wechseln:
```
mkdir ~/BestBikeApp
cd ~/BestBikeApp
```

Erstellen Sie eine neue Datei namens application.py mit einer einfachen HTML-Antwort:

cat >application.py <<EOL
from flask import Flask
app = Flask(__name__)

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

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.

Führen Sie die folgenden Befehle aus, um Ihre Webanwendung im Hintergrund zu starten:
```
cd ~/BestBikeApp
export FLASK_APP=application.py
flask run &
```
Sie sollten eine Ausgabe wie im folgenden Beispiel erhalten:
```
[1] <process-number>
 * Serving Flask app 'application.py'
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
```
Achten Sie in der Ausgabe auf den Wert für <process-number>. Da der Prozess im Hintergrund ausgeführt wird, können Sie ihn nicht mit STRG+C beenden. Sie müssen ihn mit seiner Prozessnummer beenden.
Führen Sie den folgenden Befehl aus, um zu Ihrer Webanwendung zu navigieren.
```
curl -kL http://localhost:5000/
```
Die folgende HTML-Ausgabe sollte angezeigt werden:
```
<html><body><h1>Hello Best Bike App!</h1></body></html>
```
Verwenden Sie den Wert für <process-number>, den Sie sich zuvor notiert haben, um Flask zu beenden:
```
kill <process-number>
```

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

Erstellen eines neuen Webprojekts

Optionales Testen der Web-App

Optionales Testen der Web-App

Optionales Testen der Web-App

Feedback