Camino
Créateur de sites web pertinents
Créateur de sites web pertinents
Retour au blogDéveloppement

Déployer le CMS Strapi sur Clever Cloud

Avec une base de données PostgreSQL

Publié le 1 mai 2024 par Pierre Guézennec

Prérequis

Avant de vous lancer, vous devez avoir :

  • Un compte sur Clever Cloud, et y avoir créé une organisation prête à recevoir votre application : Clever Cloud ;
  • Strapi déjà prêt sur votre environnement local, quelle que soit la base de donnée associée.

Ce guide a été testé sur le version 4.20 de Strapi, mais devrait fonctionner sur les autres, peut-être avec un ajustement des variables d'environnement si nécessaire.

Création de l'application

Une fois connecté sur Clever Cloud, dans votre console, sélectionnez votre organisation ou votre espace personnel, et cliquez sur "Create" puis sur "an application".

Choisissez "Create a brand new app", pour créer une application vierge sur laquelle vous pousserez votre application locale.

Sélectionnez "Node" pour supporter Strapi.

Choix du plan

Clever Cloud vous propose ensuite une instance par défaut avec le plan XS. À vous de choisir si cela vous convient, ou de cliquer sur "edit" pour sélectionner un plan plus modeste. Pour supporter Strapi, je conseille à minima le plan nano (6,00 € HT / 30 jours).

En éditant le plan par défaut, vous pouvez choisir des options d'évolutivité automatique (scalability) :

  • Par défaut désactivé, vous pouvez choisir d'activer l'évolutivité automatique du plan de votre application selon la charge, si vous prévoyez des pics d'utilisation de votre API par exemple.
  • Vous pouvez choisir une évolutivité horizontale : si Clever Cloud détecte une charge lourde pour votre application, une copie (ou plusieurs selon votre limite indiquée) de votre application sera automatiquement générée et fonctionnera en parallèle avec un load balancer pour gérer la charge.
  • Vous indiquez enfin le plan souhaité pour votre application, ou si l'autoscaling est activé, la fourchette de plan : par défaut la plus basse, évolutive automatiquement selon la charge.

La tarification étant à la minute, Clever Cloud vous indique, en cas d'autoscaling, la fourchette de prix mensuelle qui dépendra donc de la charge.

Documentation plus complète ici : https://developers.clever-cloud.com/doc/administrate/scalability

Choix de la localisation

Sur l'écran suivant, Choisissez le nom de l'application ("Strapi" par exemple), et dans quelle zone vous souhaitez l'héberger. Le choix dépend de votre préférence ainsi que du lieu depuis lequel la majorité des utilisateur de l'application l'utilisent.

Par exemple, j'ai choisi l'infrastructure de Scaleway, un hébergeur français partenaire de Clever Cloud qui propose des serveurs neutres en carbone en France. Les serveurs de Clever Cloud et ceux d'OVH sont aussi bien sûr d'excellents choix.

Ajout de l'add-on PostgreSQL

Clever Cloud vous propose ensuite d'ajouter, si besoin, un add-on à votre application. Un add-on est simplement une application préconfigurée. Ici, nous allons sélectionner PostgreSQL pour servir de base de données à Strapi. Bien sûr, vous pouvez choisir un autre type de base comme MySQL qui fonctionne aussi avec Strapi.

Choisissez ici le type de plan pour votre base de donnée.

Le plan "DEV" est trop petit, notamment à cause de sa limite en nombre de connexion qui fera planter l'installation de Strapi. On choisira donc à minima le plan "XXS Small Space".

Variables d'environnement

L'étape suivante consiste à définir les variables d'environnement utiles à Strapi :

  • HOST : 0.0.0.0
  • PORT : Clever Cloud écoute le port 8080 pour votre application et non pas 1337 comme par défaut pour Strapi.
  • NODE_ENV : production
  • DATABASE_CLIENT : postgres (les informations d'accès à la base sont déjà injectées via l'addon PostgreSQL, on les ajoutera à Strapi après)
  • ADMIN_JWT_SECRET : utilisez la commande openssl rand -base64 32 sur un environnement local pour générer une chaîne de caractère pour cette variable
  • API_TOKEN_SALT : idem
  • JWT_SECRET : idem
  • TRANSFER_TOKEN_SALT : idem
  • APP_KEYS : idem, mais indiquez-en 4 séparées par des virgules

N'oubliez pas de cliquez sur "UPDATE CHANGES", car le passage à l'étape suivante n'enregistre pas automatiquement l'ajout de ces variables.

Note : certaines de ces variables seront utilisées par le fichier config/server.ts de votre application Strapi (on y retrouve les valeurs par défaut pour HOST et PORT pour l'environnement local, par exemple) :

1export default ({ env }) => ({
2  host: env('HOST', '0.0.0.0'),
3  port: env.int('PORT', 1337),
4  app: {
5    keys: env.array('APP_KEYS'),
6  },
7  webhooks: {
8    populateRelations: env.bool('WEBHOOKS_POPULATE_RELATIONS', false),
9  },
10});

Ajustements dans le code

La suite se passe dans le code de votre application Strapi, en local.

Il faut d'abord comprendre l'automatisme du déploiement de Clever Cloud en deux étapes pour une application sur le runtime NodeJS :

  • Build : Exécution du script "install" de votre fichier package.json
  • Deploy : Exécution du script "start" de votre fichier package.json

Alors que le script "start" est présent par défaut pour le package.json de Strapi, le script "install" ne l'est pas. Il faut donc l'ajouter, en indiquant la même commande que pour le script "build" :

1"scripts": {
2  "build": "strapi build",
3  "develop": "strapi develop",
4  "install": "strapi build",
5  "start": "strapi start",
6  "strapi": "strapi"
7},

Ensuite, si ce n'est pas déjà fait en local (j'utilise Sqlite par simplicité pour Strapi en local), il faut installer le package pg nécessaire à Strapi pour communiquer avec votre base de donnée PostgreSQL :

