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

Para empezar a trabajar con Azure App Service, cree una aplicación de Node.js o Express localmente con Visual Studio Code y, a continuación, implemente la aplicación en la nube.Get started with Azure App Service by creating a Node.js/Express app locally using Visual Studio Code and then deploying the app to the cloud. Dado que usa un nivel de App Service gratuito, completar este inicio rápido no supone ningún costo.Because you use a free App Service tier, you incur no costs to complete this quickstart.

Requisitos previosPrerequisites

Clonación y ejecución de una aplicación de Node.js localClone and run a local Node.js application

  1. En el equipo local, abra un terminal y clone el repositorio de ejemplo:On your local computer, open a terminal and clone the sample repository:

    git clone https://github.com/Azure-Samples/nodejs-docs-hello-world
    
  2. Vaya a la carpeta de la nueva aplicación:Navigate into the new app folder:

    cd nodejs-docs-hello-world
    
  3. Inicie la aplicación para probarla localmente:Start the app to test it locally:

    npm start
    
  4. Abra el explorador web y vaya a http://localhost:1337.Open your browser and navigate to http://localhost:1337. El explorador debe mostrar "¡Hola mundo!".The browser should display "Hello World!".

  5. Presione Ctrl+C en el terminal para detener el servidor.Press Ctrl+C in the terminal to stop the server.

Implementar la aplicación en AzureDeploy the app to Azure

