Creación de una aplicación web de Node.js en AzureCreate a Node.js web app in Azure

Nota

En este artículo se implementa una aplicación en App Service en Windows.This article deploys an app to App Service on Windows. Para realizar implementaciones en App Service en Linux, consulte Creación de una aplicación web de Node.js en Azure App Service en Linux.To deploy to App Service on Linux, see Create a Node.js web app in Azure App Service on Linux.

Azure App Service proporciona un servicio de hospedaje web muy escalable y con aplicación de revisiones de un modo automático.Azure App Service provides a highly scalable, self-patching web hosting service. En este tutorial rápido se explica cómo se implementa una aplicación de Node.js en Azure App Service.This quickstart shows how to deploy a Node.js app to Azure App Service. Se crea la aplicación web con la CLI de Azure y se usa ZipDeploy para implementar el código Node.js de ejemplo en la aplicación web.You create the web app using the Azure CLI, and you use ZipDeploy to deploy the sample Node.js code to the web app.

Aplicación de ejemplo que se ejecuta en Azure

Estos pasos se pueden realizar en este caso con una máquina Mac, Windows o Linux.You can follow the steps here using a Mac, Windows, or Linux machine. Una vez instalados los requisitos previos, tardará aproximadamente cinco minutos en completar los pasos.Once the prerequisites are installed, it takes about five minutes to complete the steps.

Si no tiene una suscripción a Azure, cree una cuenta gratuita antes de empezar.If you don't have an Azure subscription, create a free account before you begin.

Requisitos previosPrerequisites

Para completar esta guía de inicio rápido:To complete this quickstart:

Descarga del ejemploDownload the sample

Descargue el proyecto de ejemplo Node.js de https://github.com/Azure-Samples/nodejs-docs-hello-world/archive/master.zip y extraiga el archivo ZIP.Download the sample Node.js project from https://github.com/Azure-Samples/nodejs-docs-hello-world/archive/master.zip and extract the ZIP archive.

Abra index.js y busque la línea siguiente:Open index.js and find the following line:

const port = process.env.PORT || 1337;

App Service inserta process.env.PORT en su aplicación, por lo que el código usa la variable para saber qué puerto debe escuchar.App Service injects process.env.PORT into your application, so the code uses the variable to know which port to listen.

En una ventana de terminal, vaya al directorio raíz del proyecto de ejemplo de Node.js (el que contiene index.js).In a terminal window, navigate to the root directory of the sample Node.js project (the directory that contains index.js).

Ejecución de la aplicación de forma localRun the app locally

Ejecute la aplicación localmente para ver cómo debería ser si se implementara en Azure.Run the application locally so that you see how it should look when you deploy it to Azure. Abra una ventana de terminal y use el script npm start para iniciar el servidor HTTP de Node.js integrado.Open a terminal window and use the npm start script to launch the built in Node.js HTTP server.

npm start

Abra un explorador web y vaya a la aplicación de ejemplo en http://localhost:1337.Open a web browser, and navigate to the sample app at http://localhost:1337.

Verá el mensaje Hola mundo de la aplicación de ejemplo que aparece en la página.You see the Hello World message from the sample app displayed in the page.

Aplicación de ejemplo que se ejecuta localmente

En la ventana de terminal, presione Ctrl + C para salir del servidor web.In your terminal window, press Ctrl+C to exit the web server.

Nota

En Azure App Service, la aplicación se ejecuta en IIS mediante iisnode.In Azure App Service, the app is run in IIS using iisnode. Para habilitar que la aplicación se ejecute con iisnode, el directorio de la aplicación raíz contiene el archivo web.config.To enable the app to run with iisnode, the root app directory contains a web.config file. IIS puede leer dicho archivo y la configuración de iisnode se documenta en el repositorio de GitHub de iisnode.The file is readable by IIS, and the iisnode-related settings are documented in the iisnode GitHub repository.

Creación de un archivo ZIP de proyectoCreate a project ZIP file

Asegúrese de que está todavía en el directorio raíz del proyecto de ejemplo (el que contiene index.js).Make sure you're still in the root directory of the sample project (the directory that contains index.js). Cree un archivo ZIP con todo el contenido del proyecto.Create a ZIP archive of everything in your project. El siguiente comando usa la herramienta predeterminada de su terminal:The following command uses the default tool in your terminal:

# Bash
zip -r myAppFiles.zip .

# PowerShell
Compress-Archive -Path * -DestinationPath myAppFiles.zip

Posteriormente, cargue el archivo ZIP en Azure e impleméntelo en App Service.Later, you upload this ZIP file to Azure and deploy it to App Service.

Uso de Azure Cloud ShellUse Azure Cloud Shell

En Azure se hospeda Azure Cloud Shell, un entorno de shell interactivo que puede utilizar mediante el explorador.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell le permite usar bash o PowerShell para trabajar con servicios de Azure.Cloud Shell lets you use either bash or PowerShell to work with Azure services. Puede usar los comandos preinstalados de Cloud Shell para ejecutar el código de este artículo sin tener que instalar nada en su entorno local.You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Para iniciar Azure Cloud Shell:To launch Azure Cloud Shell:

OpciónOption Ejemplo o vínculoExample/Link
Seleccione Probarlo en la esquina superior derecha de un bloque de código.Select Try It in the upper-right corner of a code block. Solo con seleccionar Probar no se copia automáticamente el código en Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Ejemplo de Probarlo para Azure Cloud Shell
Vaya a https://shell.azure.com o seleccione el botón Iniciar Cloud Shell para abrir Cloud Shell en el explorador.Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. <a href="https://shell.azure.com" title="Iniciar Azure Cloud Shell
Seleccione el botón Cloud Shell en la barra de menús de la esquina superior derecha de Azure Portal.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Botón Cloud Shell en Azure Portal

Para ejecutar el código de este artículo en Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Inicie Cloud Shell.Launch Cloud Shell.
  2. Seleccione el botón Copiar de un bloque de código para copiar el código.Select the Copy button on a code block to copy the code.
  3. Pegue el código en la sesión de Cloud Shell con Ctrl+Mayús+V en Windows y Linux, o Cmd+Mayús+V en macOS.Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.
  4. Presione ENTRAR para ejecutar el código.Press Enter to run the code.

Crear un grupo de recursosCreate a resource group

Un grupo de recursos es un contenedor lógico en el que se implementan y administran recursos de Azure como aplicaciones web, bases de datos y cuentas de almacenamiento.A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed. Por ejemplo, más adelante puede elegir eliminar todo el grupo de recursos en un solo paso.For example, you can choose to delete the entire resource group in one simple step later.

En Cloud Shell, cree un grupo de recursos con el comando az group create.In the Cloud Shell, create a resource group with the az group create command. En el ejemplo siguiente, se crea un grupo de recursos denominado myResourceGroup en la ubicación Centro y Sur de EE. UU.The following example creates a resource group named myResourceGroup in the South Central US location. Para ver todas las ubicaciones que se admiten en App Service en el nivel Gratis, ejecute el comando az appservice list-locations --sku FREE.To see all supported locations for App Service in Free tier, run the az appservice list-locations --sku FREE command.

az group create --name myResourceGroup --location "South Central US"

Generalmente se crean el grupo de recursos y los recursos en una región cercana.You generally create your resource group and the resources in a region near you.

Cuando finaliza el comando, una salida de JSON muestra las propiedades del grupo de recursos.When the command finishes, a JSON output shows you the resource group properties.

Crear un plan de Azure App ServiceCreate an Azure App Service plan

En Cloud Shell, cree un plan de App Service con el comando az appservice plan create.In the Cloud Shell, create an App Service plan with the az appservice plan create command.

En el siguiente ejemplo se crea un plan de App Service denominado myAppServicePlan con el plan de tarifa Gratis:The following example creates an App Service plan named myAppServicePlan in the Free pricing tier:

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE

Cuando se ha creado el plan de App Service, la CLI de Azure muestra información similar al ejemplo siguiente:When the App Service plan has been created, the Azure CLI shows information similar to the following example:

{ 
  "adminSiteName": null,
  "appServicePlanName": "myAppServicePlan",
  "geoRegion": "South Central US",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "app",
  "location": "South Central US",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  < JSON data removed for brevity. >
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
} 

Creación de una aplicación webCreate a web app

En Cloud Shell, cree una aplicación web en el plan de App Service myAppServicePlan con el comando az webapp create.In the Cloud Shell, create a web app in the myAppServicePlan App Service plan with the az webapp create command.

En el siguiente ejemplo, reemplace <app_name> por un nombre único global de aplicación (los caracteres válidos son a-z, 0-9 y -).In the following example, replace <app_name> with a globally unique app name (valid characters are a-z, 0-9, and -).

# Bash and Powershell
az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app_name>

Cuando se haya creado la aplicación web, la CLI de Azure mostrará información similar a la del ejemplo siguiente:When the web app has been created, the Azure CLI shows output similar to the following example:

{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app_name>.azurewebsites.net",
  "enabled": true,
  < JSON data removed for brevity. >
}

Tiempo de ejecución de Node.jsSet Node.js runtime

