Déployer une page web « Hello World » dans Bluemix

Construire une petite application pour déployer sa page Web sur le cloud d'IBM

Lauren Schaefer

Traducteur

Guillaume SIGUI

Les développeurs créent parfois des applications simples et drôles pour démarrer leur prise en main de Bluemix. Et pourtant, bien souvent, une simple page « Hello World » suffit pour cela.

Vous pouvez commenter ce tutoriel sur le forum dédié Bluemix : Commentez

- Titre : Déployer une page web « Hello World » dans Bluemix

- Auteur : Lauren Schaefer

- Traducteur : Guillaume SIGUI

- Parution : 8 décembre 2015

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2015 IBM. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Introduction

- II. Déploiement avec l'application existante d'IBM

- III. De quoi avez-vous besoin pour votre application ?

- IV. Création et déploiement de l'application

- IV-A. Étape 1 : créer un projet pour votre application

- IV-B. Étape 2 : créer une simple page Web

- IV-C. Étape 3 : créer un manifest

- IV-D. Étape 4 : déployer et exécuter l'application

- V. Conclusion et perspectives

I - Introduction

Dans ce tutoriel, nous allons apprendre à créer une simple application « Hello World » pour déployer sa page Web sur la plateforme cloud IBM Bluemix en n'utilisant que du HTML et un fichier statique buildpack, hébergé sur GitHub. Le fichier buildpack contient des scripts du framework et/ou d'exécution nécessaires à Bluemix pour exécuter votre application.

Nous allons voir, dans ce cours, comment créer cette application, et le code qu'il faut.

II - Déploiement avec l'application existante d'IBM

Pour une prise en main ultrarapide, vous pouvez simplement déployer votre application précompilée sur la plateforme Bluemix.

À partir de là, vous pouvez modifier et redéployer votre code comme vous le voulez.

Sinon, il est également possible de parcourir en mode lecture seule, le code de l'application qui crée la page « Hello Word ». Vous pouvez alors créer un fork, le modifier et le déployer comme vous voulez.

III - De quoi avez-vous besoin pour votre application ?

- Un compte Bluemix : vous pouvez vous connecter ou créer un nouveau compte pour une période d'essai sur le site officiel ; ce compte vous donne également accès à la plateforme  IBM Bluemix DevOps Services (le même ID IBM est valable sur les deux plateformes) ;

- Les dernières versions de Chrome, Firefox, Internet Explorer, ou Safari.

IV - Création et déploiement de l'application

Les différentes étapes de création de votre page Web à partir d'une nouvelle application se présentent comme suit :

- Étape 1 : créer un projet pour votre application ;

- Étape 2 : créer une simple page Web ;

- Étape 3 : créer un manifest ;

- Étape 4 : déployer et exécuter l'application.

IV-A - Étape 1 : créer un projet pour votre application

Le projet sera hébergé sur IBM Bluemix DevOps Services.

Pour cette première étape, vous devez suivre le cheminement suivant :

1. Se connecter avec votre compte sur IBM Bluemix DevOps Services ;

2. Dans le menu, en haut de la page, cliquer sur « My Projects » ;

3. Cliquer sur « CREATE PROJECT » pour créer votre nouveau projet ;

4. Sur la page « Create a project », renseigner les différents champs avec les informations suivantes :

1. Saisir le nom de votre projet,

2. Choisir l'option de la source de contrôle (je préfère utiliser le repository de Git),

3. Cocher la case « Make this a Bluemix Project »,

4. Cliquer sur « CREATE ».

:

IV-B - Étape 2 : créer une simple page Web

Après avoir créé votre projet, il est temps de coder. Dans cet exemple, nous allons dire « Hello » (Bonjour) au monde via notre page web. Vous pouvez directement coder dans l'éditeur Web présenté dans votre navigateur.

1. Cliquer sur le bouton « EDIT CODE », dans la page d'aperçu du projet. L'éditeur Web s'ouvre, de petits fichiers tels que Licence.txt, project.json et README.md sont créés automatiquement.

2. Sélectionner, « File > New > File. », dans l'éditeur Web.

3. Le nom du fichier est surligné donc vous pouvez le modifier. Saisir « index.html ».

