Ils “poussent” leur code, nous le déployons, tout en assurant la mise à jour et la mise en sécurité de l’environnement dans lequel ils fonctionnent avec un objectif : le maintien en conditions opérationnelles. Quelle que soit la situation, leur service répond.

Penser des services simples, robustes et innovants

Nous le faisons en garantissant une empreinte minimale au sein de nos serveurs, en proposant une mise à l’échelle horizontale/verticale à la demande ou automatique. Nous pouvons ainsi multiplier les instances ou les faire grossir/réduire selon la charge de vos sites. Cette volonté de simplicité va au-delà des applications, puisque nous disposons également d’une large offre de base de données (BDD) “as-a-service” vous permettant de déployer en quelques secondes des environnements MongoDB, MySQL, PostgreSQL ou Redis, avec les mêmes outils et garanties.

Ces dernières années, nous faisions néanmoins face à des demandes récurrentes : outre la volonté de certains de nos clients d’avoir accès à d’autres solutions, ils nous demandaient régulièrement de disposer des avantages de notre infrastructure répartie sur trois datacenters afin d’obtenir des services à haute disponibilité. Mais dans le domaine des BDD, cela n'est pas toujours simple à mettre en place tout en assurant un bon niveau d’automatisation et la cohérence des données. Nous avons donc décidé de développer notre propre gamme de produits pour y parvenir.

Le projet “Materia” était né, reposant sur le moteur transactionnel open source FoundationDB, utilisé, par exemple, par Apple pour ses services iCloud ainsi que par Snowflake. Nous y contribuons et l’adaptons à nos besoins, tout en profitant de son aspect distribué et résilient, notamment du fait de son importante capacité de simulation. Il nous permet d’imaginer un univers entier de solutions serverless, très simples d’usage, facturées à l'usage, avec des couches de comptabilité que nous développons pour permettre à nos clients de lui “parler” en utilisant des protocoles existants  tels que DynamoDB, GraphQL ou PostgreSQL par exemple.

Materia KV accessible à tous

Nous avons commencé par le protocole Redis, afin de mettre en place Materia KV, actuellement en phase de test Alpha. Il s’agit d’une base de données clé-valeur répliquée de manière synchrone sur nos trois datacenters parisiens. Lorsque nos serveurs vous répondent, c’est que votre donnée à été écrite trois fois. Surtout, elle est très simple d’usage : rendez-vous dans notre Console, créez un add-on Materia KV, vous obtiendrez instantanément un jeton (token) utilisable avec n’importe quel client Redis ou même en envoyant des commandes à nos serveurs directement via le protocole TCP.

Ainsi, vous pouvez dès maintenant bénéficier d’une solution pour stocker vos données sous la forme de clé-valeur, en haute disponibilité, sans avoir la moindre instance à configurer, sans tarification minimale mensuelle : vous payerez simplement ce que vous consommez. Surtout, nous assurons ce service en compatibilité avec des protocoles existants. Aujourd’hui Redis, demain DynamoDB et GraphQL. La liste des commandes supportées est disponible ici.

Lancée à Devoxx France mi-avril, Materia KV a fait forte impression sur place et lors de nos démonstrations depuis. Nous avons donc décidé de la rendre accessible à tous afin de permettre à l’ensemble de nos clients et des curieux de nous faire part de leurs retours sur son fonctionnement et de leurs besoins. Si la facturation se fera à l’usage à partir de la phase de Beta, pour le moment, c’est gratuit ! N’hésitez pas à tester et à nous donner votre avis.

Déjà intégré à nos outils et interfaces

Materia KV est bien entendu accessible via un addon-provider au sein de notre API, Terraform (ou OpenTofu par exemple), mais aussi de notre CLI, les Clever Tools. Pour créer un jeton d’accès il suffit de lancer la commande suivante :

clever addon create kv NAME

Cet add-on pourra être lié directement à une application Clever Cloud où ses variables d’environnement seront injectées. Mais vous pouvez également l’utiliser depuis n’importe quel service tiers, un client en ligne de commande (CLI) ou avec interface graphique (GUI).

Alors que le développement de Materia KV et de ses différentes interfaces va se faire sur la durée, nous avons commencé à réfléchir à son intégration au sein des Clever Tools. Ainsi, une branche de test, disponible sous la forme de binaires et documentée, propose une commande clever kv.

Avec elle, vous pouvez directement envoyer des requêtes à Materia KV en ayant la variable d’environnement configurée localement, ou en indiquant un ID dans vos commandes :

# With Bash and Zsh
source <(clever addon env ADDON_ID --export)
# With Fish
clever addon env ADDON_ID --export | source

clever kv PING # PONG
clever kv set yourKey theValue
clever kv get yourKey

Comme cette version de démonstration ne gère pas l’ensemble des commandes gérées par Materia KV, vous pouvez lui envoyer une commande “brute”, elle vous renverra alors la réponse :

clever kv redis_raw 'hset key field1 value1 field2 value2' # 2
clever kv redis_raw 'hget key field2'                      # value2
clever kv redis_raw 'hgetall key'                          # the full hash

Pour démontrer les possibilités d’une telle intégration, vous avez également la possibilité de faire directement des requêtes sur un objet JSON stocké dans une clé :

clever kv set simpleJson '{"key": "value"}' # the set data
clever kv getJson simpleJson key            # value
clever kv set jsonKey '[{"key": "value"}, {"bigKey": {"subKey1": "subValue1","subKey2": "subValue2"}}]'
clever kv getjson jsonKey bigKey.subKey2    # subValue1
clever kv getjson jsonKey ''                # the full JSON

Pour montrer à quel point de telles intégrations sont simples, nous avons mis à votre disposition un client Materia KV écrit en Go en utilisant Go-Redis. Si vous souhaitez plutôt comprendre comment vous pouvez envoyer des commandes et recevoir des réponses de Materia KV directement en TCP, vous trouverez des exemples, en V ou en Ruby.

N’hésitez pas à proposer les vôtres et à nous le faire savoir ;)

Une démonstration sur Twitch de Materia KV, un espace communautaire

Envie d’en savoir plus ? Horacio González, notre DevRel en chef, fera une démonstration sur Twitch mardi 18 juin à 13h15. Pierre Zemb, créateur de Materia chez Clever Cloud, échangera également avec notre CTO Steven Le Roux dans une vidéo publiée fin juin sur la chaîne YouTube de Clever Cloud.

Et pour nous faire part de votre avis, de vos questions et de vos besoins, rendez-vous sur la section dédiée à Materia de notre espace communautaire GitHub.

L’objectif de Clever Cloud a toujours été de fournir à ses clients un moyen rapide et simple de déployer des applications, en se basant sur les outils les plus standards possible.

Votre partenaire pour un hébergement efficace

Ils peuvent également bénéficier de nos capacités de mise à l'échelle horizontale et verticale pour s'assurer que les ressources sont allouées au plus près de leur charge, automatiquement si nécessaire, facturées à la seconde.

Tout cela peut se faire depuis notre propre infrastructure dense à Paris ou depuis les datacenters de nos partenaires tels qu'OVHcloud et Scaleway. Ainsi, vous pouvez vous assurer que vous réduisez vos besoins en ressources informatiques, by design.

Mais certains recherchent des solutions encore plus efficaces pour leurs sites web. Ces dernières années, une tendance est apparue pour répondre à cette demande : les générateurs de sites statiques (SSG).

Bien entendu, vous pouvez les déployer sur Clever Cloud !

Déployez n’importe quel site statique sur Clever Cloud

Ils nécessitent très peu de ressources car ils ne s'appuient pas sur une couche logicielle complexe : pas de base de données ou de calculs côté serveur une fois déployés. Dans la plupart des cas, il s'agit simplement de HTML, CSS et JavaScript côté client, générés à partir d'un contenu Markdown, avec un thème/modèle appliqué.

