Implementación de una aplicación web creada con ASP.NET en el Servicio de aplicaciones de Azure mediante Visual Studio

Información general

Este tutorial muestra cómo implementar una aplicación web creada con ASP.NET en una aplicación web del Servicio de aplicaciones de Azure mediante Visual Studio 2015.

En este tutorial se asume que es desarrollador de ASP.NET y que nunca ha usado Azure. Cuando acabe, tendrá una sencilla aplicación web en funcionamiento en la nube.

Aprenderá a realizar los siguientes procedimientos:

  • Cómo crear una nueva aplicación web del Servicio de aplicaciones servicio mientras crea un proyecto web en Visual Studio.
  • Cómo implementar un proyecto web en una aplicación web de servicio de aplicación mediante Visual Studio.

El diagrama muestra lo que va a hacer en el tutorial.

Diagrama de creación e implementación de Visual Studio

Al final del tutorial se encuentran las secciones Solución de problemas, en la que se dan ideas sobre lo que puede hacer si algo no funciona, y Pasos siguientes, donde se proporcionan vínculos a otros tutoriales que explican con mayor profundidad cómo usar Azure App Service.

Dado que este es un tutorial de introducción, el proyecto de web que se muestra cómo implementar es simple, no utiliza base de datos ni realiza autenticación o autorización. Para obtener vínculos a temas más avanzados de implementación, consulte Documentación de implementación del Servicio de aplicaciones de Azure.

Aparte del tiempo necesario para instalar Azure SDK para. NET, este tutorial tardará aproximadamente 10-15 minutos en completarse.

Requisitos previos

Configuración del entorno de desarrollo

Este tutorial está escrito para Visual Studio 2015 con Azure SDK para. NET 2.9, o las versiones posteriores.

  • Descargar el último Azure SDK para Visual Studio 2015. El SDK instala Visual Studio 2015, en caso de que no lo esté.

    Nota

    Según la cantidad de dependencias de SDK que tenga ya en la máquina, la instalación del SDK puede tardar un período largo, desde unos minutos a media hora o más.

Si tiene Visual Studio 2013 y prefiere usar esa versión, puede descargar el último Azure SDK para Visual Studio 2013. Algunas pantallas pueden no coincidir exactamente con las ilustraciones.

Creación de una aplicación web

El siguiente paso es crear un proyecto de aplicación web en Visual Studio y una aplicación web en Azure App Service. En esta sección del tutorial configurará el nuevo proyecto web.

  1. Abra Visual Studio 2015.
  2. Haga clic en Archivo > Nuevo > Proyecto.
  3. En el cuadro de diálogo Nuevo proyecto, haga clic en Visual C# > Web > Aplicación web ASP.NET.
  4. Asegúrese de que .NET Framework 4.5.2 es el marco de trabajo de destino seleccionado.
  5. Azure Application Insights supervisa la aplicación web en cuanto a disponibilidad, rendimiento y uso. La casilla Agregar Application Insights al proyecto está activada de forma predeterminada la primera vez que crea un proyecto web después de instalar Visual Studio. Desactive la casilla Agregar Application Insights al proyecto si no desea probar Application Insights.
  6. Asigne a la aplicación el nombre MyExample y haga clic en Aceptar.

    Cuadro de diálogo Nuevo proyecto

  7. En el cuadro de diálogo Nuevo proyecto de ASP.NET, seleccione la plantilla MVC y haga clic en Cambiar autenticación.

    Para este tutorial, implemente un proyecto web de ASP.NET MVC. Si desea información sobre cómo implementar un proyecto de ASP.NET Web API, consulte la sección Pasos siguientes .

    Cuadro de diálogo New ASP.NET Project

  8. En el cuadro de diálogo Cambiar autenticación, haga clic en Sin autenticación y, a continuación, en Aceptar.

    Sin autenticación

    Para este tutorial de introducción va a implementar una aplicación sencilla en el que el usuario no inicia sesión.

  9. En la sección Microsoft Azure del cuadro de diálogo Nuevo proyecto ASP.NET, asegúrese de que la casilla Host en la nube está activada y que App Service está seleccionado en la lista desplegable.

    Cuadro de diálogo New ASP.NET Project

    Con esta configuración se indica a Visual Studio que cree una aplicación web de Azure para su proyecto web.

  10. Haga clic en Aceptar

Creación de recursos de Azure

