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.
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
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.
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.
Paso 4: Se necesita aprovisionar un servicio de aplicaciones de Azure para proyectos en angular.
Paso 5: Vamos a iniciar la configuración básica del app service
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
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.
Tenemos dos formas de implementar esta aplicación angular en el servicio de aplicaciones Azure.
Camino corto
Camino largo
Paso 9: Camino corto
Paso 10: Camino largo
Paso 10.1: Cambie la configuración sobre las asignaciones de rutas en su servicio de aplicaciones
Ahora deberá verificar el nombre de su aplicación Angular en el package.json de su aplicación
Debes agregar ese nombre a su ruta física predeterminada:
cambiando de site\wwwroot => site\wwwroot\test-angular-in-aas
Deberá reiniciar el servicio de su aplicación.
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.