En esta sección, implementará la aplicación de Node.js en Azure con VS Code y la extensión Azure App Service.In this section, you deploy your Node.js app to Azure using VS Code and the Azure App Service extension.

  1. En el terminal, asegúrese de que se encuentra en la carpeta nodejs-docs-hello-world y, a continuación, inicie Visual Studio Code con el siguiente comando:In the terminal, make sure you're in the nodejs-docs-hello-world folder, then start Visual Studio Code with the following command:

    code .
    
  2. En la barra de actividades de VS Code, seleccione el logotipo de Azure para mostrar el explorador de AZURE APP SERVICE.In the VS Code activity bar, select the Azure logo to show the AZURE APP SERVICE explorer. Seleccione Iniciar sesión en Azure… y siga las instrucciones.Select Sign in to Azure... and follow the instructions. Si se producen errores, consulte Solución de problemas de inicio de sesión en Azure a continuación. Una vez que haya iniciado sesión, el explorador debe mostrar el nombre de la suscripción de Azure.(See Troubleshooting Azure sign-in below if you run into errors.) Once signed in, the explorer should show the name of your Azure subscription.

    Inicio de sesión en Azure

  3. En el explorador de AZURE APP SERVICE de VS Code, seleccione el icono de flecha arriba azul para implementar la aplicación en Azure.In the AZURE APP SERVICE explorer of VS Code, select the blue up arrow icon to deploy your app to Azure. También puede invocar el mismo comando desde la Paleta de comandos ( Ctrl+Mayús+P ); para hacerlo, escriba "deploy to web app" y elija Azure App Service: Deploy to Web App (Azure App Service: Implementar en aplicación web).(You can also invoke the same command from the Command Palette ( Ctrl+Shift+P ) by typing 'deploy to web app' and choosing Azure App Service: Deploy to Web App ).

    Captura de pantalla del servicio Aplicación de Azure en VS Code que muestra el icono de flecha azul seleccionado.

  4. Elija la carpeta nodejs-docs-hello-world.Choose the nodejs-docs-hello-world folder.

  5. Elija una opción de creación basada en el sistema operativo en el que desea realizar la implementación:Choose a creation option based on the operating system to which you want to deploy:

    • Linux: seleccione la opción Create new Web App (Crear nueva aplicación web).Linux: Choose Create new Web App
    • Windows: seleccione la opción Create new Web App... Advanced (Crear nueva aplicación web...Avanzado).Windows: Choose Create new Web App... Advanced
  6. Escriba un nombre único global para la aplicación web y presione Intro.Type a globally unique name for your web app and press Enter. El nombre debe ser único en todo Azure y usar solo caracteres alfanuméricos ("A-Z", "a-z" y "0-9") y guiones ("-").The name must be unique across all of Azure and use only alphanumeric characters ('A-Z', 'a-z', and '0-9') and hyphens ('-').

  7. Si el destino es Linux, seleccione una versión de Node.js cuando se le solicite.If targeting Linux, select a Node.js version when prompted. Se recomienda una versión LTS.An LTS version is recommended.

  8. Si el destino es Windows, siga las indicaciones adicionales:If targeting Windows, follow the additional prompts:

    1. Seleccione Create a new resource group (Crear un grupo de recursos nuevo) y escriba un nombre para el grupo de recursos, como AppServiceQS-rg.Select Create a new resource group , then enter a name for the resource group, such as AppServiceQS-rg.
    2. Seleccione Windows como sistema operativo.Select Windows for the operating system.
    3. Seleccione Create new App Service plan (Crear nuevo plan de App Service) y, a continuación, escriba un nombre para el plan (por ejemplo, AppServiceQS-plan); después, seleccione F1 Free (F1 gratis) como plan de tarifa.Select Create new App Service plan , then enter a name for the plan (such as AppServiceQS-plan), then select F1 Free for the pricing tier.
    4. Elija Omitir por ahora cuando se le pregunte sobre Application Insights.Choose Skip for now when prompted about Application Insights.
    5. Elija una región cerca de usted o de los recursos a los que desea acceder.Choose a region near you or near resources you wish to access.
  9. Tras responder a todos los mensajes, VS Code muestra los recursos de Azure que se estén creando para la aplicación en la ventana emergente de notificación.After you respond to all the prompts, VS Code shows the Azure resources that are being created for your app in its notification popup.

    Al realizar la implementación en Linux, seleccione Yes (Sí) cuando se le pida que actualice la configuración para ejecutar npm install en el servidor Linux de destino.When deploying to Linux, select Yes when prompted to update your configuration to run npm install on the target Linux server.

    Solicitud de actualización de la configuración en el servidor Linux de destino

  10. Seleccione Yes (Sí) cuando aparezca el mensaje Always deploy the workspace "nodejs-docs-hello-world" to (app name) (Implementar siempre el área de trabajo "nodejs-docs-hello-world" en [nombre de la aplicación]).Select Yes when prompted with Always deploy the workspace "nodejs-docs-hello-world" to (app name)". Al seleccionar Yes (Sí) se indica a VS Code que el destino sea automáticamente la misma aplicación web de App Service en las implementaciones posteriores.Selecting Yes tells VS Code to automatically target the same App Service Web App with subsequent deployments.

  11. Si implementa en Linux, seleccione Browse Website (Examinar sitio web) en el mensaje para ver la aplicación web recién implementada una vez finalizado el proceso.If deploying to Linux, select Browse Website in the prompt to view your freshly deployed web app once deployment is complete. El explorador debe mostrar "¡Hola mundo!"The browser should display "Hello World!"

  12. Si implementa en Windows, primero debe establecer el número de versión de Node.js para la aplicación web:If deploying to Windows, you must first set the Node.js version number for the web app:

    1. En VS Code, expanda el nodo del nuevo servicio de aplicaciones, haga clic con el botón derecho en Application Settings (Configuración de la aplicación) y seleccione Add New Setting... (Agregar nueva configuración):In VS Code, expand the node for the new app service, right-click Application Settings , and select Add New Setting... :

      Comando para agregar configuración de aplicación

    2. Escriba WEBSITE_NODE_DEFAULT_VERSION como clave de configuración.Enter WEBSITE_NODE_DEFAULT_VERSION for the setting key.

    3. Escriba 10.15.2 como valor de configuración.Enter 10.15.2 for the setting value.

    4. Haga clic con el botón derecho en el nodo del servicio de aplicaciones y seleccione Restart (Reiniciar).Right-click the node for the app service and select Restart

      Comando para reiniciar el servicio de aplicaciones

    5. Haga clic con el botón derecho en el nodo del servicio de aplicaciones una vez más y seleccione Browse Website (Examinar sitio web).Right-click the node for the app service once more and select Browse Website.

Solución de problemas de inicio de sesión en AzureTroubleshooting Azure sign-in

Si ve el error "Cannot find subscription with name [subscription ID]" ("No se encuentra la suscripción con el nombre [identificador de suscripción]"), puede que sea debido a que esté detrás de un proxy y no se pueda establecer la conexión con la API de Azure.If you see the error "Cannot find subscription with name [subscription ID]" when signing into Azure, it might be because you're behind a proxy and unable to reach the Azure API. Configure las variables de entorno HTTP_PROXY y HTTPS_PROXY con su información de proxy en el terminal mediante export.Configure HTTP_PROXY and HTTPS_PROXY environment variables with your proxy information in your terminal using export.

export HTTPS_PROXY=https://username:password@proxy:8080
export HTTP_PROXY=http://username:password@proxy:8080

Si el problema no se corrige después de configurar las variables de entorno, seleccione el botón anterior He tenido un problema para ponerse en contacto con nosotros.If setting the environment variables doesn't correct the issue, contact us by selecting the I ran into an issue button above.

