- Ce Azure Getting Started a été réalisé pour un séminaire donné à HEPH Condorcet Mons le 12 novembre 2019. Il a été réalisé par Adrien Clerbois et Nathan Pire
- Ce Azure Getting Started a été donné en session à EPHEC Louvain-La-Neuve le 18 novembre 2019 par Stephane Deloison et Nathan Pire
Télécharger Visual Studio 2019 Lors de l'installation, cochez ASP.NET et développement Web
Télécharger Visual Studio Code Après l'installation, télécharger le plugin Azure Tools dans le market Azure Tools
Pour tester nos déploiements dans le cloud, nous utiliserons Postman! Télécharger Postman
-
Téléchargez le code
-
Lancez Visual Studio et le projet
-
Lancez Visual Studio Code et ouvrez le dossier
-
Allez sur Azure, nouvelle ressource et cherchez Ressource Group
-
Configurez le Ressource Group en mettant le nom et la région souhaitée
-
Dans le Ressource Group, appuyez sur le bouton Add et chercher Computer Vision
-
Ensuite, configurez Computer Vision avec le nom, la localisation, le niveau de tarification
Une fois la ressource créée, gardez de côté la clé et l'endpoint du service. -
Dans le Ressource Group, appuyez sur le bouton Add
Ensuite, cherchez Function App
-
Configurer la ressource avec le bon runtime, le nom que vous souhaitez et la région
-
Récupérez le Publish Profile de la Function pour pouvoir publier le code plus tard
-
Allez dans Visual Studio, dans la partie Function puis dans VisionFunction.cs et insérez la clé et l'endpoint dans le code
-
Faites un clic droit sur le projet et appuyez sur Publish... Ensuite, appuyez sur start et Import Profile. Cherchez après le publish profile que nous avons téléchargé plus tôt
-
Finissez le déploiement de la fonction en appuyant sur Publish
-
Testez votre Azure Function qui s'occupe de communiquer avec Computer Vision avec postman et l'adresse URL que vous trouverez sur Azure. Vous pouvez mettre une url d'image comme sur la photo
-
Dans le Ressource Group, cliquez sur le bouton Add et cherchez Storage Account et configurez le
-
Ensuite, allez dans Containers
Et créez un container 'pictures' en le mettant en acces level 'blob'
-
Créez une shared acces signature et configurer le avec les adresses IPs
-
Mettez de côté le SAS Token pour plus tard
-
Allez dans le Ressource Group et appuyez sur le bouton Add. Ensuite, cherchez web app + sql pour héberger l'API
-
Ensuite, configurez comme sur l'image votre web app + sql
-
Récupérez comme pour la fonction, le publish profile de la web app
-
Ouvrez Visual Studio et allez dans la partie API. Là, ouvrez le appsettings.json et insérez les données demandées: l'adresse de la fonction, la clé pour le blob(SAS Token) ainsi que le l'adresse du blob qui se construit :
https://_lenomdublob_.blob.core.windows.net/pictures
-
Pour la base de données, allez dans Azure, dans la base de données et récupérez la connection string
-
Ensuite, mettez cette connection string dans l'appsettings et modifiez le mot de passe
-
Après avoir mis la connection string, vous pouvez aller dans le package manager console et tapez:
update-databaseAinsi vous mettrez à jour la base de données que vous venez de créer
-
Comme pour la fonction, vous pouvez import le publish profile pour l'API
Et finir par le publier
-
Vous pouvez tester les 2 fonctions de l'API avec Postman et l'url
-
Allez dans le Ressource Group et appuyez sur le bouton Add. Ensuite, chercher après une Web App.
-
Configurer ensuite la web app en mettant le nom, la région et l'App Service Plan
-
Quand vous voyez que tout marche, vous pouvez aller sur Visual Studio Code et allez dans backend.service.ts et mettre dans la définiton de l'endpoint l'url.
-
Après ca, vous pouvez lancer la build de l'application Angular en écrivant ceci dans le terminal:
ng-build --prod
Après que tout ça soit compilé, vous pouvez aller dans l'Azure Tools et trouver votre web app pour l'application Angular. Faites un clic droit dessus et publish. Après ceci, choississez votre dist folder.
