Compartir vía


Introducción a la implementación de la aplicación JavaScript en Azure

Para implementar la aplicación basada en JavaScript en Azure, mueva un archivo o un conjunto de archivos a Azure para que se sirvan a través de un punto de conexión HTTP. El proceso de mover los archivos se denomina implementación.

Prerrequisitos

Métodos de implementación

Azure ofrece varios métodos de implementación para satisfacer diferentes necesidades. Estos son algunos métodos comunes:

Método Detalles
CLI para desarrolladores de Azure Ideal para desarrolladores que prefieren herramientas de línea de comandos y necesitan automatizar el aprovisionamiento y la implementación de recursos.
Extensiones de Visual Studio Code Adecuado para implementaciones manuales, de prueba o poco frecuentes. Requiere las extensiones de Azure pertinentes instaladas localmente.
CLI de Azure Resulta útil para implementaciones manuales o ocasionales. Requiere la CLI de Azure instalada localmente.
Acciones de GitHub Ideal para implementaciones automatizadas o continuas desencadenadas por cambios en el repositorio de GitHub.

Existen otros métodos de implementación basados en el servicio específico. Por ejemplo, Azure App Service admite una amplia variedad de métodos de implementación:

Puede volver a implementar en su servicio de aplicaciones mediante cualquiera de los métodos proporcionados, incluso si no usó uno de esos métodos para implementarlo originalmente. Puede que necesite configurar algo antes de volver a implementar si se cambian los métodos.

Servicios de hospedaje de Azure para aplicaciones de JavaScript

Azure proporciona varios servicios de hospedaje optimizados para diferentes escenarios de aplicaciones de JavaScript:

Service Mejor para Características clave
Azure Static Web Apps Aplicaciones web modernas con front-end estáticos (React, Vue, Angular) y API sin servidor opcionales SSL gratuito, CDN global, entornos de pruebas en solicitudes de pull request, autenticación integrada
Azure App Service Aplicaciones web completas y API REST Escalado automático integrado, ranuras de implementación, integración sencilla con los servicios de Azure
Funciones de Azure Aplicaciones y microservicios sin servidor controlados por eventos Precios de pago por ejecución, escalado automático, varios desencadenadores y enlaces
Azure Container Apps Aplicaciones y microservicios en contenedores Contenedores sin servidor con tecnología de Kubernetes, integración de Dapr, escalado controlado por eventos

Para más información sobre cómo elegir el servicio de hospedaje adecuado, consulte Hospedaje de aplicaciones en Azure.

Pasos de compilación

En función de la complejidad y las necesidades de implementación de la aplicación, puede elegir compilar la aplicación de JavaScript antes o durante la implementación:

  • Compilación antes de la implementación: para compilaciones complejas o largas, empaquete la aplicación en un archivo ZIP e impleméntela. Un paquete de implementación permite controlar y probar la compilación antes de la implementación.
  • Compilación durante la implementación: para compilaciones más sencillas, use la variable de entorno proporcionada por Azure SCM_DO_BUILD_DURING_DEPLOYMENT=true para compilar la aplicación durante la implementación.

Ranuras de implementación

Slots de implementación en Azure App Service le permiten crear entornos independientes para preproducción y producción. El uso de espacios permite probar la aplicación en un entorno de ensayo antes de cambiarla por el espacio de producción, garantizando una implementación sin problemas ni errores. Más información sobre las ranuras de implementación.

No use ranuras de implementación para combinar propósitos de implementación. Todas las ranuras de implementación comparten el servicio de aplicaciones, por lo que debe asegurarse de que los patrones de tráfico y el uso previsto de todas las ranuras son los mismos. Si necesita tener un entorno de prueba o almacenamiento provisional hospedado, debe ser una instancia de App Service independiente.

Implementación con la CLI para desarrolladores de Azure

La CLI para desarrolladores de Azure (azd) simplifica el proceso de implementación de la aplicación en Azure. Siga estos pasos:

  1. Instalar la CLI para desarrolladores de Azure.

  2. Buscar un proyecto existente que usa muchos de los mismos recursos que usa el proyecto.

  3. Inicialice una versión local del proyecto para usarla como plantilla de infraestructura para su propio proyecto.

    azd init --template <template-name>
    
  4. Cree los recursos e implemente el código en Azure.

    azd up
    

Implementación con Visual Studio Code

Para implementar o volver a implementar la aplicación de App Service con Visual Studio Code, complete los pasos siguientes:

  1. Instale las extensiones de Azure relacionadas, por ejemplo, azureApp Service o Azure Functions.

  2. Abra el explorador de Azure. Seleccione el icono de Azure en la barra lateral principal o use el método abreviado de teclado (Mayús + Alt + A).

  3. En el grupo Recursos, seleccione la suscripción y el servicio.

  4. Haga clic con el botón derecho en el servicio y seleccione Implementar en aplicación web....

    Implementación o reimplementación en App Service con Visual Studio Code

Implementar en Azure Static Web Apps

Azure Static Web Apps es ideal para aplicaciones web modernas creadas con marcos de JavaScript. Para desplegar:

  1. Instale la extensión Azure Static Web Apps para Visual Studio Code.
  2. Compile la aplicación localmente para asegurarse de que funciona según lo previsto.
  3. En Visual Studio Code, abra el explorador de Azure y busque Azure Static Web Apps.
  4. Haga clic con el botón derecho en la suscripción y seleccione Crear aplicación web estática.
  5. Siga las indicaciones para conectar el repositorio de GitHub. Azure crea automáticamente un flujo de trabajo de Acciones de GitHub.
  6. Inserte los cambios en el repositorio para desencadenar implementaciones automáticas.

Para más información, consulte Implementación de la aplicación web en Azure Static Web Apps.

Desplegar en Azure Container Apps

Azure Container Apps proporciona hospedaje de contenedores sin servidor para aplicaciones de JavaScript. Para desplegar:

  1. Conteneriza tu aplicación usando Docker. Cree un Dockerfile en la raíz del proyecto.
  2. Compile y pruebe el contenedor localmente.
  3. Inserte la imagen de contenedor en Azure Container Registry.
  4. Use la extensión Azure Container Apps o la CLI de Azure para crear e implementar la aplicación de contenedor.

Para obtener una guía completa, consulte Introducción a JavaScript en Azure Container Apps.

Conexión al entorno hospedado de Azure

Visualización de archivos en el entorno hospedado en Azure

Hay varias maneras de ver inmediatamente los archivos en tu app web o app de funciones hospedada en Azure. Cuando use ranuras en el recurso hospedado, debe asegurarse de que está en la ranura correcta antes de ver los archivos.

  • Ver archivos en Azure Portal: seleccione Console en Herramientas de desarrollo para el recurso de hospedaje.

    En Azure Portal para la aplicación web o la aplicación de funciones, seleccione

  • Ver archivos en la extensión de VS Code: seleccione el icono de Azure en la barra de actividad. En la sección Recursos, seleccione la suscripción y el servicio. El nodo Archivos proporciona una vista de sus archivos remotos.

    las extensiones de aplicación de Azure App Service y Azure Functions proporcionan una vista de los archivos remotos.

Visualización del punto de conexión HTTP en Azure Portal

Vea el punto de conexión HTTP desde la página Información general del servicio en Azure Portal.

Ver el punto de conexión HTTP desde la página Información general del servicio en Azure Portal.