Il existe de nombreux SSG open source sur le marché que vous pouvez utiliser pour des blogs, de la documentation ou des sites marketing par exemple. Nous pouvons les générer pour vous puis déployer et servir leurs fichiers: vous n'aurez besoin ni de GitHub actions ni d'autre CI/CD externe.

Pour vous aider dans cette démarche, nous avons publié des tutoriels avec des exemples sur la manière de déployer un site web statique à l'aide d’Astro, Docusaurus, Eleventy (11ty), Hexo, Hugo, Lume (Deno), MkDocs, mdBook ou Nuxt.

• Nos guides pour déployer des sites statiques sur Clever Cloud

Mais d'autres sont également compatibles ! Vous voulez plus de guides ou de l'aide sur d'autres SSG ? Remplissez simplement une issue : notre documentation est open source, statique, basée sur Hugo avec le thème Hextra. Vous pouvez même y contribuer ;)

Triste nouvelle pour les détracteurs de WordPress : vous pouvez l'installer facilement sur Clever Cloud avec une structure de fichiers sécurisée et moderne, grâce aux outils dont nous allons vous parler dans ce post.

Dans ce billet, nous ne vous montrons pas seulement comment déployer un WordPress chez Clever Cloud, mais aussi comment le faire en utilisant Git, pour celles et ceux qui n'ont jamais franchi le pas de son utilisation. On vous explique la procédure étape par étape, si vous avez envie de vous lancer. Si vous n'en avez pas envie, il reste toujours l'intégration GitHub.

Éléments requis pour l'installation :

• Un compte Clever Cloud
• Le Composer de Bedrock pour déployer WordPress avec Clever Cloud, mis à jour par nos soins.
• Un compte GitHub si vous déployez le code avec l'intégration GitHub sur Clever Cloud, ou Git sur votre ordinateur si vous optez pour cette méthode.

Déploiement et configuration de WordPress

On va déployer WordPress en quelques minutes, en utilisant Composer, qui configurera une structure rapide, légère et sécurisée à notre site. Tout ce qu'on aime. 

Suivez les instructions ci-dessous : 

1. Récupérer le code

Pour récupérer le code, vous devez d'abord vous rendre dans son dépôt public. Allez sur notre dépôt "WordPress + Bedrock" . Ce dépôt contient la structure d'un Wordpress compatible avec Composer. Vous pouvez le copier de deux façons : depuis GitHub (l'option la plus simple si vous n'êtes pas à l'aise avec les commandes du terminal) ou avec Git.

Même si vous n'êtes pas familiarisés avec les commandes du terminal et Git, nous profitons de cet article pour vous y initier. Pas d'inquiétude, vous pourrez utiliser cette méthode en suivant nos instructions, si vous ne souhaitez pas passer par GitHub.

Option A : Utiliser GitHub

Si vous n'êtes pas à l'aise avec Git, ou le Terminal tout court, vous pouvez créer un fork et déployer depuis GitHub sur la console. Pour cela, créez un fork, ce qui dupliquera le dépôt vers votre compte GitHub.

Ouvrez les paramètres de la Console Clever Cloud, cliquez sur "Profil" et connectez votre compte GitHub à votre compte Clever Cloud, si vous ne l'avez pas fait. C'est tout, passez directement à l'étape 2.

Option B : Utiliser Git, pas à pas

L'autre option consiste à télécharger le code sur votre ordinateur, donc en local. Si vous ne l'avez jamais fait, voici des instructions simples et adaptées aux débutants.

Set up

Avant de se lancer, il vous faut autoriser votre machine à déployer sur votre compte Clever Cloud. Si vous ne l'avez pas fait, il faudra créer et ajouter une clé SSH à votre console. Si vous avez déjà réalisé cette étape, passez directement à la suite.

Ouvrez votre Terminal, puis :

1. tapez ssh-keygen -t ed25519 -C "[votre@email.ici]` le mail doit être le même que celui que vous avez connecté à Clever Cloud.
2. Quand le terminal vous demande dans quel fichier vous souhaitez ajouter la clé, tapez simplement "Enter"
3. Ajoutez un mot de passe
4. Copier le contenu de votre clé nouvellement créée avec la commande pbcopy < ~/.ssh/id_[rsa].pub (remplacez le [rsa] par l'identifiant de votre clé, bien évidement)
5. Ouvre la Console Clever Cloud, allez dans Profil > Clés SSH, "Ajouter" et collez le contenu.

Votre machine est à présent connectée à la Console et prête à envoyer du code vers Clever Cloud.

Cloner le code

1. Créez un dossier sites sur votre ordinateur. Il hébergera vos applications et vos sites.
2. Ouvrez votre terminal et tapez cd sites, cela ouvrira votre dossier nouvellement créé.
3. Toujours dans le terminal, tapez git clone git@github.com:CleverCloud/clever-wordpress.git'

Le dépôt a été téléchargé sur votre ordinateur ! Si vous ouvrez votre dossier sites, vous constaterez un nouveau dossier à l'intérieur, nommé clever-wordpress. Ouvrez ce dossier (cd clever-wordpress) et tapez ls -a : vous verrez apparaître tous les dossiers et fichiers contenus dedans.

Si vous venez d'être initié à Git à travers cet article, nous vous conseillons de suivre les explications et tutos de notre collègue David Legrand.

2. Créer l'application sur Clever Cloud

Accédez à la Console Clever Cloud, cliquez sur "Créer", puis "Une application". Si vous utilisez l'intégration GitHub, vous pouvez créer une nouvelle application PHP en choisissant votre fork. Le code sera lancé depuis votre dépôt GitHub, vous n'aurez rien à faire. Si vous utilisez git, il faudra entrer une simple ligne de commande pour réviser la même action.

La Console va vous proposer d'ajouter un adon, sélectionnez une base de données MySQL et poursuivez.

Editez les variables d'environnement de l'application PHP en mode expert et collez les salts d'environnement produits sur cette page (n'oubliez pas de sauvegarder vos modifications)

6. Ajoutez 3 variables supplémentaires :
   • WP_ENV avec la valeur production
   • WP_HOME avec la valeur https://yourdomain.tld
   • WP_SITEURL avec la valeur https://your-domain.tld/wp

Sauf si vous avez choisi l'intégration GitHub, la Console vous fournit les lignes de commandes à copier-coller dans votre terminal pour lancer votre code vers votre instance. Une fois cette action effectuée, le déploiement se lancera.

Pendant le déploiement de l'application, créez un addon de stockage S3 Cellar et liez-le à votre application (cliquez sur votre application PHP, puis choisissez "Services Liés" pour la connecter au Cellar). 

Sur la page de configuration du Cellar, créez un bucket et donnez-lui un nom.

Revenez à la configuration de votre application et ajoutez la variable d'environnement suivante :

CELLAR_ADDON_BUCKET avec le nom du bucket comme valeur.

Astuce : vous pouvez facilement obtenir un nom de domaine personnalisé sur votre bucket. Consultez la doc pour savoir comment le configurer.

Redémarrez votre application pour que les modifications soient prises en compte.  
N'oubliez pas de configurer votre nom de domaine pour WP_HOME (ou un sous-domaine .cleverapps.io à des fins de test). 

La page d'installation de WordPress se chargera alors. Configurez votre Wordpress (vous trouverez les informations de la base de données dans la Console, soit en cliquant sur lardon, soit dans l'onglet "Variables d'environnement" de votre appli). Une fois dans le tableau de Wordpress, allez sur votre page de plugins et activez le plugin S3 Uploads.

C'est tout. Vous avez maintenant un WordPress hébergé chez Clever Cloud. Vos fichiers et médias seront stockés dans le Cellar.

Ajouter un plugin avec une seule ligne de code

Le fichier composer.json se charge de refléter le répertoire des plugins de WordPress ; il vous suffit donc de spécifier ce qui doit être reflété. Vous n'avez pas besoin du répertoire des plugins dans votre tableau de bord WordPress pour les ajouter à votre nouveau site. Vous utiliserez Wpackagist pour localiser et ajouter manuellement les références du plugin au fichier composer.json.

Localisez require , c'est ici que se trouvent les plugins :  

"require": 
//Here are your further plugins declarations. Add this line wherever you'd like (update the version if necessary)
"wpackagist-plugin/[plugin]": "[version]",

Vous pouvez trouver vos plugins sur Wpackagist pour les ajouter également dans le fichier. Validez les changements (avec Git : git add .  et git commit -m "un-message"), poussez-les vers Clever Cloud et attendez que l'application soit redéployée avec les modifications. Vous pourrez ensuite les activer depuis votre tableau de bord WordPress.

Bienvenue à bord !

Depuis l'année dernière, OpenAI est sur le devant de la scène avec ses larges modèles de langage (LLM), notamment GPT-3.5 et GPT-4, accessibles via son service ChatGPT. Mais ils sont également proposés sous la forme d'une API, que vous pouvez utiliser dans vos applications. Voici un exemple de la manière d'en profiter sur Clever Cloud.

Nous nous baserons sur le projet open source chat-wtf, créé par Unconventional Coding qui a détaillé les différentes étapes de sa conception dans une série de vidéos. Il se repose principalement sur le langage PHP et un stockage des données via des sessions, SQLite ou MySQL, au choix de l'utilisateur.

Un ChatGPT open source, utilisable à la demande

Il nécessite d'utiliser l'API d'OpenAI, mais vous pouvez lui préférer des modèles compatibles si vous êtes plus aventureux. Le fichier de paramètres permet également de préciser un « message système ». Ainsi, vous pouvez fournir à l'IA des informations sur vous ou vos attentes, qu'elle devra prendre en compte dans ses réponses.

Cette application PHP n'a pas été développée d'une manière spécifique pour Clever Cloud, mais vous pouvez l'héberger dans nos infrastructures en quelques minutes, la configurer selon vos besoins, l'arrêter et le démarrer à la demande. On vous explique comment faire.

• Créer un compte Clever Cloud (et obtenir 20 euros de crédits)

Pour commencer, vous devrez disposer d'un compte Clever Cloud, ainsi que d'une clé d'API OpenAI. Vous pouvez créer l'application et suivre ce guide en utilisant notre interface web, la Console, mais aussi à travers notre CLI open source : Clever Tools. C'est ce que nous ferons ci-dessous.

Récupération du code et configuration

Nous partirons ainsi du principe que vous disposez d’une machine avec git et Node.js dans une version récente. Si vous n’avez pas encore installé les Clever Tools sur votre système, tapez (avec les droits administrateur de votre système ou sudo si nécessaire) :

npm i -g clever-tools
clever login

Une fois connecté, vous pourrez vérifier que tout s’est bien passé avec la commande suivante :

clever profile

Ensuite, vous pourrez créer un fork de chat-wtf pouvant être déployé sur Clever Cloud depuis votre compte GitHub. Dans cet exemple, nous allons cloner le dépôt localement et y créer une application Clever Cloud. Un remote nécessaire à son déploiement sera automatiquement ajouté :

git clone https://github.com/unconv/chat-wtf.git && cd chat-wtf
clever create -t php chat-wtf

Ainsi, vous disposez d'une copie locale de la dernière version de l'application chat-wtf, que vous pouvez configurer selon votre besoin. Renommez le fichier settings.sample.php en settings.php. Nous allons opérer des modifications mineures pour commencer.

Placez-y le contenu suivant afin d'utiliser des variables d'environnement :

<?php
return [
    "api_key" => getenv("OPENAI_API_KEY"),
    "system_message" => getenv("SYSTEM_MESSAGE"),
    "model" => "gpt-3.5-turbo",
    "base_uri" => "",
    "storage_type" => "session",
];

Éditez le fichier .gitignore afin d'en retirer settings.php pour qu'il puisse être déployé avec votre application. Celle-ci étant configurée, il ne reste plus qu'à indiquer les variables d'environnement nécessaires à son bon fonctionnement, puis à la déployer. Notez que PHP 8.x est requis. Nous utiliserons la branche 8.2 :

clever env set CC_PHP_VERSION "8.2"
clever env set OPENAI_API_KEY "Votre clé d'API OpenAI"
clever env set SYSTEM_MESSAGE "Votre message système"
git add . && git commit -m "First deploy"
clever deploy && clever open

Une fois les variables d'environnement ajoutées, nous effectuons un simple Git Push. L'application est alors déployée sur Clever Cloud, une archive est créée afin de faciliter son redéploiement, puis elle est ouverte dans votre navigateur si tout s'est bien passé :

Comme pour toute application hébergée au sein de notre service, vous pouvez lui attribuer simplement un domaine qui bénéficiera de notre load balancer Sōzu et d'un certificat Let's Encrypt, connaître son statut et son activité, l'arrêter ou la redémarrer.

Vous disposez dans la Console de métriques et d'un accès à un dashboard Grafana afin de suivre son état. Vous pouvez également adapter la taille de l' instance ou activer l'auto-scalabiilté pour répondre à différents niveaux de charge :

clever console

clever domain
clever domain add domain.tld

clever status
clever activity

clever scale --min-instances 1 --max-instances 4 --min-flavor pico --max-flavor M
clever scale --instances 1 --flavor pico

clever restart
clever stop

Ajoutons une base de données à notre instance chat-wtf

Comme indiqué précédemment, ce projet peut stocker ses données au sein de sessions PHP, mais également via SQLite ou MySQL. Dans cet exemple, nous opterons pour la dernière solution afin de vous montrer comment procéder, là aussi de manière très simple.

Tout d'abord créons une base de données (BDD) MySQL au sein de votre compte Clever Cloud en la liant directement à votre application. Par défaut il s'agit d'une instance DEV, partagée et gratuite, mais vous pouvez demander un plan de taille supérieure si vous le désirez :

clever addon create mysql-addon chat-wtf-mysql --link chat-wtf

Ce « lien » permet d'injecter directement les paramètres de connexion dans l'application via des variables d'environnement. Elles sont visibles dans la Console ou via les Clever Tools :

clever env

Ainsi, il suffit de modifier le fichier settings.php comme suit pour l'utiliser :

    "storage_type" => "sql",
    "db" => [
        "dsn" => "mysql:host=" . getenv('MYSQL_ADDON_HOST') . ";
                    port=" . getenv('MYSQL_ADDON_PORT') . ";
                    dbname=" . getenv('MYSQL_ADDON_DB'),
        "username" => getenv('MYSQL_ADDON_USER'),
        "password" => getenv('MYSQL_ADDON_PASSWORD'),
    ],

Rendez-vous ensuite dans le dashboard de cette base MySQL, accessible via la Console. Vous y trouverez un lien vers son interface PHPMyAdmin. En cliquant sur le nom de la base de données dans le menu de gauche vous trouverez la fonction d'import. Elle vous permettra d'initier la structure de la BDD en y important le fichier mysql.sql qui se trouve dans le dossier db du dépôt. Indiquez son emplacement, cliquez sur « Importer ». Ce sera fait :

Vous pouvez également le faire via un script Shell qui vérifie si la base de données est vide, et importe les données par défaut si nécessaire. Créez un fichier nommé init.sh contenant ce code :

