Aujourd’hui nous allons voir comment publier simplement sur Azure une application Angular 4 développée avec Visual Studio Code. Azure propose une option FTP afin de déployer n’importe quel site Web standard. Nous allons donc étudier cette possibilité en partant du modèle de base de site Angular 4.
Avant de commencer, assurez-vous d’avoir les prérequis suivants :
– Disposer d’un compte Azure (un compte de découverte fera tout à fait l’affaire).
– Avoir Visual Studio Code (plus pratique pour travailler sur une solution Angular 4).
– Avoir un client FTP (personnellement j’utilise FileZilla).
Création du projet de base Angular 4
Ouvrez Visual Studio Code et affichez le terminal en appuyant sur Ctrl+ù ou via la barre de menu.
Installez Angular CLI en tapant cette ligne de commande :
npm install -g @angular/cli Créez votre nouveau projet Angular en tapant cette ligne de commande :
ng new tuto-angular-azure Sélectionnez le dossier nouvellement créé en tapant cette commande :
cd tuto-angular-azure Générez votre site et affichez-le en tapant la commande :
ng serve --open Vous devriez voir ceci :
C’est le site que nous allons publier sur Azure. Pour ce faire il faut générer un ensemble de fichiers JavaScript pour pouvoir les envoyer via FTP et qu’ils soient exécutés sur notre serveur Web.
Afin de générer ces fichiers, tapez la commande suivante :
ng build prod Les fichiers nouvellement créés sont maintenant disponibles dans le sous-dossier « dist » de votre projet.
Il n’y a plus rien à faire côté Visual Studio Code ou Angular.
Nous allons maintenant voir comment paramétrer Azure pour accueillir notre site.
Paramétrage d’Azure
Dans un premier temps, il faut créer une application Web sur Azure.
Il faut ensuite aller dans le menu « Informations d’identification du déploiement » et y renseigner vos identifiants et mot de passe. C’est à vous de choisir les deux et d’enregistrer les modifications pour qu’elles soient prises en compte par Azure.
Vous pouvez maintenant aller dans la vue d’ensemble de votre application Web et y repérer trois informations
– L’URL de votre site qui nous servira pour valider notre déploiement (en rose).
– Le nom d’utilisateur FTP qui nous permettra de nous identifier avec notre client FTP (en bleu).
– Le nom du serveur FTP vers lequel nous allons envoyer nos fichiers (en vert).
Petite astuce, ces informations étant relativement compliquées à recopier sans se tromper, il y a en bout de chaque ligne une icône pour copier la valeur qui apparaît quand on la survole.
Il n’y a plus rien à faire sur Azure et il nous reste à utiliser notre client FTP pour déployer notre site.
Déploiement via FTP
Ouvrez votre client FTP et renseignez les différents paramètres qui sont tous disponibles sur la vue d’ensemble de votre site, sauf le mot de passe qui est celui que vous avez renseigné lors du paramétrage dans Azure.
Une fois connecté via FTP, vous devez vous rendre dans le dossier « /site/wwwroot » et y téléverser la totalité des fichiers présents dans votre dossier « dist » local.
Vérification finale
Une fois cette opération terminée, il ne reste plus qu’à vérifier que le site est bien déployé en allant sur l’url Azure.
Nous y sommes, notre site Angular 4 est déployé sur Azure et est accessible grâce à l’URL présente sur le portail Azure.
Nous avons vu comment déployer très simplement une application Angular 4 sur Azure via FTP.
Ce mode déploiement peut évidemment s’étendre à n’importe quel type de site Web.
A vous maintenant de déployer votre propre site Angular 4 sur Azure via FTP !
