AzureGettingStarted

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

Les programmes à installer

Visual Studio 2019

Télécharger Visual Studio 2019 Lors de l'installation, cochez ASP.NET et développement Web

Visual Studio Code

Télécharger Visual Studio Code Après l'installation, télécharger le plugin Azure Tools dans le market Azure Tools

Postman

Pour tester nos déploiements dans le cloud, nous utiliserons Postman! Télécharger Postman

Architecture

Step by step

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-database
```
Ainsi 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.

micbelgique / AzureGettingStarted