SSE="SELECT COUNT(*) FROM information_schema.tables WHERE table_schema='$MYSQL_ADDON_DB';"
PARAMS="-u $MYSQL_ADDON_USER -h $MYSQL_ADDON_HOST -P $MYSQL_ADDON_PORT -D $MYSQL_ADDON_DB"

TABLE_COUNT=$(MYSQL_PWD=$MYSQL_ADDON_PASSWORD mysql $PARAMS -sse"$SSE")

if [ "$TABLE_COUNT" -eq 0 ]; then
  echo "Database is empty, we fill it with the default data."
  MYSQL_PWD=$MYSQL_ADDON_PASSWORD mysql $PARAMS < db/mysql.sql 
  
else
  echo "Database contains $TABLE_COUNT tables."
fi

rm init.sh

Vous devrez le lancer lors du déploiement de l'application :

clever env set CC_PRE_BUILD_HOOK "bash init.sh"

Vous n'avez alors plus qu'à redéployer votre application qui utilisera désormais la base de données MySQL pour stocker ses données plutôt que les sessions PHP :

git add settings.php && git commit -m "Add MySQL support"
clever deploy && clever open

Si jamais cela ne fonctionne pas, regardez les erreurs dans les logs de votre instance dans la Console ou via :

clever logs

Envie d'en savoir plus ?

Pour découvrir plus en détails l'hébergement d'applications PHP sur Clever Cloud ou nos services de bases de données managées ? Venez nous rencontrer au PHP Forum qui se tient du 12 au 13 octobre à Disneyland Paris. Nous serons également présents à Devoxx Maroc et à Volcamp :

• C'est la rentrée des évènements pour Clever Cloud

Cela fait plus d’un an maintenant que Jarred Sumner et son équipe travaillent à un nouveau runtime JavaScript open source : Bun. Il est présenté comme plus performant et plus complet que les solutions actuelles telles que Node.js ou Deno. Sa version 1.0.3 vient de sortir, vous pouvez d’ores et déjà l’utiliser pour vos projets hébergés par Clever Cloud.

Car si nous aimons tout automatiser et simplifier pour nos clients, nous le faisons en leur laissant la plus grande liberté possible. Ainsi, héberger une application Node.js avec le framework ou le gestionnaire de paquets de votre choix se fait déjà sans contraintes particulières, et déployer un site ne prend que quelques minutes.

Nous supportons déjà Deno, Meteor.js, yarn. Si pour Bun, la décision n’a pas encore été prise de l’intégrer nativement à nos images, dans l’attente des premiers retours de nos clients, cela se fait très simplement.

Hello, Bun sur Clever Cloud !

Envie d’essayer ? Il vous suffit d’avoir un compte Clever Cloud ou d’en créer un depuis une adresse e-mail ou un compte GitHub. 20 euros de crédits vous seront offerts lors de votre inscription.

• Créer un compte Clever Cloud (et obtenir 20 euros de crédits)

Pour notre premier exemple, nous partirons du principe que vous disposez d’une machine avec git et Node.js dans une version récente. Si vous n’avez pas encore installé notre interface open source en ligne de commande (CLI) Clever Tools, tapez (avec les droits administrateur de votre système ou sudo si nécessaire) :

npm i -g clever-tools
clever login

Une fois connecté, vous pourrez vérifier que tout s’est bien passé avec la commande suivante :

clever profile

Installons Bun et créons une première application :

npm install -g bun
mkdir clevbun && cd clevbun
bun init -y && git init

Cela va vous créer un dépôt git local et toute une série de fichiers, dont package.json qui contient la configuration de votre projet. Mais également index.ts et ts.config.json qui sont propres au langage TypeScript utilisé par défaut par Bun. N'ayez crainte, celui-ci gère tout aussi bien de simples fichiers JavaScript, du JSX/TSX, des modules ECMAScript et CommonJS qu'il importe de manière unifiée, des langages de bas niveau ou SQLite. C'est justement l'un de ses points forts.

Vérifions que tout a bien fonctionné :

> bun index.ts
Hello via Bun!

Une application avec le serveur HTTP de Bun

Notre but étant d’héberger une application web, nous utiliserons un serveur HTTP. Cela tombe bien, Bun dispose du sien, en plus d’assurer une compatibilité (partielle) avec les fonctionnalités et API de Node.js. Développé en utilisant le langage Zig et le moteur JavaScriptCore plutôt que v8, avec une recherche poussée de l'optimisation, ce runtime se dit plus performant pour ce type d’usage.

Modifiez le contenu du fichier index.ts comme suit :

Bun.serve({
  port: 8080,
  hostname: '0.0.0.0',
  fetch(req) {
    const url = new URL(req.url);
    if (url.pathname === "/") return new Response("Home page!");
    if (url.pathname === "/blog") return new Response("Blog!");
    return new Response("404!");
  },
  error(error) {
    return new Response(`<pre>${error}\n${error.stack}</pre>`, {
      headers: {
        "Content-Type": "text/html",
      },
    });
  },
});

Cela créé un serveur HTTP qui envoie une réponse différente selon la route (url.pathname) et une erreur 404 si aucune ne correspond. En cas de souci, une page spécifique sera affichée. Notez que le port 8080 est ici inscrit dans le code mais il pourrait être précisé avec une variable d’environnement : $PORT, $BUN_PORT ou $NODE_PORT.

Clever deploy !

Passons aux choses sérieuses avec un déploiement sur Clever Cloud en commençant par préparer l’application :

clever create -t node clevbun
clever env set CC_PRE_BUILD_HOOK "npm i -g bun"
clever env set CC_NODE_BUILD_TOOL "custom"
clever env set CC_CUSTOM_BUILD_TOOL "bun install"
clever env set CC_RUN_COMMAND "bun run index.ts"

La première commande permet de créer l’application au sein de votre compte Clever Cloud. Nous définissons ensuite plusieurs variables d’environnement permettant d’installer Bun au sein de l’image, puis les instructions pour la configuration des dépendances et le lancement du projet. Comme pour Node.js, vous pouvez indiquer qu’une application est prête pour la production en attribuant la valeur production à la variable d’environnement NODE_ENV.

Notez que vous pouvez utiliser cette configuration pour utiliser Bun sur une application Node.js déjà hébergée par Clever Cloud en adaptant CC_RUN_COMMAND à votre projet.

Notre application étant créée, elle peut être déployée. C’est simple comme un git push !

git add . && git commit -m "First commit"
clever deploy && clever open

Elle est alors disponible depuis nos infrastructures puis ouverte dans votre navigateur. Vous pouvez ajouter /blog ou /random à la fin de l'URL pour vérifier que l'attribution des routes fonctionne bien.

De nombreuses possibilités

Vous n’avez pas à vous préoccuper de la configuration de l’accès HTTPS, de la collecte des logs ou des métriques, tout est déjà mis en place et accessible via Clever Tools ou la Console. Vous pourrez d'ailleurs passer par cette dernière afin d'activer Grafana dans les paramètres de votre compte.

Pour accéder aux informations de votre application dans la Console utilisez :

clever console

D’autres fonctionnalités de Clever Tools vous permettent de lui attribuer un domaine, voir ses paramètres, son activité, modifier le nombre et le type d’instance utilisée, l’arrêter ou la redémarrer. N’hésitez pas à regarder l’aide de notre CLI avec --help ou sa documentation pour en savoir plus :

clever domain
clever domain add domain.tld

clever status
clever activity

clever scale --min-instances 1 --max-instances 4 --min-flavor pico --max-flavor M
clever scale --instances 1 --flavor pico

clever restart
clever stop

Bien entendu, vous pouvez également aller plus loin avec Bun et déployer des applications utilisant le framework web Elysia ou encore des générateurs de sites statiques tels qu’Astro. Nous vous détaillerons cela dans de prochains billets ! D'ici là, n'hésitez pas à nous faire savoir ce que vous attendez de nos images proposant des runtimes JavaScript.

