Déployer une application angulaire avec Azure Static Web Apps

Dans cet article, vous découvrirez les applications Web statiques Azure de Microsoft et comment vous pouvez l'utiliser pour déployer votre application Angular en ligne, et comment les modifications que vous apportez par la suite sont créées et déployées sans intervention supplémentaire de votre part.

Angular

Angular, le framework JavaScript (TypeScript) de Google pour la création d'applications Web, mobiles ou de bureau, compte plus de 67 000 étoiles sur GitHub. Il est géré par l'équipe Angular de Google et une multitude de membres de la communauté et d'organisations.

Avant de commencer

Pour pouvoir suivre la démonstration de cet article, vous devriez avoir:

• Un environnement de développement intégré comme VS Code
• Node version 11.0 installée sur votre ordinateur
• Node Package Manager version 6.7 (généralement livré avec l'installation de Node)
• CLI angulaire version 9.0
• La ​​dernière version d'Angular (version 9).
  // exécuter la commande dans un terminal
ng version

Confirmez que vous utilisez la version 9 et mettez à jour la version 9 si vous êtes non.

• Un compte GitHub qui doit être actuellement connecté sur votre navigateur.
• Un compte Azure, que vous pouvez créer sur ce lien .

Les autres avantages sont:

• Une connaissance pratique du framework Angular à un niveau débutant.

Configuration d'Angular avec le modèle Azure

Angular est conçu pour être très modulaire et basé sur des composants, ce qui signifie que toute votre application peut être décomposée en petit composants indépendants. Pour Azure Static Web Apps, l'équipe fournit un modèle à utiliser lors de la création d'un nouveau projet Angular. Alors, assurez-vous de suivre les instructions au début de cet article avant de continuer. Maintenant cliquez sur ce lien pour créer un référentiel avec le modèle Azure Angular. L'interface du formulaire doit ressembler à ceci:

L'intégration dans votre flux de travail local

Maintenant que votre référentiel a été créé, vous pouvez l'intégrer dans votre flux de travail en le clonant sur votre machine locale. Accédez au dossier de votre choix et utilisez la commande ci-dessous:

 git clone https://github.com/(Votre Username) / (le nom du référentiel) .git

 ng serve

Qu'est-ce que Azure Static Web App Infrastructure?

Il s'agit d'un service d'application Web moderne de l'équipe de Microsoft qui propose un développement complet rationalisé à partir de code source vers une haute disponibilité mondiale. Il accélère le développement de votre application avec un déploiement de frontend statique et un service backend très puissant alimenté par des API sans serveur, le tout intégré via votre flux de travail GitHub dans le cloud, ce qui est tellement incroyable.

réclamant l'offre ici .

Configuration avec le portail Azure

Ouvrez le portail Azure ici et cliquez sur "créer une ressource". Ensuite, recherchez les applications Web statiques.

Page de construction

Et si j'ai une API backend?

Lors de la phase de configuration, vous pouvez ajouter le chemin de votre API à votre formulaire dans la section Emplacement de l'API. Cependant, vous pouvez également consulter la documentation Azure Static Web Apps ici .

Conclusion

Ce message a introduit vous permet de créer et de déployer votre application Angular à l'aide de la ressource cloud d'Azure appelée Static Web Apps. Nous avons également vu à quel point il est utile de l'utiliser car il s'intègre aux actions GitHub pour automatiser le processus de sorte que vous avez configuré une fois et un déploiement est planifié en votre nom après chaque validation. Nous avons également appris à quel point les services cloud Azure sont sécurisés par rapport aux autres sur le marché. Avez-vous déjà utilisé un service cloud Azure?