Establezca el entorno de ejecución de Node en 10.14.1.Set the Node runtime to 10.14.1. Para ver todos los entornos en tiempo de ejecución admitidos, ejecute az webapp list-runtimes.To see all supported runtimes, run az webapp list-runtimes.

# Bash and Powershell
az webapp config appsettings set --resource-group myResourceGroup --name <app_name> --settings WEBSITE_NODE_DEFAULT_VERSION=10.14.1

Vaya a la aplicación web recién creada.Browse to your newly created web app. Reemplace <app_name> por un nombre de aplicación único.Replace <app_name> with a unique app name.

http://<app_name>.azurewebsites.net

Este es el aspecto que debería tener su nueva aplicación web:Here is what your new web app should look like:

Página de la aplicación web vacía

Implementación de un archivo ZIPDeploy ZIP file

En el explorador, vaya a https://<app_name>.scm.azurewebsites.net/ZipDeployUI.In the browser, navigate to https://<app_name>.scm.azurewebsites.net/ZipDeployUI.

Cargue el archivo ZIP que creó en Creación de un archivo ZIP de proyecto arrastrándolo al área del explorador de archivos en la página web.Upload the ZIP file you created in Create a project ZIP file by dragging it to the file explorer area on the web page.

Cuando la implementación está en curso, un icono en la esquina superior derecha muestra el progreso como un porcentaje.When deployment is in progress, an icon in the top right corner shows you the progress in percentage. La página también muestra mensajes detallados para la operación debajo del área del explorador.The page also shows verbose messages for the operation below the explorer area. Cuando se haya completado, el último mensaje de implementación debe indicar Deployment successful.When it is finished, the last deployment message should say Deployment successful.

Navegación hasta la aplicaciónBrowse to the app

Vaya a la aplicación implementada mediante el explorador web.Browse to the deployed application using your web browser.

http://<app_name>.azurewebsites.net

El código de ejemplo de Node.js se está ejecutando en una aplicación web de Azure App Service.The Node.js sample code is running in an Azure App Service web app.

Aplicación de ejemplo que se ejecuta en Azure

¡Enhorabuena!Congratulations! Ha implementado la primera aplicación de Node.js en App Service.You've deployed your first Node.js app to App Service.

Actualización del código y nueva implementaciónUpdate and redeploy the code

Con un editor de texto, abra el archivo index.js en la aplicación de Node.js y realice un pequeño cambio en el texto en la llamada a response.end:Using a text editor, open the index.js file in the Node.js app, and make a small change to the text in the call to response.end:

response.end("Hello Azure!");

En la ventana de terminal local, desplácese al directorio raíz (el que contiene index.js) de la aplicación y cree un nuevo archivo ZIP para el proyecto actualizado.In the local terminal window, navigate to your application's root directory (the directory that contains index.js), create a new ZIP file for your updated project.

# Bash
zip -r myUpdatedAppFiles.zip .

# PowerShell
Compress-Archive -Path * -DestinationPath myUpdatedAppFiles.zip

Implemente este nuevo archivo ZIP en App Service mediante los mismos pasos de Implementación de un archivo ZIP.Deploy this new ZIP file to App Service, using the same steps in Deploy ZIP file.

Vuelva a la ventana del explorador que se abrió en el paso Navegación hasta la aplicación y actualice la página.Switch back to the browser window that opened in the Browse to the app step, and refresh the page.

Aplicación de ejemplo actualizada que se ejecuta en Azure

Administración de la nueva aplicación de AzureManage your new Azure app

Vaya a Azure Portal para administrar la aplicación web que ha creado.Go to the Azure portal to manage the web app you created.

En el menú izquierdo, haga clic en App Services y, luego, en el nombre de la aplicación de Azure.From the left menu, click App Services, and then click the name of your Azure app.

Navegación en el portal a la aplicación de Azure

Podrá ver la página de información general de la aplicación web.You see your web app's Overview page. En este caso, puede realizar tareas de administración básicas como examinar, detener, iniciar, reiniciar y eliminar.Here, you can perform basic management tasks like browse, stop, start, restart, and delete.

Página de App Service en Azure Portal

El menú izquierdo proporciona distintas páginas para configurar la aplicación.The left menu provides different pages for configuring your app.

Limpieza de recursosClean up resources

En los pasos anteriores, creó recursos de Azure en un grupo de recursos.In the preceding steps, you created Azure resources in a resource group. Si prevé que no necesitará estos recursos en el futuro, elimine el grupo de recursos ejecutando el siguiente comando en Cloud Shell:If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell:

az group delete --name myResourceGroup

Este comando puede tardar varios segundos en ejecutarse.This command may take a minute to run.

Pasos siguientesNext steps