Héberger ses sites à travers un service tel que Clever Cloud, ce n’est pas simplement envoyer ses fichiers vers un serveur. C’est gagner en simplicité d’exécution, en vélocité, et surtout s’assurer de leur maintien en conditions opérationnelles.

Ainsi, pour chaque application ou add-on déployé, vous disposez automatiquement de services tels que des sauvegardes, une gestion des logs ou de suivi des métriques. De quoi vous permettre de vous assurer d’être prêt pour un usage en production. 

Une nouvelle tuile de métrique

Cela passe aussi par de petits détails vous permettant d’avoir accès facilement aux informations essentielles à travers notre Console. Parmi ses récentes améliorations, nous avons ajouté une nouvelle « tuile » dans la vue d’ensemble de chacune de vos applications :

Vous y trouverez le niveau d’utilisation des vCPU et de la mémoire sur une durée de 24 heures, sous la forme d’un graphique composé de 24 barres, représentant une heure chacune. Une valeur moyenne est également affichée, correspondant à la dernière heure.

Un code couleur à trois niveaux permet d’identifier directement une situation nécessitant votre attention, ou de vous assurer que tout va bien. Un panneau d’information vient détailler le fonctionnement des éléments en place et vous disposez de raccourcis renvoyant vers des métriques plus complètes ainsi que le dashboard Grafana lié à votre application.

Et si jamais vous ne voulez pas avoir à vous préoccuper du niveau de charge de votre application et cherchez à gagner en sérénité, pensez à activer l’auto-scalabilité. Elle permet d’augmenter ou de réduire constamment la taille ou le nombre de vos instances selon le besoin, tout en respectant des limites que vous avez définies. 

Un composant web pratique et accessible

Bien entendu, cette tuile a été développée sous la forme d’un Web Component, documenté ici et que vous pouvez librement exploiter. Il s’agit également de la première à suivre nos règles en matière d’accessibilité, que ce soit pour les boutons et liens ou la gestion par les lecteurs d’écrans : le graphique y sera représenté par un tableau.

En 2022, Clever Cloud a plus que doublé ses effectifs afin d’améliorer ses services et en développer de nouveaux avec le renfort de son pôle R&D. Nous voulions aussi prendre plus le temps de peaufiner ce qui fait le quotidien de nos clients : la Console.

Il s’agit de l’interface web qu’ils utilisent pour gérer et déployer leurs applications et add-ons, accéder à leurs métriques, logs, etc. Elle est développée par notre équipe en charge du front-end, dirigée par Hubert Sablonnière, qui a récemment accueilli 4 nouveaux membres.

Depuis, ils travaillent à une meilleure cohérence des éléments qui composent la Console, en mettant l’accent tant sur l’expérience utilisateur que l’accessibilité. Des travaux de fond ont également été entrepris : amélioration générale du code, des procédures de tests et de déploiement, refonte du système de notifications, de gestion des icônes, la génération de la documentation des Clever Components ou même la clarification de certains tarifs. 

Clés SSH : une interface plus utile et plus claire 

Il y a quelques semaines, nous avons également mis en place un nouveau formulaire de gestion des clés SSH, utilisant les Clever Components pour une accessibilité renforcée et une adaptation à tous les écrans. Il est surtout plus clair, notamment avec des aides contextuelles, des messages d’erreur plus explicites, une meilleure gestion du focus, etc. 

On y trouve désormais trois sections : une pour l'ajout d'une nouvelle clé, une seconde listant les clés existantes, que l’on peut supprimer, et enfin celle servant à l’import des clés GitHub. Dans chaque cas, les commandes de bases vous sont expliquées :

Gestion simplifiée des e-mails et des membres 

Nous avons procédé de la même manière avec la gestion des e-mails et des membres d’une organisation. Là aussi les éléments de base ont été revus pour utiliser nos composants et mieux s’adapter à différents formats d’appareils avec une meilleure accessibilité. 

Mais nous avons surtout veillé à ce que des éléments utiles soient présentés de manière claire. Ainsi les e-mails primaires et secondaires d’un compte sont distingués, avec une mention en cas de vérification et la possibilité de changer de statut à tout moment :

Dans le cas de la gestion d’une organisation, une segmentation en trois zones a été mise en place : l’une pour inviter des membres, la seconde pour lister ceux qui sont présents et leurs rôle, ainsi que leur gestion (modification, suppression) et enfin une dernière permettant de quitter une organisation, identifiée comme une “zone de danger”. 

Ici aussi un travail de fond a été mené sur les messages et informations apportées, notamment pour mieux permettre l’identification de membres n’ayant pas activé la double authentification sur leur compte (2FA), un filtre spécifique vous étant proposé :

Ces améliorations ne sont que le début du travail sur la Console, qui va perdurer tout au long de 2023, avec une feuille de route déjà bien entamée et de gros projets sur le point d’aboutir. Bonne nouvelle d’ailleurs : la nouvelle interface de logs est en cours de finalisation, nous vous en reparlerons très bientôt ;)

Chez Clever Cloud, nous aimons avoir un certain contexte sur le statut et les logs de nos applications. C'est pourquoi nous avons déployé un grand nombre d'outils pour obtenir une certaine observabilité. Beaucoup d'entre eux sont disponibles gratuitement pour nos clients (une vue des logs, une vue des métriques ou Grafana). Cependant, il existe des outils que nous utilisons en interne et qui pourraient être utiles à beaucoup. Nous avons récemment découvert glichtip, qui est un outil de suivi des erreurs en open source. Glichtip est une excellente alternative à Sentry et moins complexe à déployer. Nous ajouterons que Glichtip est compatible avec le SDK open source de Sentry.

Contexte

Nous avons utilisé Sentry pour analyser les erreurs provenant des logs de nos propres applications. Nous utilisions encore la version 9.1 jusqu'à ce que nous ayons trop de difficultés à la faire fonctionner. Nous devions alors faire une mise à jour ou trouver une nouvelle solution. Toutes les versions de Sentry postérieures à 9.1 nécessitent beaucoup plus de composants à déployer (comme Kafka, Snuba ou Clickhouse). Il est toujours possible de le déployer avec un script auto-hébergé. Nous voulions que chaque composant soit autonome en dehors de l'application principale de Sentry, cela signifiait que nous devions fournir une authentification à tous les composants. Ce n'était pas un gros problème, mais cela nous aurait pris plus de temps que prévu. Et en même temps, nous avons découvert un nouveau projet : Glitchtip.

Glitchtip

Tout a commencé par un tweet français, sur la découverte d'un nouvel outil : Glitchtip. Ce tweet disait que Glitchtip était compatible avec Sentry, gratuit et facile à auto-héberger, c'était donc évident que nous allions l'essayer !

Que fournit Glitchtip ? A l'intérieur de votre application, avec le SDK Sentry, vous transférez certains de vos logs d'erreurs. Ensuite, l'outil vous aide à suivre ces erreurs, à mieux comprendre quand une nouvelle version de l'outil crée de nouvelles erreurs, à les organiser ou à les rechercher… En un mot, c'est un outil très utile pour déboguer vos logiciels déployés.

Déploiement sur Clever Cloud

Configuration

Tout d'abord, nous allons télécharger le projet Docker Glitchtip et le personnaliser un peu pour correspondre à la façon dont les applications Docker sont exécutées dans Clever Cloud.

# Get latest Glitchtip release
git clone https://gitlab.com/glitchtip/glitchtip.git

# Go to the folder
cd glitchtip

Ensuite, ouvrez votre IDE de code préféré et ouvrez le Dockerfile :

# Remove
FROM glitchtip/glitchtip:latest