Actualización de la aplicaciónUpdate the app

Puede implementar los cambios en esta aplicación si realiza modificaciones en VS Code, guarda los archivos y, a continuación, usa el mismo proceso que antes, solo que esta vez eligiendo la aplicación existente en lugar de crear una nueva.You can deploy changes to this app by making edits in VS Code, saving your files, and then using the same process as before only choosing the existing app rather than creating a new one.

Visualización de los registrosViewing Logs

Puede ver la salida del registro (llamadas a console.log) desde la aplicación directamente en la ventana de salida de VS Code.You can view log output (calls to console.log) from the app directly in the VS Code output window.

  1. En el explorador de AZURE APP SERVICE , haga clic con el botón derecho en el nodo de la aplicación y elija Start Streaming Logs (Iniciar transmisión de registros).In the AZURE APP SERVICE explorer, right-click the app node and choose Start Streaming Logs.

    Inicio de transmisión de registros

  2. Cuando se le pida, seleccione la opción para habilitar el registro y reinicie la aplicación.When prompted, choose to enable logging and restart the application. Después de reiniciar la aplicación, se abrirá la ventana de salida de VS Code con una conexión al streaming de registros.Once the app is restarted, the VS Code output window opens with a connection to the log stream.

    Captura de pantalla del símbolo del sistema de Visual Studio Code para habilitar el registro y reiniciar la aplicación con el botón Sí seleccionado.

  3. Después de unos segundos, la ventana de salida muestra un mensaje donde se indica que está conectado al servicio de transmisión de registros.After a few seconds, the output window shows a message indicating that you're connected to the log-streaming service. Puede generar más actividad de salida actualizando la página en el explorador.You can generate more output activity by refreshing the page in the browser.

     Connecting to log stream...
     2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
     Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).
     

Pasos siguientesNext steps

Ha completado correctamente este inicio rápido.Congratulations, you've successfully completed this quickstart!

Compruebe las demás extensiones de Azure.Check out the other Azure extensions.

También puede conseguirlas todas si instala el paquete de extensiones Azure Tools.Or get them all by installing the Node Pack for Azure extension pack.

PrerrequisitosPrerequisites

Si no tiene una cuenta de Azure, regístrese hoy mismo para obtener una cuenta gratuita con 200 USD en créditos de Azure para probar cualquier combinación de los servicios.If you don't have an Azure account, sign up today for a free account with $200 in Azure credits to try out any combination of services.

Necesita tener instalado Visual Studio Code, además de Node.js y npm, el administrador de paquetes de Node.js.You need Visual Studio Code installed along with Node.js and npm, the Node.js package manager.

También tendrá que instalar la extensión Azure App Service, que puede usar para crear, administrar e implementar Azure App Service en Linux en la plataforma como servicio de Azure (PaaS).You will also need to install the Azure App Service extension, which you can use to create, manage, and deploy Linux Web Apps on the Azure Platform as a Service (PaaS).

Iniciar sesiónSign in

Después de instalar la extensión, inicie sesión en su cuenta de Azure.Once the extension is installed, log into your Azure account. En la barra de actividades, seleccione el logotipo de Azure para mostrar el explorador de AZURE APP SERVICE.In the Activity Bar, select the Azure logo to show the AZURE APP SERVICE explorer. Seleccione Iniciar sesión en Azure… y siga las instrucciones.Select Sign in to Azure... and follow the instructions.

inicio de sesión en Azure

Solución de problemasTroubleshooting

Si ve el error “No se encuentra la suscripción con el nombre [identificador de suscripción]” , puede que sea debido a que esté detrás de un proxy y no se pueda establecer la conexión con la API de Azure.If you see the error "Cannot find subscription with name [subscription ID]" , it might be because you're behind a proxy and unable to reach the Azure API. Configure las variables de entorno HTTP_PROXY y HTTPS_PROXY con su información de proxy en el terminal mediante export.Configure HTTP_PROXY and HTTPS_PROXY environment variables with your proxy information in your terminal using export.

export HTTPS_PROXY=https://username:password@proxy:8080
export HTTP_PROXY=http://username:password@proxy:8080

Si el problema no se corrige después de configurar las variables de entorno, seleccione el botón siguiente He tenido un problema para ponerse en contacto con nosotros.If setting the environment variables doesn't correct the issue, contact us by selecting the I ran into an issue button below.

Comprobación de requisitos previosPrerequisite check

Antes de continuar, asegúrese de haber instalado y configurado todos los requisitos previos.Before you continue, ensure that you have all the prerequisites installed and configured.

