Ejercicio: Escritura de código para implementar una aplicación web

  • 5 minutos

En esta unidad usará herramientas de desarrollo para crear el código de una aplicación web de inicio.

Creación de un proyecto web

El núcleo de las herramientas de la CLI de .NET es la herramienta de línea de comandos dotnet. Con este comando, creará un nuevo proyecto web ASP.NET Core.

Ejecute el siguiente comando para crear una nueva aplicación ASP.NET Core Model-View Cotroller (MVC) denominada "BestBikeApp":

dotnet new mvc --name BestBikeApp

El comando crea una nueva carpeta denominada "BestBikeApp" para contener el proyecto.

Prueba opcional de la aplicación web

Puede probar la aplicación localmente en Azure. Para ello, siga estos pasos:

  1. Ejecute los comandos siguientes para compilar y ejecutar la aplicación web en segundo plano:

    cd BestBikeApp
dotnet run &

    Debería obtener una salida como en el siguiente ejemplo:

    [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

    En la salida, tome nota de los valores de <process-number> y <port>.

  2. Ejecute el siguiente comando para ir a la aplicación web, reemplazando <port> por el puerto que anotó en el último paso.

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

    Debería ver que aparece código HTML, que termina en las líneas siguientes:

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

  3. Mediante el valor de <process-number> que anotó anteriormente, detenga dotnet:

    kill <process-number>

Para crear una aplicación web de inicio, usamos Maven, una herramienta de compilación y administración de proyectos que se usa habitualmente para aplicaciones Java. Usamos la plantilla maven-archetype-webapp para generar el código de nuestra aplicación web.

  1. Ejecute los comandos siguientes en Azure Cloud Shell ahora para crear una aplicación web:

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

  2. Ahora, ejecute estos comandos para cambiar al nuevo directorio de aplicación "helloworld" y empaquetar la aplicación para la implementación:

    cd helloworld
mvn package

  3. Cuando el comando termine de ejecutarse, ejecute estos comandos para abrir el directorio target y mostrar su contenido:

    cd target
ls

Ahora tiene un archivo denominado helloworld.war que es el paquete de aplicación web que vamos a implementar en App Service.

Para crear una aplicación web de inicio Node.js, usamos el Administrador de paquetes de Node (npm) junto con código JavaScript para ejecutar el procesamiento real de páginas web.

  1. Ejecute los siguientes comandos en el terminal para crear un nuevo archivo package.json que describa nuestra aplicación Node.js:

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

Se crea un nuevo archivo package.json en la carpeta actual. Debería encontrarlo en la carpeta actual si escribe ls en la ventana del terminal. Necesitamos un archivo JavaScript para ejecutar la lógica del sitio web. En este ejemplo básico, solo necesitamos un archivo: index.js.

  1. Cree el archivo ejecutando el comando siguiente en el 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

Prueba opcional de la aplicación web

Mientras ejecuta la aplicación web helloworld, puede comprobar que se ejecuta localmente si abre una segunda sesión de shell de comandos.

  1. En una nueva pestaña del explorador, vaya a https://shell.azure.com/.

  2. En la sesión de shell de comandos principal, ejecute los comandos siguientes para iniciar la aplicación web en segundo plano:

    cd ~/helloworld
npm start &

    Debería obtener una salida como en el siguiente ejemplo:

    [1] <process-number>
> helloworld@1.0.0 start
> node index.js

Server running at http://localhost:1337

    En la salida, tome nota del valor de <process-number>.

  3. En la misma sesión de Cloud Shell, ejecute el siguiente comando para ir a la aplicación web.

    curl -kL http://localhost:1337/

    Debería obtener la siguiente salida:

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

  4. Mediante el valor de <process-number> que anotó anteriormente, detenga node:

    kill <process-number>

Para crear una aplicación web de inicio, usamos el marco aplicación web de Flask.

  1. Ejecute los comandos siguientes en Azure Cloud Shell para configurar un entorno virtual e instalar Flask en el perfil:

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

  2. Ejecute estos comandos para crear y cambiar al nuevo directorio de la aplicación web:

    mkdir ~/BestBikeApp
cd ~/BestBikeApp

  3. Cree un archivo denominado application.py con una respuesta HTML básica:

    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. Para implementar la aplicación en Azure, debe guardar la lista de requisitos de la aplicación que ha realizado en un archivo requirements.txt. Para ello, ejecute el comando siguiente:

    pip freeze > requirements.txt

Prueba opcional de la aplicación web

Puede probar la aplicación localmente en Azure mientras se ejecuta.

  1. Ejecute los comandos siguientes para iniciar la aplicación web en segundo plano:

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

    Debería obtener una salida como en el siguiente ejemplo:

    [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

    En la salida, tome nota del valor de <process-number>. Dado que el proceso se ejecuta en segundo plano, no se puede salir con CTRL+C. Deberá detenerlo con su número de proceso.

  2. Ejecute el siguiente comando para ir a la aplicación web.

    curl -kL http://localhost:5000/

    Debería obtener la siguiente salida HTML:

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

  3. Mediante el valor de <process-number> que anotó anteriormente, detenga Flask:

    kill <process-number>