# And add instead:
FROM glitchtip/glitchtip:v1.12.2

COPY docker-entrypoint.sh /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]

Ici, nous allons mettre en place la dernière version de Glitchtip. Au moment où nous écrivions ce blog, il s'agissait de la v1.12.2. Vous pouvez les trouver ici. Nous mettons en place un nouveau script pour utiliser docker-entrypoint.sh qui nous permettra de démarrer soit l'application web Glitchtip soit le travailleur Glitchtip. Le docker-entrypoint.sh doit contenir le script suivant :

# docker-entrypoint.sh script:
#!/bin/bash

if [ "${START_TARGET}" = "worker" ]; then
  mkdir /tmp/sandboxed
	cd /tmp/sandboxed && nohup python -m http.server 8080 &
	/code/bin/run-celery-with-beat.sh
else
  /code/bin/start.sh
fi

# Don't forget to make it executable:
chmod u+x docker-entrypoint.sh

Déployer

Glitchtip est livré avec un Dockerfile, ce qui signifie que nous utiliserons un runtime docker. Il nécessite également une base de données PostgreSQL et un cache Redis, ce qui signifie que nous allons déployer un addon PostgreSQL et un addon Redis. L'ajout d'une option -o dans toutes les lignes de commande create peut être utilisé pour spécifier l'organisation à utiliser.

# Create the docker applications:
clever create --type docker glitchtip-web
clever create --type docker glitchtip-worker

# Create the PG addon
clever addon create postgresql-addon --plan s_sml --addon-version 14 glitchtip-postgres

# Link the addon
clever service link-addon glitchtip-postgres -a glitchtip-web
clever service link-addon glitchtip-postgres -a glitchtip-worker

# Create the Redis addon
clever addon create redis-addon --plan s_mono glitchtip-redis

# Link the addon
clever service link-addon glitchtip-redis -a glitchtip-web
clever service link-addon glitchtip-redis -a glitchtip-worker

Configurer

Pour l'instant nous allons configurer Glitchtip à travers des variables d'environnement. Comme nous utilisons plusieurs applications, nous allons déployer un fournisseur de configuration addon.

# Create a config addon:
clever addon create config-provider --plan std glitchtip-config

# Link the addon
clever service link-addon glitchtip-config -a glitchtip-web
clever service link-addon glitchtip-config -a glitchtip-worker

Maintenant que nous avons déployé un fournisseur d'addon de configuration, mettons à jour sa configuration. Pour ce faire, allez dans la console Clever Cloud et sélectionnez le glitchtip-config. Dans le panneau des variables, sélectionnez le mode expert et ajoutez la variable requise suivante, (remplissez leur valeur en fonction du commentaire fourni) :

# In the config addon provider add:
CC_DOCKER_EXPOSED_HTTP_PORT="8080"
# Copy paste here the POSTGRESQL_ADDON_URI environment variable of the glitchtip-postgres addon 
DATABASE_URL="postgresql://user:password@host:port/database"
# Provide a valid email server
EMAIL_URL="smtp://email:password@smtp_url:port"
# Copy paste here the application domain name of the glitchtip-web application instead (should look like: https://app-da7a7a7a-da7a-4242-7a7a-da7a42427a7a.cleverapps.io)
GLITCHTIP_DOMAIN="MY_APP_DOMAIN_NAME"
# Copy paste here the REDIS_ADDON's environment variable of the glitchtip-redis addon 
REDIS_HOST= < REDIS_HOST >
REDIS_PASSWORD= < REDIS_PASSWORD > 
REDIS_PORT= < REDIS_PORT >
# Generate your own custom secret key for Glitchtip
SECRET_KEY= < choose a secret key >

Notez que vous pouvez trouver plus d'informations sur la façon de configurer Glitchtip dans sa documentation.

Chaque application docker nécessite également une certaine configuration personnalisée :

#glitchtip-web custom env
clever env set CC_RUN_SUCCEEDED_HOOK "./manage.py migrate" -a glitchtip-web
clever env set START_TARGET "web" -a glitchtip-web
#glitchtip-worker custom env
clever env set START_TARGET "worker" -a glitchtip-worker

Déployer et exécuter

Maintenant que tout est prêt, il est temps de déployer et d'exécuter votre application Glitchtip.

# Remove initial git
rm -r .git 

# Init a git repository
git init

# Add your files
git add .

# Commit the changes
git commit -m "clever init and deploy"

# Deploy the application
clever deploy -a glitchtip-web
clever deploy -a glitchtip-worker

# Open Glitchtip in your browser
clever open -a glitchtip-web

Votre glitchtip est maintenant presque prêt à être utilisé. Une dernière action est nécessaire : vous devez créer un super utilisateur pour administrer Glitchtip.

# Connect in SSH to your Clever application:
clever ssh -a glitchtip-web

# Run 
./manage.py createsuperuser

Bon travail ! Vous devriez maintenant avoir un accès à la page d'administration de glitchtip (disponible sur le path /admin de votre application). Vous pouvez alors créer des utilisateurs ou vous connecter à votre réseau/application sociale préférée pour authentifier vos utilisateurs. Vous trouverez plus d'informations sur la documentation. Vous pouvez définir votre propre keycloak sur Clever Cloud et l'utiliser pour vous connecter à Glitchtip !

Connecter Glitchtip à une application

Nous allons réutiliser l'exemple d'application akka que nous avons utilisé pour notre blogpost exemple scala. Et nous verrons ensuite comment nous pouvons transmettre nos propres logs d'erreurs à Glitchtip.

Créer un projet Glitchtip

La première étape sera de se connecter avec le nouvel utilisateur root (ou tout utilisateur Glitchtip que vous avez créé ou lié à un réseau/application sociale). Glitchtip vous demandera de créer votre organisation. Dans notre cas, nous avons choisi clever-cloud. Comme nous voulons surveiller les logs d'erreur de notre application, nous devrons créer un nouveau projet directement dans l'interface de Glitchtip. Appelons-le "myakka" et créons l'équipe "Scala-dev" qui lui est associée.

Une fois que ce projet est créé, vous serez en mesure d'obtenir un DSN. Nous le chargerons plus tard comme variable d'environnement pour l'application akka.

Créer un Token Glitchtip

Allez dans Profile/auth token et créez un nouveau jeton Glitchtip avec au moins les droits suivants : read, write et releases. Sauvegardez-le pour plus tard.

Configurer l'application d'exemple AKKA sur Clever Cloud

La première étape consiste à déployer l'application AKKA sur Clever Cloud comme mentionné dans le blogpost scala exemple. Clonez le projet, et au lieu de la branche principale, utilisez la branche blogpost-sentry.

# Clone Clever Cloud akka example project:
git clone https://github.com/CleverCloud/scala-akka-http-postgres-example.git

# Checkout blogpost-sentry
git checkout blogpost-sentry

Dans cette branche, nous mettons à jour l’application pour se connecter à Sentry. Ensuite, nous envoyons seulement les logs HTTP du serveur de départ avec un statut personnalisé (succès ou échec). Voici le code que nous utilisons dans la branche blogpost-sentry :

# Register Sentry
Sentry.init(sentryConfig.sentryDsn)

# Send a message to Sentry with a tag
Sentry.getContext().addTag("status", status)
Sentry.capture(message)
Sentry.getContext().clear()

De plus, vous devez ajouter un fichier .sentryclirc. Ce fichier doit contenir :

[defaults]
url=GLITCHTIP_APP_DOMAIN_NAME
org=clever-cloud
project=myakka

Configurer les variables d'environnement de Glitchtip

Utilisez le script post_build.sh comme CC_POST_BUILD_HOOK. Ceci lancera le sbt flywayMigrate obligatoire ainsi que la création d'une nouvelle version sur Sentry (basée sur le commit ID).

# Set CC_POST_BUILD_HOOK
clever env -a myakka set CC_POST_BUILD_HOOK "./post_build.sh"

Vous devez également définir le jeton Glitchtip et le dsn Glitchtip comme variables d'environnement :

# Set Glitchip required env variables
clever env -a myakka set SENTRY_AUTH_TOKEN < custom_glitchtip_token >  
clever env -a myakka set SENTRY_DSN < custom_glitchtip_dsn >  

Déployer l'application

Vous pouvez maintenant déployer le projet myakka :

# Deploy myakka
clever deploy

Essayez-la

Dès que c'est fait, vous devriez voir votre première issue sur Glitchip ! C'est tout, vous pouvez maintenant ajouter toutes les applications que vous voulez à Glitchtip et profiter de cet outil pour centraliser les logs et erreurs de vos applications. Si vous êtes habitué à ce produit ou si vous venez de l'essayer, n'hésitez pas à nous faire part de vos retours sur Twitter.

Nous sommes ravis de vous annoncer l'arrivée de notre nouveau système de support : Le Ticket Center. Afin de continuer à apporter un des meilleurs supports du marché, nous restons attentifs aux retours de nos clients sur notre qualité de service. Dans ce cadre, nous avons reçu de nombreuses demandes pour mettre en place un fonctionnement permettant de mieux distinguer chaque conversation.

Nous avons donc réfléchi au meilleur moyen de continuer à apporter un service rapide et de qualité et instaurer un système de tickets nous a semblé être la solution la plus adaptée pour répondre aux besoins et attentes de nos utilisateurs.

Ce qu'il y a de nouveau

Usage orienté "ticket"

À présent, l'usage sur la plateforme est orienté "ticket" plus que "chat". Cela permet d'avoir une authentification unique de chaque demande afin d'assurer un meilleur suivi.             

Ajout de participants à la conversation

Vous pouvez désormais choisir d'ajouter automatiquement des membres de l'organisation concernée au moment de l'ouverture d'un ticket. Ceci vient améliorer votre expérience sur Crisp en vous permettant que la réponse de notre service support soit bien accessible à toutes les personnes concernées.

Quand vous ouvrez un ticket :

• Si vous êtes admin, les autres admins de l'organisation seront ajoutés
• Si votre rôle est autre que admin, les membres de l'organisation ayant le même rôle que vous seront ajoutées

Comment fonctionne le Ticket Center ?

Accéder au Ticket Center depuis une organisation

Nous avons intégré un nouveau bouton “Contact support team” dans la console, en haut d'une organisation. Il vous permettra d'ouvrir le ticket center directement dans le contexte de l’organisation dns laquelle vous vous trouvez. Ce qui permet au support de savoir en un coup d'œil de quelle organisation il s'agit.

Accéder au Ticket Center depuis le menu principal de la console

Le bouton utilisé jusqu'ici qui s’appelait “parler à un humain” existe toujours, sous l'appellation “contacter le service support”. Vous pouvez le retrouver comme avant, en bas à gauche du menu principal de la console. Une page "Select your organisation" va ensuite s'ouvrir pour vous permettre de préciser l'organisation pour laquelle vous souhaitez créer un ticket.

Créer un ticket

En ouvrant le Ticket Center, vous retrouvez l'historique de vos précédents tickets. Veuillez noter que toutes vos précédentes conversations par chat avec le support ont été converties en un seul et unique ticket, vous pourrez donc accéder à l'ensemble de vos précédents échanges si besoin.

Ici vous pouvez également : obtenir des informations sur le statut de traitement de votre demande, consulter la conversation associée et ouvrir un nouveau ticket.

Donner son avis

Une fois le ticket clôturé, vous recevez comme d'habitude un e-mail pour donner votre avis, c'est le moment de nous faire votre retour sur le service qui vous a été apporté par le support.

Ce que ça permet

Avec l'ancien fonctionnement, les conversations entre le support et un user contenaient souvent plusieurs sujets différents. Aujourd’hui, chaque demande compte, de façon unique, ce qui apporte : 

• Un meilleur suivi des demandes.
• Un outil plus collaboratif, en vous permettant d'ajouter des participants à la conversation.
• Une réponse plus efficace grâce à l’identification unique de chaque ticket.

Nous sommes convaincus que ce nouveau Ticket Center nous permettra de continuer à fournir un service rapide et de qualité. N'hésitez pas à nous contacter et à nous faire part de vos retours et idées concernant ce nouveau système.

Keycloak est un moyen moderne et efficace de gérer les identités et les accès. Il permet l'authentification unique, la fédération d'utilisateurs à travers plusieurs annuaires d'utilisateurs. Il est également compatible avec les protocoles d'authentification standard comme OpenID Connect, OAuth2 ou SAML. Tous les détails sont disponibles sur son site. Dans ce blogpost, nous verrons les étapes du déploiement de Keycloack et Grafana sur Clever Cloud.

Comment déployer Keycloak ?

Setup

Keycloak est écrit en Java, et fournit un fichier JAR dans sa version, ce qui signifie que nous allons utiliser un runtime JAVA avec un déploiement JAR. Il nécessite également une base de données PostgreSQL, ce qui signifie que nous allons déployer un addon PostgreSQL.

# Get lastest Keycloak release
wget https://github.com/keycloak/keycloak/releases/download/17.0.1/keycloak-17.0.1.zip

# Extract the archive
unzip keycloak-17.0.1.zip

# Go to the folder
cd keycloak-17.0.1

# Create the jar application
clever create --type jar keycloak-server
export KEYCLOAK_DOMAIN=$(clever domain | xargs)

# Create the PG addon
clever addon create postgresql-addon --plan s_sml --addon-version 10 keycloak-postgres

# Link the addon
clever service link-addon keycloak-postgres

Configurer

Pour l'instant, nous allons configurer Keycloak en utilisant des variables d'environnement. Notez que vous pouvez également configurer Keycloak via son CLI ou via un fichier, comme indiqué dans sa documentation.

Note : Pour la configuration via des variables d'environnement, le modèle à utiliser est KC_ et le nom en majuscule de toute clé de configuration, séparés par des caractères de soulignement.

# Export env for templating purpose
export $(clever env | sed '/^#/d;s/\"//g')

clever env set CC_JAR_PATH lib/quarkus-run.jar
clever env set CC_JAVA_VERSION 11
clever env set CC_RUN_COMMAND "bin/kc.sh start --auto-build"

clever env set KC_DB postgres
clever env set KC_DB_USERNAME $POSTGRESQL_ADDON_USER
clever env set KC_DB_PASSWORD $POSTGRESQL_ADDON_PASSWORD
clever env set KC_DB_URL "jdbc:postgresql://$POSTGRESQL_ADDON_HOST:$POSTGRESQL_ADDON_PORT/$POSTGRESQL_ADDON_DB"
clever env set KC_HOSTNAME $KEYCLOAK_DOMAIN
clever env set KC_HTTP_ENABLED true
clever env set KC_PROXY passthrough
clever env set KC_PROXY_ADDRESS_FORWARDING true

Note: Envisagez de configurer KC_DB_POOL_MAX_SIZE (Le nombre maximum de connections parallèles a la base de donnée) avec une valeur basse (la valeur par défault est de 100) en fonction de la taille de la base de donnée que vous avez commandé plus tôt. Vous pouvez trouver les limites de connection par taille de base de donnée ici. Si vous avez choisi la taille S_SML comme précisé plus tôt dans la commande fournie, vous pouvez ignorer ce message. vous pouvez aussi configurer plus finement le groupe de connection a la base de donnée en utilisant les variable DB_POOL_INITIAL_SIZE et KC_DB_POOL_MIN_SIZE

Vous devez maintenant définir KEYCLOAK_ADMIN et KEYCLOAK_ADMIN_PASSWORD :

clever env set KEYCLOAK_ADMIN <choose an admin username>
clever env set KEYCLOAK_ADMIN_PASSWORD <choose an admin password>

Déployer

Déployer Keycloak sur Clever Cloud :

# Init a git repository
git init

# Add your files
git add .

# Create the first commit
git commit -m "clever init"

# Deploy the application
clever deploy

# Open Keycloak in your browser
clever open

Valider la configuration

Vous pouvez suivre la documentation de Keycloak en commençant ici pour vous assurer que Keycloak fonctionne comme prévu. Elle vous guidera à travers la création d'un realm (tenant), la création d'un utilisateur et la création/test d'un client.

Créer une configuration initiale de Keycloak

Dans l'interface utilisateur de Keycloak, assurez-vous de créer un realm appelé "myrealm" (survolez "Master" dans le coin supérieur gauche). Assurez-vous que le realm "myrealm" est sélectionné.

Ensuite, allez dans Utilisateurs > Ajouter un utilisateur. Remplissez les champs Nom d'utilisateur, Email, Prénom et Nom de famille, puis cliquez sur Enregistrer.

Dans l'onglet "credentials" de l'utilisateur, ajoutez le mot de passe de votre choix et désélectionnez "Temporary", le mot de passe défini.

C'est fait !

Un scénario du monde réel

Voyons comment nous pouvons utiliser Keycloak dans le monde réel : comme proxy SSO pour Grafana, en utilisant Oauth 2.

Configurer Grafana sur Clever Cloud

Si vous avez besoin d'un guide détaillé sur la façon d'utiliser ou de déployer Grafana, veuillez lire cet article.

Utilisons l'exemple Grafana sur le dépôt Github de Clever Cloud.

# Clone the repository
git clone https://github.com/CleverCloud/grafana-example.git

# Enter the directory
cd grafana-example

# Create a NodeJS Application
clever create --type node grafana
export GRAFANA_DOMAIN=$(clever domain | xargs)

# Configure Grafana
clever env set GRAFANA_VERSION 8.5.2
clever env set GRAFANA_PLUGINS "grafana-worldmap-panel"
clever env set GF_PLUGIN_DIR ./data/plugins

clever env set GF_SERVER_HTTP_PORT 8080
clever env set GF_SERVER_ROOT_URL "https://$GRAFANA_DOMAIN"

Note : Dans cette section, vous devez définir vous-même la variable GRAFANA_SHA_256. Vous pouvez trouver la SHA256SUM nécessaire ici, à côté de "Standalone Linux Binaries".

clever env set GRAFANA_SHA_256 <SHA256SUM>

Configurer Keycloak pour OAuth 2

Note : dans cette section, vous devez remplacer $GRAFANA_DOMAIN par la valeur que vous avez exportée dans la dernière section. Vous pouvez trouver cette valeur en exécutant la commande suivante : clever domain.

Dans l'interface utilisateur de Keyloak, allez dans Configurer > Clients > Créer.

Créez un nouveau client avec ces configurations :

Client ID: $GRAFANA_DOMAIN
Client Protocol: openid-connect
Root URL: https://$GRAFANA_DOMAIN

Effectuez ensuite ces configurations :

Access Type: confidentials // The OAuth client must use a client id and secret.
Root URL: ${authBaseUrl}
Valid Redirect URIs: https://$GRAFANA_DOMAIN/login/generic_oauth
Base URL: /login/generic_oauth

Effacez Admin URL et Web Origins.

Cliquez sur enregistrer et ouvrez l'onglet Credentials. Copiez le secret dans une note séparée, nous en aurons besoin dans les deuxième et troisième parties de ce tutoriel.

Ouvrez l'onglet Rôles et cliquez sur Ajouter un rôle. Créez un nouveau rôle avec le nom admin. Ce rôle définit le niveau d'accès pour Grafana.

Allez sur l'onglet Scope et définissez Full Scope Allowed sur OFF. Nous ne voulons pas partager d'autres détails sur le royaume dans le jeton client.

Ensuite, nous allons configurer un mappeur client pour la propriété roles. Nous devons nous assurer que Grafana peut extraire le rôle d'accès à partir du jeton JWT. Ouvrez l'onglet Mappers et cliquez sur Create. Créez une entrée avec ces options :

 
Nom : Roles
Mapper Type : Rôle client utilisateur
ID du client : $GRAFANA_DOMAIN
Nom de la réclamation token : roles
Type JSON de la réclamation : string

Enfin, attribuez le rôle client à votre utilisateur Keycloak : Allez dans Utilisateurs > Afficher tous les utilisateurs et cliquez sur l'ID de votre utilisateur. Cliquez sur l'onglet Role Mapping, puis dans le sélecteur Client Roles, sélectionnez $GRAFANA_DOMAIN. Dans la section Available Roles, sélectionnez admin et cliquez sur Add selected.

Configurer Grafana pour OAuth 2

Configurez les variables d'environnement appropriées

# Configure appropriate env vars
clever env set GF_SERVER_DOMAIN $GRAFANA_DOMAIN
clever env set GF_SERVER_ROOT_URL "https://$GRAFANA_DOMAIN"
clever env set GF_AUTH_GENERIC_OAUTH_ENABLED true
clever env set GF_AUTH_GENERIC_OAUTH_NAME Keycloak
clever env set GF_AUTH_GENERIC_OAUTH_ALLOW_SIGN_UP true
clever env set GF_AUTH_GENERIC_OAUTH_CLIENT_ID $GRAFANA_DOMAIN

clever env set GF_AUTH_GENERIC_OAUTH_SCOPES profile
clever env set GF_AUTH_GENERIC_OAUTH_AUTH_URL "https://$KEYCLOAK_DOMAIN/realms/myrealm/protocol/openid-connect/auth"
clever env set GF_AUTH_GENERIC_OAUTH_TOKEN_URL "https://$KEYCLOAK_DOMAIN/realms/myrealm/protocol/openid-connect/token"
clever env set GF_AUTH_GENERIC_OAUTH_API_URL "https://$KEYCLOAK_DOMAIN/realms/myrealm/protocol/openid-connect/userinfo"
clever env set GF_AUTH_GENERIC_OAUTH_ROLE_ATTRIBUTE_PATH "contains(roles[*], 'admin') && 'Admin' || contains(roles[*], 'editor') && 'Editor' || 'Viewer'"

Note : Dans cette section, vous devez définir vous-même GF_AUTH_GENERIC_OAUTH_CLIENT_SECRET, en utilisant la valeur dans Keycloak UI, sous Client > $GRAFANA_URL > Credentials

clever env set GF_AUTH_GENERIC_OAUTH_CLIENT_SECRET <KEYCLOAK_CLIENT_SECRET>

Vous pouvez maintenant déployer Grafana :

 
# Deploy grafana
clever deploy

# Open grafana and try the Login with Keycloak button !
clever open

Maintenant, cliquez sur login with Keycloak, et utilisez le nom d'utilisateur et le mot de passe que vous avez définis pour l'utilisateur que vous avez créé plus tôt dans Keycloak.

En utilisant la même procédure décrite précédemment pour créer le premier utilisateur, vous pouvez maintenant créer d'autres utilisateurs et rôles. Créez les rôles "éditeur" et/ou "visualisateur" et attribuez-les à vos nouveaux utilisateurs dans Keycloak. Essayez de vous connecter avec ceux-ci sur Grafana et vous verrez que les rôles sont propagés à Grafana.

Sources :

• https://janikvonrotz.ch/2020/08/27/grafana-oauth-with-keycloak-and-how-to-validate-a-jwt-token/
• https://www.keycloak.org/getting-started/getting-started-zip