Déployer la landing page de votre équipe Imagine Cup dans Microsoft Azure

Tutoriel

 

Introduction

Le but de cet article est de vous montrer comment il est possible, en quelques étapes simples, de personnaliser et déployer une landing page pour votre équipe Imagine Cup dans Microsoft Azure, à l’aide de Visual Studio Code et Git.

Visual Studio Code est un éditeur de code proposé gratuitement par Microsoft et qui fonctionne sous Windows, Linux et Mac OS, aussi vous pouvez suivre cet article quel que soit l’OS installé sur votre poste de travail !

Prérequis

Pour commencer, vous devez installer Visual Studio Code. Pour cela, rendez-vous sur cette page : https://code.visualstudio.com.

Vous devez également vous assurez d’avoir un compte Microsoft Azure ! La bonne nouvelle étant qu’en tant qu’étudiant, vous pouvez en ouvrir un totalement gratuitement, en suivant la procédure présentée sur cette page.

Enfin, si ce n’est pas déjà fait, vous devez installer Git (pour Linux, Windows ou Mac OS, depuis cette page : http://git-scm.com/download).

Votre environnement de travail étant prêt, vous pouvez démarrer le tutoriel !

Personnalisation de la landing page

Commencez par ouvrir le dossier « Sources » fourni avec ce tutoriel dans Visual Studio Code, à l’aide du menu « File » puis « Open Folder » :

Vous pouvez alors modifier le contenu HTML / CSS et les images directement pour personnaliser la page et l’adapter à vos besoins :

Une fois la personnalisation terminée, vous pouvez passer à l’étape suivante : le déploiement dans Microsoft Azure !

Création d’une application web dans Microsoft Azure

Dans cette partie, vous allez créer une application web depuis le portail Microsoft Azure. Commencez par vous connecter sur http://portal.azure.com et authentifiez-vous avec l’email associé à votre compte Azure.

Cliquez sur le bouton « + Nouveau » en haut à gauche, puis choisissez la catégorie « Web + mobile » et enfin cliquez sur « Application web » :

Vous devez alors renseigner un nom pour votre application et créer un plan de service gratuit, en cliquant sur App Service Plan, puis Nouveau et enfin sur Niveau de tarification :

Validez en cliquant sur le bouton « Créer » et patientez pendant la création de l’application web. Une fois créée, celle-ci s’affiche automatiquement à l’écran :

Et vous pouvez vérifier que celle-ci est bien accessible en cliquant sur disponibles dans les paramètres de bases, en haut de l’écran. Vous devez alors arriver sur une page indiquant que l’application web a bien été créée :

Il ne reste plus qu’à déployer votre page web !

Configuration du déploiement depuis GIT

Il existe différentes méthodes pour déployer un code source dans une application web Microsoft Azure, comme par exemple passer par un serveur FTP, Visual Studio Online, One Drive ou Drop Box ou encore Git. Dans le cadre de ce tutoriel, nous allons utiliser une repository Git local au site web !

Pour le créer, cliquez sur le lien « Déploiement continu » dans les paramètres de l’application web, sur le portail Microsoft Azure :

Cliquez ensuite sur « Configurer les paramètres requis » puis choisissez l’option « Référentiel Git local » :

Validez en cliquant sur OK, puis rendez-vous dans les « Informations d’identification et de déploiement » (lien juste au-dessus de déploiement continu). Entrez un nom d’utilisateur et un mot de passe et validez en cliquant sur le bouton « Enregistrer » :

Retournez sur les propriétés de votre application, et cliquez sur la zone qui indique « Déploiement introuvable » dans la section « Déploiement » :

Vous retrouverez alors l’URL GIT à utiliser pour déployer l’application dans la section suivante.

Déploiement de l’application

Dans Visual Studio Code, cliquez sur le logo GIT  puis sur le bouton « Initialize git repository ».

Ouvrez une ligne de commande dans le dossier de votre application et tapez la commande :

> git remote add azure <URL_GIT_DE_VOTRE_APP>

Dans Visual Studio Code, entrez un message et cliquez sur  pour faire un commit du code en local. Il ne reste qu’à pousser les modifications vers le repository git associé à l’application web tapant la commande :

> git push azure master

Et en entrant votre mot de passe quand il vous sera demandé :

Patientez pendant le déploiement. Une fois celui-ci terminé, rendez-vous dans le portail Microsoft Azure, sur les propriétés de l’application web.

Vous devez voir le déploiement actif associé au dernier commit :

Si vous parcourez l’application, vous verrez que la landing page Azure a été remplacée par celle de votre équipe !

Vous avez des questions concernant cet article ou Microsoft Azure en général ? N’hésitez pas à me contacter sur Twitter @jcorioland