En VS Code, verá su dirección de correo electrónico de Azure en la barra de estado, y la suscripción en el explorador de AZURE APP SERVICE.In VS Code, you should see your Azure email address in the Status Bar and your subscription in the AZURE APP SERVICE explorer.

Creación de una aplicación de Node.jsCreate your Node.js application

Después, cree una aplicación de Node.js que se pueda implementar en la nube.Next, create a Node.js application that can be deployed to the Cloud. En este inicio rápido, se usa un generador de aplicaciones para aplicar scaffolding rápidamente en la aplicación desde un terminal.This quickstart uses an application generator to quickly scaffold out the application from a terminal.

Sugerencia

Si ya ha completado el tutorial de Node.js, puede ir directamente al paso Implementación en Azure.If you have already completed the Node.js tutorial, you can skip ahead to Deploy to Azure.

Aplicación de scaffolding en una nueva aplicación con Express GeneratorScaffold a new application with the Express Generator

Express es un marco popular para crear y ejecutar aplicaciones de Node.js.Express is a popular framework for building and running Node.js applications. Puede aplicar scaffolding en una nueva aplicación de Express (lo que equivale a crear un aplicación) mediante la herramienta Express Generator.You can scaffold (create) a new Express application using the Express Generator tool. Express Generator se proporciona como módulo de npm y se puede ejecutar directamente (sin instalación) mediante la herramienta de línea de comandos de npm npx.The Express Generator is shipped as an npm module and can be run directly (without installation) by using the npm command-line tool npx.

npx express-generator myExpressApp --view pug --git

Los parámetros --view pug --git indican al generador que use el motor de plantillas pug (antes conocido como jade) y que cree un archivo de .gitignore.The --view pug --git parameters tell the generator to use the pug template engine (formerly known as jade) and to create a .gitignore file.

Para instalar todas las dependencias de la aplicación, vaya a la nueva carpeta y ejecute npm install.To install all of the application's dependencies, go to the new folder and run npm install.

cd myExpressApp
npm install

Ejecución de la aplicaciónRun the application

A continuación, asegúrese de que se ejecute la aplicación.Next, ensure that the application runs. Desde el terminal, inicie la aplicación con el comando npm start para iniciar el servidor.From the terminal, start the application using the npm start command to start the server.

npm start

Ahora, abra el explorador y vaya a http://localhost:3000, donde verá algo similar a esto:Now, open your browser and navigate to http://localhost:3000, where you should see something like this:

Ejecución de una aplicación de Express

Implementar en AzureDeploy to Azure

En esta sección, implementará la aplicación de Node.js con VS Code y la extensión Azure App Service.In this section, you deploy your Node.js app using VS Code and the Azure App Service extension. En este inicio rápido, se usa el modelo de implementación más básico, donde la aplicación se comprime e implementa en una instancia de Azure App Service en Linux.This quickstart uses the most basic deployment model where your app is zipped and deployed to an Azure Web App on Linux.

Implementación mediante Azure App ServiceDeploy using Azure App Service

Primero, abra la carpeta de la aplicación en VS Code.First, open your application folder in VS Code.

code .

En el explorador de AZURE APP SERVICE , seleccione el icono de flecha arriba azul para implementar la aplicación en Azure.In the AZURE APP SERVICE explorer, select the blue up arrow icon to deploy your app to Azure.

Captura de pantalla del menú Azure App Service de Visual Studio Code con la flecha azul de implementación seleccionada.

Sugerencia

También puede implementar desde la Paleta de comandos (CTRL + MAYÚS + P); para hacerlo, escriba “implementar en Web App” y ejecute el comando Azure App Service: implementar en Web App.You can also deploy from the Command Palette (CTRL + SHIFT + P) by typing 'deploy to web app' and running the Azure App Service: Deploy to Web App command.

  1. Seleccione el directorio que tenga abierto actualmente, myExpressApp.Choose the directory that you currently have open, myExpressApp.

  2. Elija Create new Web App (Crear aplicación web), que se implementa en App Service en Linux de forma predeterminada.Choose Create new Web App , which deploys to App Service on Linux by default.

  3. Escriba un nombre único global para la Web App y presione ENTRAR.Type a globally unique name for your Web App and press ENTER. Los caracteres válidos para un nombre de aplicación son “a-z”, “0-9” y “-”.Valid characters for an app name are 'a-z', '0-9', and '-'.

  4. Seleccione la versión de Node.js (le recomendamos que use “LTS”).Choose your Node.js version , LTS is recommended.

    En el canal de notificación, se muestran los recursos de Azure que se estén creando para la aplicación.The notification channel shows the Azure resources that are being created for your app.

  5. Seleccione cuando se le pida que actualice la configuración para ejecutar npm install en el servidor de destino.Select Yes when prompted to update your configuration to run npm install on the target server. Después, se implementará la aplicación.Your app is then deployed.

    Captura de pantalla del símbolo del sistema para actualizar la configuración en el servidor de destino con el botón Sí seleccionado.

  6. Cuando se inicie la aplicación, se le pedirá que actualice el área de trabajo para que las implementaciones posteriores usen como destino automáticamente la misma instancia de App Service Web App.When the deployment starts, you're prompted to update your workspace so that later deployments will automatically target the same App Service Web App. Seleccione para asegurarse de que los cambios se implementen en la aplicación correcta.Choose Yes to ensure your changes are deployed to the correct app.

    Captura de pantalla del símbolo del sistema para actualizar el área de trabajo con el botón Sí seleccionado.

