Oefening: code schrijven om een webtoepassing te implementeren

5 minuten

In deze les gebruikt u ontwikkelhulpprogramma's om de code voor een starter-webtoepassing te maken.

Een nieuw webproject maken

De kern van de .NET CLI-hulpprogramma's is het opdrachtregelprogramma dotnet. Met deze opdracht maakt u een nieuw ASP.NET Core-webproject.

Voer de volgende opdracht uit om een nieuwe ASP.NET Core Model-View Cotroller -toepassing (MVC) met de naam 'BestBikeApp' te maken:

dotnet new mvc --name BestBikeApp

Met de opdracht maakt u een nieuwe map met de naam 'BestBikeApp' om uw project op te slaan.

Uw web-app testen (optioneel)

U kunt uw toepassing lokaal testen in Azure. Volg hiervoor de volgende stappen:

Voer de volgende opdrachten uit om uw webtoepassing op de achtergrond te bouwen en uit te voeren:

cd BestBikeApp
dotnet run &

U krijgt uitvoer zoals in het volgende voorbeeld:

[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

Noteer in de uitvoer de waarden van procesnummer> en <poort>.<

Voer de volgende opdracht uit om naar uw webtoepassing te bladeren, waarbij <u de poort> vervangt door de poort die u in de laatste stap hebt genoteerd.

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

Er wordt een HTML-bestand weergegeven dat eindigt op de volgende regels:

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

Stop dotnet met behulp van <procesnummer> dat u eerder hebt genoteerd:
```
kill <process-number>
```

Om een starter-webtoepassing te maken, gebruiken we Maven, een veelgebruikt hulpprogramma voor projectbeheer en build voor Java-apps. We gebruiken de maven-archetype-webapp sjabloon om de code voor onze webtoepassing te genereren.

Voer nu de volgende opdrachten uit in Azure Cloud Shell om een nieuwe web-app te maken:

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

Voer vervolgens deze opdrachten uit om de nieuwe toepassingsmap helloworld te maken en de toepassing voor implementatie in te pakken:
```
cd helloworld
mvn package
```
Wanneer de opdracht is uitgevoerd, voert u deze opdrachten uit om de doelmap te openen en de inhoud ervan weer te geven:
```
cd target
ls
```

U hebt nu een bestand met de naam helloworld.war dat het webtoepassingspakket is dat we gaan implementeren in App Service.

Als u een starters-Node.js-webtoepassing wilt maken, gebruiken we Node Pakketbeheer (npm) samen met javaScript-code om de werkelijke verwerking van webpagina's uit te voeren.

Voer de volgende opdrachten uit in de terminal om een nieuw package.json bestand te maken dat de Node.js-toepassing beschrijft:

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

Er wordt een nieuw package.json bestand gemaakt in de huidige map. U vindt deze in de huidige map als u in het terminalvenster invoert ls . We hebben een JavaScript-bestand nodig om onze websitelogica uit te voeren. Voor dit basisvoorbeeld hebben we slechts één bestand nodig: index.js.

Maak het bestand door de volgende opdracht uit te voeren in de terminal:

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

Uw web-app testen (optioneel)

Terwijl u de helloworld-web-app uitvoert, kunt u controleren of deze lokaal wordt uitgevoerd door een tweede opdrachtshellsessie te openen.

Blader naar een nieuw browsertabblad.https://shell.azure.com/
Voer vanuit de primaire opdrachtshellsessie de volgende opdrachten uit om uw webtoepassing op de achtergrond te starten:
```
cd ~/helloworld
npm start &
```
U krijgt uitvoer zoals in het volgende voorbeeld:
```
[1] <process-number>
> helloworld@1.0.0 start
> node index.js

Server running at http://localhost:1337
```
Noteer in de uitvoer de waarde van <het procesnummer>.
Voer in dezelfde Cloud Shell-sessie de volgende opdracht uit om naar uw webtoepassing te bladeren.
```
curl -kL http://localhost:1337/
```
De volgende uitvoer moet worden weergegeven:
```
<html><body><h1>Hello World!</h1></body></html>
```
Stop het knooppunt met behulp van <procesnummer> dat u eerder hebt genoteerd:
```
kill <process-number>
```

Voor het maken van een starter-webtoepassing gebruiken we het Flask-webtoepassingsframework.

Voer de volgende opdrachten uit in Azure Cloud Shell om een virtuele omgeving in te stellen en Flask in uw profiel te installeren:
```
python3 -m venv venv
source venv/bin/activate
pip install flask
```
Voer deze opdrachten uit om de nieuwe web-app-map te maken en over te schakelen:
```
mkdir ~/BestBikeApp
cd ~/BestBikeApp
```

Maak een nieuw bestand met de naam application.py met een standaard HTML-antwoord:

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

Als u uw toepassing wilt implementeren in Azure, moet u de lijst met toepassingsvereisten opslaan die u hiervoor hebt gemaakt in een requirements.txt-bestand . Voer hiertoe de volgende opdrachten uit:
```
pip freeze > requirements.txt
```

Uw web-app testen (optioneel)

U kunt uw toepassing lokaal testen in Azure terwijl deze wordt uitgevoerd.

Voer de volgende opdrachten uit om uw webtoepassing op de achtergrond te starten:

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

U krijgt uitvoer zoals in het volgende voorbeeld:

[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

Noteer in de uitvoer de waarde van <het procesnummer>. Omdat het proces op de achtergrond wordt uitgevoerd, kunt u niet afsluiten met Ctrl+C. U moet het stoppen met het procesnummer.

Voer de volgende opdracht uit om naar uw webtoepassing te bladeren.
```
curl -kL http://localhost:5000/
```
U moet de volgende HTML-uitvoer krijgen:
```
<html><body><h1>Hello Best Bike App!</h1></body></html>
```
Stop Flask met behulp van <procesnummer> dat u eerder hebt genoteerd:
```
kill <process-number>
```

Oefening: code schrijven om een webtoepassing te implementeren

Een nieuw webproject maken

Uw web-app testen (optioneel)

Uw web-app testen (optioneel)

Uw web-app testen (optioneel)

Feedback