Ejercicio: Analizar las limitaciones de una aplicación web basada en sondeo

  • 15 minutos

Antes de comenzar, asegúrese de tener el siguiente software instalado en el equipo:

Descargar el código de la aplicación de ejemplo

  1. Ejecute el comando siguiente en Azure Cloud Shell desde el portal para clonar la aplicación desde GitHub.

    git clone https://github.com/MicrosoftDocs/mslearn-advocates.azure-functions-and-signalr.git serverless-demo

    Importante

    No ejecute npm install hasta que haya realizado los pasos que actualizan local.settings.json. Se incluye un script posterior a la instalación para configurar la base de datos y agregar algunos datos a la base de datos.

  2. Ejecute el comando siguiente para ir a la nueva carpeta en la que se ha clonado el repositorio:

    cd serverless-demo

  3. El estado inicial de la aplicación se encuentra en la carpeta start. Asegúrese de encontrarse en esa carpeta para el resto de este módulo. Ejecute el comando siguiente para abrir la carpeta start en Visual Studio Code:

    code start

    Como referencia, la solución terminada está disponible en la carpeta denominada end.

Crear una cuenta de Storage

Azure Functions necesita una cuenta de Storage y usted también va a necesitarla cuando implemente la aplicación web en la nube más adelante en el módulo.

  1. Ejecute el comando siguiente en Cloud Shell a fin de definir un nombre para la cuenta de Azure Storage.

    export STORAGE_ACCOUNT_NAME=mslsigrstorage$(openssl rand -hex 5)
echo "Storage Account Name: $STORAGE_ACCOUNT_NAME"

    Anote este nombre de cuenta para el resto del módulo.

  2. Ejecute el comando az storage account create siguiente a fin de crear una cuenta de almacenamiento para la función y el sitio web estático.

    az storage account create \
  --name $STORAGE_ACCOUNT_NAME \
  --resource-group <rgn>[sandbox resource group name]</rgn> \
  --kind StorageV2 \
  --sku Standard_LRS

    Puede tardar unos minutos en crearse. Espere a que finalice este paso antes de continuar.

Crear una cuenta de Azure Cosmos DB

Los precios de las acciones se almacenan en una base de datos de Azure Cosmos DB. Por lo tanto, establézcala en la cuenta de espacio aislado.

  1. Ejecute el comando az cosmosdb create siguiente en Cloud Shell para crear una cuenta de Azure Cosmos DB en el grupo de recursos de espacio aislado.

    az cosmosdb create  \
  --name msl-sigr-cosmos-$(openssl rand -hex 5) \
  --resource-group <rgn>[sandbox resource group name]</rgn>

    La cuenta de Azure Cosmos DB puede tardar unos minutos en crearse. Espere a que finalice este paso antes de continuar.

Actualizar la configuración local

Para que la aplicación se ejecute, tiene que agregar la configuración de conexión de los servicios en la nube al archivo de configuración local.

  1. Ejecute los comandos siguientes en Cloud Shell para obtener las cadenas de conexión de los recursos creados en este ejercicio.

    STORAGE_CONNECTION_STRING=$(az storage account show-connection-string \
--name $(az storage account list \
  --resource-group <rgn>[sandbox resource group name]</rgn> \
  --query [0].name -o tsv) \
--resource-group <rgn>[sandbox resource group name]</rgn> \
--query "connectionString" -o tsv)

COSMOSDB_ACCOUNT_NAME=$(az cosmosdb list \
    --resource-group <rgn>[sandbox resource group name]</rgn> \
    --query [0].name -o tsv)

COSMOSDB_CONNECTION_STRING=$(az cosmosdb list-connection-strings  \
  --name $COSMOSDB_ACCOUNT_NAME \
  --resource-group <rgn>[sandbox resource group name]</rgn> \
  --query "connectionStrings[?description=='Primary SQL Connection String'].connectionString" -o tsv)

COSMOSDB_MASTER_KEY=$(az cosmosdb list-keys \
--name $COSMOSDB_ACCOUNT_NAME \
--resource-group <rgn>[sandbox resource group name]</rgn> \
--query primaryMasterKey -o tsv)

printf "\n\nReplace <STORAGE_CONNECTION_STRING> with:\n$STORAGE_CONNECTION_STRING\n\nReplace <COSMOSDB_CONNECTION_STRING> with:\n$COSMOSDB_CONNECTION_STRING\n\nReplace <COSMOSDB_MASTER_KEY> with:\n$COSMOSDB_MASTER_KEY\n\n"

  2. Vaya a la ubicación en donde ha clonado la aplicación y abra la carpeta start en Visual Studio Code. Abra local.settings.json en el editor para poder actualizar el archivo.

  3. En local.settings.json, actualice las variables AzureWebJobsStorage, AzureCosmosDBConnectionString y AzureCosmosDBMasterKey con los valores que aparecen en Cloud Shell y guarde el archivo. El archivo local.settings.json solo debe existir en el equipo local.

Ejecutar la aplicación

  1. En la ventana de terminal de Visual Studio Code, ejecute el siguiente comando para instalar dependencias y configurar la base de datos:

    npm install

    Nota:

    Si surge algún problema durante el proceso de instalación y la base de datos no se configura correctamente, puede ejecutar npm run setup para inicializarla manualmente.

  2. Presione F5 para comenzar a depurar la aplicación de función. El inicio de la aplicación de función se muestra en una ventana de terminal.

  3. Para ejecutar la aplicación web en el equipo, abra una segunda instancia integrada de terminal y ejecute el siguiente comando para iniciar la aplicación web.

    npm start

  4. El script abre automáticamente el explorador y va a http://localhost:8080.. Si el explorador no se abre automáticamente, puede ir a http://localhost:8080 de forma manual.

    Beginning state of serverless web app.

  5. Vuelva a Visual Studio Code, abra una tercera instancia de terminal y escriba el siguiente comando para actualizar los precios de las acciones. Vuelva de inmediato al explorador y observe que los precios de las acciones de ABC cambian en cuestión de segundos.

    npm run update-data

Cuando haya terminado, detenga los procesos en ejecución.

  • Para detener el servidor web, seleccione Eliminar proceso (icono de papelera) en la ventana de terminal que ejecuta el servidor web.

  • Para detener la aplicación de funciones, seleccione Detener o presione Mayús+F5.