août 12, 2020

Tuto: Ma première Web App sur Azure (2/4)

Partie 2 : Découvrir le portail Azure et déployer une Web App NodeJS

Notre environnement de travail est prêt, puisque nous l’avons configuré dans la première partie. Nous pouvons enfin passer aux choses sérieuses !

Sommaire de la deuxième partie

  1. Connexion au portail Azure

  2. Création d’une Web Application

    Création de l’application que nous allons déployer pour nos tests.


Connexion au portail Azure

Rendez-vous sur https://portal.azure.com/ et authentifiez vous avec votre compte Azure.

En haut à droite, une notification nous indique le montant dont nous disposons pour faire des tests.

Crédit Azure
Portail Azure

En cliquant sur le burger menu en haut à gauche, vous trouverez l’accueil et plusieurs services qui sont mis en favoris. Il est possible de customiser ce menu, à votre convenance.
En haut à droite, en cliquant sur le rouage, vous pouvez personnaliser le portail. Vous pouvez changer le thème, change la langue, ancrer le menu qui se situe à gauche…

Dans la barre de recherche qui se situe en haut, recherchez « Abonnements » et cliquez dessus.

C’est ici que vous retrouverez vos abonnements ainsi que leurs coûts. Dans notre cas, nous retrouvons notre abonnement gratuit, nous avons pour le moment dépensé 0€ (sur les 170 que l’on nous offre).

Cliquez sur le nom de l’abonnement, en l’occurrence pour moi « Essai gratuit », pour avoir plus de détails.

C’est sur cet écran que vous retrouverez le détail des dépenses de votre abonnement gratuit. Vous retrouverez également la consommation de vos services gratuits. A noter, cette phrase importante :
Les coûts d’utilisation au-delà de votre limite des services gratuits seront appliqués à votre crédit d’essai gratuit 170 EUR.


Rassurez-vous, si vous dépassez votre cota gratuit, le surplus utilisera vos 170€ offerts. Je tiens cependant à rappeler une phrase important de l’article « Présentation d’Azure » :

Attention, la contrepartie de cette facilité à déployer et supprimer des ressources comme vous le voulez est l’argent que vous allez dépenser. Au début, on aurait tendance à faire plein de tests et par conséquent créer des ressources partout.

Il est important de surveiller vos dépenses, pensez à jeter un coup d’œil de temps en temps à votre consommation.

Aujourd’hui vous disposez d’un seul abonnement gratuit. Demain vous en aurez plusieurs, par exemple :

  • DEV pour vos développements,
  • INT pour l’intégration,
  • PPD pour la pré-prod,
  • PRD pour la production.

Séparer vos abonnements vous permettra de mieux gérer vos budgets / dépenses et aussi tout simplement d’être bien organisé. Je ne rentrerais pas plus dans les détails pour le moment, je préfère y consacrer un article plus tard.

Attention

Pour des questions de simplicité, je change la langue du portail Azure en anglais. Ce sera plus simple pour les recherches sur le portail et également sur le net. Je vous invite à faire de même. Le mot « abonnement » devient « subscription » !


Création d’une Web Application

Cliquez en haut à gauche, dans le menu, sur « All services » puis dans le sous menu « All » comme ci-dessous.

Vous retrouvez ici tous les services proposés par Azure. Comme vous le constatez, il y en a beaucoup ! Nous retrouvons plusieurs catégories, tel que « containers », « storage », « l’AI + machine learning », « blockchain »… mais aussi et surtout « web » ! Cliquez sur cette catégorie puis sélectionnez « App services ».

Cliquez ensuite sur « Add ».

Il est grand temps de créer notre Web App ! Voici la configuration :

Configuration de la ressource
  • Subscription : Essai gratuit
  • Resource Group : Créez-en un nouveau, appelez le RG-{CeQueVousVoulez}-TEST.
    • Un ressource groupe est utilisé pour regrouper des applications liées entre-elles. Par exemple une WebApp avec sa base de données etc… Vous le réutiliserez plus tard
  • name : le nom de votre site XXXX.azurewebsites.net
  • Publish : Code
  • Runtime Stack : Node 12
  • OS : Windows
  • Region : France Central
  • Sku and size : Il faut changer l’option proposée par défaut et mettre Free F1 (voir la capture d’écran ci-dessous)

Cliquez ensuite sur sur le boutton Next : Monitoring.
On vous proposera d’activer Application Insight, qui permet de monitorer les logs de votre application. Sélectionnez non.

Appuyez ensuite sur next jusqu’à arriver dans la section « Review + Create ». Vérifiez que tout est OK puis cliquez sur « Create ».

Attendez un peu, le temps du déploiement… Une fois la ressource crée, cliquez sur le bouton « Go to resource » pour accéder à votre web app.

Bravo ! Votre application web est déployée ! Vous pouvez retrouver l’url de votre application en haut à droite de la page, comme sur la capture d’écran.

Quelques temps après vous êtes rendu sur votre web app, vous pourrez constater sur les graphiques en dessous, que l’on voit votre requête. Ces graphiques vous permettes d’avoir un rapide aperçu de la charge qu’il y a sur votre application.

Maintenant que l’application est déployé, il faut modifier le code. Actuellement, c’est un sample qui est déployé.
Dans le prochain article, nous verrons comment lier notre ressource à Azure Devops pour modifier et déployer facilement notre application.

Partie 3 : https://gw-flamant.dev/commencer-le-developpement-azure-partie-3

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *