Déploiement d’un projet Angular 4 sur Azure via FTP

Brouillon

À venir

0 commentaire

image

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 :

clip_image002

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.

clip_image004

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.

clip_image006

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.

clip_image008

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.

clip_image010

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.

clip_image012

 

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.

clip_image014

 

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 !

Patrick-André Marendat

Féru d’informatique depuis son plus jeune âge, Patrick-André est diplômé de l’ISEP. Il est passionné par les nouvelles technologies et la musique.

Profil de l'auteur