Sugerencia

Asegúrese de que la aplicación escuche en el puerto proporcionado por la variable de entorno PORT: process.env.PORT.Be sure that your application is listening on the port provided by the PORT environment variable: process.env.PORT.

Examen de la aplicación en AzureBrowse the app in Azure

Una vez finalizada la implementación, seleccione Browse Website (Examinar sitio web) en el mensaje para ver la aplicación web recién implementada.Once the deployment completes, select Browse Website in the prompt to view your freshly deployed web app.

Solución de problemasTroubleshooting

Si ve el error “No tiene permiso para ver este directorio o esta página” , puede que la aplicación no se haya iniciado correctamente.If you see the error "You do not have permission to view this directory or page." , then the application probably failed to start correctly. Vaya a la sección siguiente y vea la salida de registros para identificar y corregir el error.Head to the next section and view the log output to find and fix the error. Si no puede corregirlo, seleccione el botón siguiente He tenido un problema para ponerse en contacto con nosotros.If you aren't able to fix it, contact us by selecting the I ran into an issue button below. Estaremos encantados de ayudarle.We're happy to help!

Actualización de la aplicaciónUpdate the app

Para implementar los cambios en esta aplicación, siga el mismo proceso y seleccione la aplicación existente, en lugar de crear otra.You can deploy changes to this app by using the same process and choosing the existing app rather than creating a new one.

Visualización de los registrosViewing Logs

En esta sección aprenderá a ver (o "copiar") los registros desde la aplicación de App Service en ejecución.In this section, you learn how to view (or "tail") the logs from the running App Service app. Las llamadas realizadas a console.log en la aplicación se muestran en la ventana de salida en Visual Studio Code.Any calls to console.log in the app are displayed in the output window in Visual Studio Code.

Busque la aplicación en el explorador de AZURE APP SERVICE , haga clic con el botón derecho en la aplicación y seleccione Ver registros de streaming.Find the app in the AZURE APP SERVICE explorer, right-click the app, and choose View Streaming Logs.

La ventana de salida de VS Code se abre con una conexión a la transmisión de registros.The VS Code output window opens with a connection to the log stream.

Visualización de los registros de streaming

Captura de pantalla del símbolo del sistema de VS Code para habilitar el registro de archivos y reiniciar la aplicación web con el botón Sí seleccionado.

Después de unos segundos, verá un mensaje donde se indica que está conectado al servicio de streaming de registros.After a few seconds, you'll see a message indicating that you're connected to the log-streaming service. Actualice la página varias veces para ver más actividad.Refresh the page a few times to see more activity.

2019-09-20 20:37:39.574 INFO  - Initiating warmup request to container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node
2019-09-20 20:37:55.011 INFO  - Waiting for response to warmup request for container msdocs-vscode-node_2_00ac292a. Elapsed time = 15.4373071 sec
2019-09-20 20:38:08.233 INFO  - Container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node initialized successfully and is ready to serve requests.
2019-09-20T20:38:21  Startup Request, url: /Default.cshtml, method: GET, type: request, pid: 61,1,7, SCM_SKIP_SSL_VALIDATION: 0, SCM_BIN_PATH: /opt/Kudu/bin, ScmType: None

Pasos siguientesNext steps

Ha completado correctamente este inicio rápido.Congratulations, you've successfully completed this quickstart!

A continuación, vea otras extensiones de Azure.Next, check out the other Azure extensions.

También puede conseguirlas todas si instala el paquete de extensiones Azure Tools.Or get them all by installing the Node Pack for Azure extension pack.