1npm install pg

Éditez ensuite le fichier config/database.ts et éditez le nom des variables d'environnement pour la partie "postgres" afin d'utiliser celles injectées par Clever Cloud :

1postgres: {
2  connection: {
3    connectionString: env("POSTGRESQL_ADDON_URI"),
4    host: env("POSTGRESQL_ADDON_HOST", "localhost"),
5    port: env.int("POSTGRESQL_ADDON_PORT", 5432),
6    database: env("POSTGRESQL_ADDON_DB", "strapi"),
7    user: env("POSTGRESQL_ADDON_USER", "strapi"),
8    password: env("POSTGRESQL_ADDON_PASSWORD", "strapi"),
9    ...
10  },
11},

Configuration de git

Si vous avez un fichier .env, pensez à l'ajouter au fichier .gitignore pour éviter de l'ajouter au premier commit.

Si vous n'avez pas encore de dépôt git configuré pour votre projet, vous pouvez supprimer le répertoire .git créé lors de l'installation de Strapi et initialiser votre dépôt local avec git init. Si vous avez déjà un dépôt configuré, passez directement à l'ajout du dépôt git distant clever.

Si votre configuration git règle par défaut la branche "main" comme branche principale, il faut la renommer en "master" pour Clever Cloud (si "master" est déjà la branche principal, vous pouvez ignorer cette étape) : git branch -m main master

Puis, comme indiqué par Clever Cloud, ajoutez le dépôt git distant clever correspondant à votre application :

1git remote add clever git+ssh://git@ADRESSE-FOURNIE-PAR-CLEVER-CLOUD.git

Vérifiez ensuite les fichiers qui seront ajoutés au dépôt avec git status :

Faites attention à ne pas pousser de fichier sensible (comme par exemple votre fichier .env) et de bien inclure tout ce qui est nécessaire à votre application Strapi.

Ajoutez tous ces fichiers à git, créez votre premier commit, et poussez-le sur la branche master du dépôt distant clever (et non pas origin) :

1git add .
2git commit -m "Initial commit"
3git push clever master

Déploiement sur Clever Cloud

L'instruction push déclenche automatiquement un nouveau déploiement de votre application sur Clever Cloud. Il se fait en deux étapes, la construction (build) et le déploiement (deploy) qui exécutent respectivement les script install et start de votre package.json comme préparé précédemment.

Rendez-vous sur la page "Overview" de votre application Strapi :

Si tout va bien, Clever Cloud a automatiquement lancé une instance de déploiement, suite à votre push sur git. Vous pouvez suivre le déploiement dans la partie "Logs" ou en cliquant sur le raccourci présent dans la page "Overview" : "read logs here".

S'il y a une erreur lors du déploiement, utilisez les logs pour savoir d'où elle vient. Si cela vient de votre code, corrigez et effectuez un nouveau git push clever master pour déclencher un nouveau déploiement. Si cela vient de votre configuration sur Clever Cloud (oubli d'une variable d'environnement ou autre), relancez le build depuis la page "Overview" de l'application après correction.

1Project information
2┌────────────────────┬──────────────────────────────────────────────────┐
3│ Time │ Fri Apr 26 2024 20:02:46 GMT+0000 (Coordinated … │
4│ Launched in │ 6950 ms │
5│ Environment │ production │
6│ Process PID │ 1528 │
7│ Version │ 4.22.1 (node v20.12.2) │
8│ Edition │ Community │
9│ Database │ postgres │
10└────────────────────┴──────────────────────────────────────────────────┘
11Actions available
12One more thing...
13Create your first administrator 💻 by going to the administration panel at:
14┌───────────────────────────┐
15│ http://0.0.0.0:8080/admin │
16└───────────────────────────┘

Vous devriez constater, à la fin du déploiement de Strapi, que l'environnement est bien production et que la base de donnée est bien postgres.

En vous rendant dans la page "Addon dashboard" de l'application (que j'ai appelé "Database" sur ma capture d'écran), sur l'onglet "PG Studio" en haut, vous devriez constater que votre base de donnée est bien remplie avec les tables de Strapi :

Quand tout est OK, vous pouvez accéder à votre application depuis la petit icône en haut à droite de votre application :

Ce qui devrait vous amener à votre application Strapi déployée en production !

Ajoutez simplement "/admin" après l'URL de votre application Strapi pour définir votre utilisateur principal et créer vos contenus !

Chaque nouveau git push clever master entraînera un nouveau déploiement automatique.

Il ne vous reste plus qu'à ajouter votre nom de domaine / sous-domaine à votre application.

Commentaires