Ü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. Um Ihre App lokal zu testen, benötigen Sie das .NET SDK, das auf Ihrem System installiert ist.

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.

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

  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

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.

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

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

Um Ihre App lokal zu testen, müssen Sie Node.js und npm auf Ihrem System installiert haben.

Zum Erstellen einer Starterwebanwendung 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 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

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

Um Ihre App lokal zu testen, benötigen Sie Python 3 und Flask auf Ihrem System installiert.