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

Assurez-vous de remplacer les crochets par vos informations d'identification réelles, et une fois que vous exécutez la commande, vous avez désormais accès au référentiel sur votre machine. Si vous exécutez votre application sur le serveur de développement avec:

 ng serve

Vous verrez que l'application ressemble à ceci:

Et c'est l'exemple d'application que nous souhaitons déployer en ligne avec l'infrastructure Azure Static Web App.

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.

Vous pouvez tirer parti d'un gestion du cycle de vie des applications pour vos applications Web modernes complètes, y compris la configuration de domaine personnalisée, l'authentification et l'autorisation intégrées et le provisionnement automatique des environnements de pré-production pour valider les modifications avant de fusionner avec une branche de production. De plus, Azure est l'une des plates-formes d'hébergement cloud les plus sûres du marché. Microsoft dépense plus d'un milliard de dollars par an en recherche et développement en cybersécurité, est plus conforme aux normes de sécurité que n'importe quel système de sécurité cloud disponible et compte près de 4 000 experts en sécurité qui travaillent uniquement sur la confidentialité et la sécurité.

Maintenant, pour déployer cette application, définissons le déploiement à l'aide du portail Azure. Si vous êtes nouveau sur le portail Azure, vous pouvez obtenir jusqu'à 12 mois d'accès gratuit aux services Azure en 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.

Lorsque vous cliquez sur "Créer", vous verrez un formulaire qui vous posera des questions sur la ressource que vous êtes sur le point de configurer. La barre d'abonnement doit avoir le nom d'abonnement que vous venez d'utiliser avec le plan gratuit de 12 mois (vous pouvez accéder à la section ci-dessus pour revendiquez le vôtre). Dans le groupe de ressources, créez un nouveau groupe de ressources, appelez-le "Test" et enregistrez-le.

Dans le statique Dans la section Détails de l'application Web, remplissez-la avec le nom du référentiel (Azure-app), choisissez une région proche de vous et connectez-vous à votre GitHub. Lorsque vous êtes connecté, choisissez l'organisation et le nom exact du projet (Azure-app), puis choisissez la branche principale. Cela vous amène à la page de construction.

Page de construction

Mettre une barre oblique vers l'avant dans la zone Emplacement de l'application, laissez l'emplacement de l'API vide (car il n'y a pas de backend pour cette application de test particulière), puis à l'intérieur de l'emplacement de l'artefact, ajoutez «dist / angular-basic» dans la zone. Cliquez sur «Examiner et créer», puis cliquez sur "Créer". Vous verrez l'état du déploiement et une invite pour épingler la nouvelle ressource. Si vous le faites, vous pouvez l'afficher comme suit:

Maintenant, si vous visitez l'URL personnalisée fournie après deux minutes, vous verrez que votre application Angular y est déployée publiquement. L'avantage est que tout devient automatisé.Par conséquent, pour chaque validation que vous effectuez, vous pouvez afficher la section des actions GitHub de votre projet pour surveiller la manière dont il applique automatiquement les nouvelles modifications à l'infrastructure cloud Azure. C'est également l'une des fonctionnalités les plus étonnantes de l'utilisation du cloud Azure: vous pouvez configurer votre processus de déploiement pour qu'il soit automatisé une fois que vous avez apporté une modification sans le faire explicitement.

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?