Cómo implementar manualmente una aplicación Angular en un Azure App Service

English article / Artículo en inglés

Bienvenido, esta guía tiene como objetivo enseñarte lo que necesitas saber sobre cómo implementar manualmente una aplicación Angular desde Visual Studio Code en Azure App Service, en solo 11 pasos.

Requisitos:

• Una Suscripción a Azure recuerda que puede comenzar a utilizar Azure de forma gratuita.
• Visual Studio Code
• Node.js versión LTS
• Angular CLI
• Git

Comencemos

Paso 0: Cuando se trabaja en un proyecto de Angular, es fundamental verificar que se tienen instaladas las versiones correctas de Node.js y Angular CLI para garantizar la compatibilidad y un proceso de desarrollo e implementación sin problemas.

abra su terminal o símbolo del sistema y ejecute:

ng version

Este comando mostrará información detallada sobre la versión Angular CLI, Node js y Npm instalada.

Verás algo como esto

Paso 1: Cree una aplicación angular en el directorio de su selección

abra su terminal o símbolo del sistema y ejecute:

ng new testAngularInAAS --strict false

“testAngularInAAS” se puede reemplazar por el nombre de la aplicación angular requerido/deseado.

Paso 2: Probar la aplicación Angular creada de forma local ejecutandola en un servidor local .

abra su terminal o símbolo del sistema y ejecute:

cd testAngularInAAS
ng serve –o

Te quedará algo como esto si todo va bien.

Te quedará algo como esto si todo va bien.

Su aplicación estará disponible en http://localhost:4200/ de forma predeterminada.

Paso 3: Construya el proyecto angular creado para una implementación en un entorno desarrollo/pruebas

abra su terminal o símbolo del sistema y ejecute:

ng build

o puede ser

npm run build

Si es un proyecto productivo:

ng build –prod

Para proyectos Angular, ng build es la opción preferida y más sencilla, mientras que npm run build es más flexible y adecuado para escenarios personalizados.

Te quedará algo como esto si todo va bien.

Paso 4: Se necesita aprovisionar un servicio de aplicaciones de Azure para proyectos en angular.

busca App Services

Haga click en “Create” => “Web App”

Paso 5: Vamos a iniciar la configuración básica del app service

Cree un grupo de recursos y aplique la convención de nomenclatura al final “-RG”

Puede ser SO Linux.

Para realizar pruebas: opte por el plan de precios F1, pero siéntase libre de elegir lo contrario según sea necesario.

Paso 6: Configura las etiquetas de tu aplicación web

Puede escribir todas las etiquetas necesarias.

Tendrás algo como esto al final de la configuración.

Haga click en “Create”

Tendrá algo como esto si la provisión de un servicio de aplicaciones de Azure va bien.

Paso 7: Abra el proyecto desde su Visual Studio Code, luego instale las siguientes extensiones

Azure Account

Azure App Service

Azure Resources

Paso 8: Inicie sesión en su cuenta de Azure

Complete sus credenciales, luego verá sus recursos en Azure, especialmente los servicios de aplicaciones creados en el paso 6.

Haga clic en las propiedades de TestAngularApps

Haga clic en Deploy to Web App

Haga click en Browse

Tenemos dos formas de implementar esta aplicación angular en el servicio de aplicaciones Azure.

Camino corto

Camino largo

Paso 9: Camino corto

seleccione la carpeta dentro del dist, normalmente con el nombre del proyecto angular.

Haga click en “Deploy”

Espere mientras se desplegan los fuentes del app

Haga click en Browse Website

Todo se ve bien ahora, su aplicación angular se implementó exitosamente en Azure App Services

Paso 10: Camino largo

seleccione la carpeta dist

Haga click en “Deploy”

Haga click en Browse Website

Parece que no puedes ver el sitio.

Paso 10.1: Cambie la configuración sobre las asignaciones de rutas en su servicio de aplicaciones

haga clic en asignaciones de ruta “Path mappings”

Ahora deberá verificar el nombre de su aplicación Angular en el package.json de su aplicación

el nombre es “test-angular-in-aas”

Debes agregar ese nombre a su ruta física predeterminada:

cambiando de site\wwwroot => site\wwwroot\test-angular-in-aas

site\wwwroot => site\wwwroot\

Deberá reiniciar el servicio de su aplicación.

Todo se ve bien ahora, su aplicación angular se implementó exitosamente en Azure App Services

Utilice la forma que prefiera.

Si prefieres un artículo de LinkedIn, echa un vistazo aquí.

Nota: Priorice la seguridad de su cuenta Azure: un recordatorio amistoso

Una práctica esencial que debe mantener es cerrar sesión en su cuenta de Azure una vez que haya completado sus implementaciones y tareas administrativas.

Por favor, déjame saber sus comentarios, ya que puedo crecer con ellos. Muchas gracias.