Ahora va a indicar a Visual Studio los recursos de Azure que desea que cree.

  1. En el cuadro de diálogo Crear servicio de aplicaciones, haga clic en Agregar una cuenta y, luego, inicie sesión en Azure con el identificador y la contraseña de la cuenta que utiliza para administrar la suscripción de Azure.

    Inicio de sesión en Azure

    Si ya había iniciado sesión en el mismo equipo, es posible que no vea el botón Agregar una cuenta . En ese caso, puede omitir este paso o puede que tenga que volver a escribir sus credenciales.

  2. En Nombre de aplicación web , escriba un nombre que sea único en el dominio azurewebsites.net . Puede denominarlo MyExample con números a la derecha para que sea único, por ejemplo, MyExample810. Si se crea automáticamente un nombre de web predeterminado, será exclusivo y puede usarlo.

    Si escribe un nombre que ya usa otro usuario, aparecerá un signo de exclamación rojo a la derecha en lugar de una marca de verificación verde y tendrá que especificar otro nombre.

    La dirección URL de la aplicación es este nombre, más . azurewebsites.net. Por ejemplo, si el nombre es MyExample810, la dirección URL será myexample810.azurewebsites.net.

    También puede utilizar un dominio personalizado con una aplicación web de Azure. Para más información, consulte Configurar un nombre de dominio personalizado en el servicio de aplicaciones de Azure.

  3. Haga clic en el botón Nuevo, que se encuentra al lado del cuadro Grupo de recursos, y escriba "MyExample", o cualquier otro nombre que prefiera.

    Cuadro de diálogo Crear servicio de aplicaciones

    Un grupo de recursos es una colección de recursos de Azure tales como aplicaciones web, bases de datos y máquinas virtuales. Para un tutorial, suele ser mejor crear un nuevo grupo de recursos, porque así será fácil eliminar en un solo paso todos los recursos de Azure que se creen para el tutorial. Para más información, consulte Información general de Azure Resource Manager.

  4. Haga clic en el botón Nuevo situado junto a la lista desplegable Plan de App Service.

    Cuadro de diálogo Crear servicio de aplicaciones

    Aparece el cuadro de diálogo Configurar el plan de servicio de aplicaciones .

    Cuadro de diálogo Configurar servicio de aplicaciones

    En los siguientes pasos, se configurará un plan del Servicio de aplicaciones para el nuevo grupo de recursos. Un plan del Servicio de aplicaciones especifica los recursos de proceso en los que se ejecuta una aplicación web. Por ejemplo, si elige el nivel Gratis, la aplicación de API se ejecuta en máquinas virtuales compartidas, mientras que para algunos niveles de pago, se ejecuta en máquinas virtuales dedicadas. Para más información, consulte Introducción detallada sobre los planes del Servicio de aplicaciones de Azure.

  5. En el cuadro de diálogo Configurar el plan de servicio de aplicaciones , escriba "MyExamplePlan", o cualquier otro nombre que prefiera.
  6. En la lista desplegable Ubicación , elija la ubicación más cercana.

    Esta opción especifica en qué centro de datos de Azure se ejecutará su aplicación. Para este tutorial, puede seleccionar cualquier región y no habrá una diferencia notable, Pero para una aplicación de producción, es aconsejable que el servidor esté lo más próximo posible a los clientes que vaya a acceder a él, con el fin de minimizar la latencia.

  7. En la lista desplegable Tamaño, haga clic en Gratis.

    Para este tutorial, el plan de tarifa Gratis proporcionará un rendimiento suficiente.

  8. En el cuadro de diálogo Configurar el plan de servicio de aplicaciones, haga clic en Aceptar.
  9. En el cuadro de diálogo Crear servicio de aplicaciones, haga clic en Crear.

Inspección de los recursos de Azure en Visual Studio

En poco tiempo, normalmente menos de un minuto, Visual Studio crea el proyecto web y la aplicación web.

La ventana del Explorador de soluciones ventana muestra los archivos y carpetas del nuevo proyecto.

Explorador de soluciones

La ventana Actividad de Azure App Service muestra que los recursos de App Service se han creado en Azure. Puede hacer clic en el vínculo que aparece en la ventana para empezar a publicar el proyecto nuevo inmediatamente. No obstante, más adelante, el tutorial le mostrará cómo publicar los archivos en cualquier momento.