4. Copier le code ci-dessous et le coller dans l'éditeur Web :

index.html

<html>
<body>
Hello, Bluemix World!
</body>
</html>

IV-C - Étape 3 : créer un manifest

Un manifest est un fichier qui indique à Bluemix, comment déployer l'application.

Il est possible de déployer une application avec l'assistant de configuration de lancement de l'éditeur Web, sans créer de manifest. Mais, dans notre cas, nous allons créer un fichier manifest très simple, avec lequel votre application pourra être déployée via l'éditeur Web ou l'utilitaire de ligne de commande CF.

1. Sélectionner, « File > New > File. », dans l'éditeur Web.

2. Le nom du fichier est surligné donc vous pouvez le modifier, saisir « manifest.yml ».

3. Copier le code ci-dessous et le coller dans la fenêtre d'édition de l'éditeur Web :

manifest.yml

applications:
- buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
host: helloworld-html-${random-word}
name: helloworld-html
memory: 64M
stack: cflinuxfs2

4. Le paramètre host désigne l'URL de votre application. C'est une valeur qui doit être unique sur toute la plateforme Bluemix. Vous pouvez donc remplacer {random-word} avec une valeur unique telle que vos initiales.
Chaque ligne du fichier manifest fournit des instructions importantes à Bluemix sur comment déployer votre application.

5. Lire aussi « Deploying with Application Manifests ».

- Le paramètre buildpack contient les scripts de configuration de framework et d'exécution nécessaires à Bluemix pour exécuter votre application. Pour cette application, nous utilisons le fichier statique buildpack, hébergé sur GitHub.

- Le paramètre host indique l'URL de votre application. L'URL choisie doit être sur toute la plateforme Bluemix. Dans ce tutoriel, nous avons ajouté le mot clé ${random-word}, pour que l'URL qui sera générée soit unique pour chaque personne qui suit ce cours. Vous pouvez personnaliser ce paramètre avec la valeur que vous souhaitez.

- Le paramètre memory représente la taille de la mémoire allouée à votre application dans votre environnement Bluemix. Ce n'est pas un paramètre requis dans le fichier manifest, mais nous l'indiquons dans cet exemple pour vous montrer comment limiter la consommation de la mémoire par une application, dans votre environnement Bluemix.

- Le paramètre stack est défini par Cloud Foundry comme « un système de fichiers root en prédéfini (rootfs) qui opère en tandem avec le buildpack pour permettre l'exécution des applications». Le fichier statique buildpack que nous utilisons requiert le système de fichiers cflinuxfs2 comme stack. Par défaut, Bluemix utilise un ancien système de fichiers. Il est donc important de spécifier la valeur cflinuxfs2 au paramètre stack. Plusieurs buildpacks n'ont pas besoin d'un stack spécifique.

IV-D - Étape 4 : déployer et exécuter l'application

Maintenant que votre page Web et votre manifest sont créés, vous êtes prêt pour le déploiement.

1. Dans l'éditeur Web, cliquer sur le bouton « Deploy ».

2. Votre application est maintenant déployée dans Bluemix. Le processus prend environ une minute, pour s'exécuter. Vous saurez que l'application est bien déployée, lorsque vous voyez le bouton gris devenir vert :

3. Une fois que votre application est déployée, ouvrez-la à partir de l'éditeur Web en cliquant sur « Open the application ».

Félicitations! Votre application est maintenant envoyée dans le merveilleux monde de Bluemix.

V - Conclusion et perspectives

Dans ce tutoriel, nous avons créé une simple page Web « Hello World », en créant un projet avec les services DevOps ; puis les fichiers index.html et manifest.yml ; et puis nous avons déployé l'application dans Bluemix. Vous pouvez continuer à améliorer cette application, en modifiant le fichier index.html ou en créant de nouvelles pages Web, que vous pouvez ensuite déployer dans Bluemix.

Allez plus profondément dans l'utilisation des services DevOps, en planifiant et en organisant le développement de votre application. Vous pouvez aussi commencer à déployer des applications dynamiques en intégrant les services Bluemix dans vos applications. Par exemple, le service Personality Insights Node.js Web Starter est intéressant si vous voulez intégrer une analyse automatique des mails de vos collègues.