Aplicación web creada en la ventana Actividad del Servicio de aplicaciones de Azure

La ventana Cloud Explorer le permite ver y administrar los recursos de Azure, incluida la nueva aplicación web que acaba de crear.

Aplicación web creada en Cloud Explorer

Implementación del proyecto web en Azure

En esta sección, se implementará el proyecto web en el recurso de la aplicación web que creó en Azure App Service.

  1. En el Explorador de soluciones, haga clic con el botón derecho y elija Publicar.

    Selección de Publicar en el menú de Visual Studio

    En unos segundos aparecerá el Asistente para publicación web . El asistente abre un perfil de publicación que incluye la configuración para implementar el proyecto web en la nueva aplicación web.

    Sugerencia

    El perfil de publicación incluye un nombre de usuario y una contraseña para la implementación. Estas credenciales se han generado automáticamente y no es preciso que las escriba. La contraseña está cifrada en un archivo oculto específico del usuario, que se encuentra en la carpeta Properties\PublishProfiles .

  2. En la pestaña Conexión del Asistente para publicación web, haga clic en Siguiente.

    Acción de hacer clic en Siguiente en la pestaña Conexión del Asistente para publicación web

    La siguiente pestaña es Configuración . En ella se puede cambiar la pestaña de configuración de compilación para implementar una compilación de depuración para la depuración remota. También ofrece varias opciones de publicación de archivos.

  3. En la pestaña Configuración, haga clic en Siguiente.

    Pestaña Configuración del Asistente para publicación web

    La siguiente pestaña es Vista previa . Aquí puede ver qué archivos se van a copiar desde el proyecto a la aplicación de API. Al implementar un proyecto en una aplicación de API para la que ya implementó anteriormente, solo se copian los archivos modificados. Si desea ver una lista de los archivos que se van a copiar, haga clic en el botón Iniciar vista previa .

  4. En la pestaña Vista previa, haga clic en Publicar.

    Pestaña Vista previa del Asistente para publicación web

    Al hacer clic en Publicar, Visual Studio comienza el proceso de copia de los archivos en el servidor de Azure. Esto puede tardar un par de minutos.

    Las ventanas Salida y Actividad de Azure App Service muestran las acciones de implementación que se realizaron e informan de la correcta finalización de la implementación.

    Ventana de salida de Visual Studio informando de que la implementación se ha realizado correctamente

    Tras una implementación correcta, el explorador predeterminado se abre automáticamente en la dirección URL de la aplicación web implementada y la aplicación que creó se ejecuta ahora en la nube. La dirección URL en la barra de direcciones del explorador muestra que la aplicación web se carga desde Internet.

    Aplicación Web que se ejecuta en Azure

    Sugerencia

    Para agilizar la implementación, puede habilitar la barra de herramientas Publicación en Web con un solo clic . Haga clic en Vista > Barras de herramientas y seleccione Publicación en Web con un solo clic. Esta barra de herramientas se puede usar para seleccionar un perfil, hacer clic en un botón para publicar o hacer clic en un botón para abrir el Asistente para publicación web . Barra de herramientas Publicación en Web con un solo clic

Solución de problemas

Si experimenta problemas mientras avanza por este tutorial, asegúrese de que está usando la versión más reciente del SDK de Azure para. NET. La manera más fácil de hacerlo es descargar Azure SDK para Visual Studio 2015. Si tiene instalada la versión actual, el Instalador de plataforma web indicará que no es preciso realizar la instalación.

Si está en una red corporativa y está intentando realizar la implementación en el Servicio de aplicaciones de Azure mediante un firewall, asegúrese de que los puertos 443 y 8172 estén abiertos para Web Deploy. Si no puede abrir esos puertos, consulte la siguiente Pasos siguientes a continuación para ver otras opciones de implementación.

Una vez que la aplicación web ASP.NET se esté ejecutando en Azure App Service, puede obtener más información acerca de las características de Visual Studio que simplifican la solución de problemas. Para más información sobre el registro, la depuración remota, etc., consulte Solución de problemas de una aplicación web en el Servicio de aplicaciones de Azure con Visual Studio.

Pasos siguientes

En este tutorial, aprendió a crear una aplicación web sencilla e implementarla en una aplicación web de Azure. Estos son algunos temas y recursos relacionados que le permitirán saber más sobre el Servicio de aplicaciones de Azure: