Déployer une application Next.js sur Clever Cloud

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 ;
• Une application Next.js déjà prête sur votre environnement local.

Ce guide concerne au moins les dernières versions de Next.js quel que soit le router utilisé (Pages ou App), et a été testé avec Next.js 14.

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 l'application Next.js.

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 :

• Le plan pico (4,50 € HT / 30 jours) est suffisant pour un petit site vitrine ;
• Le plan nano (6,00 € HT / 30 jours) est conseillé à minima pour plus de stabilité.

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 ("Next.js" 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.

Sélection éventuelle d'add-ons

Clever Cloud vous propose ensuite d'ajouter, si besoin, un add-on à votre application. Un add-on est simplement une application préconfigurée. Pour notre application Next.js, pas besoin d'add-on en particulier (sauf besoin spécifique de votre application), vous pouvez passer cette étape.

Variables d'environnement

L'étape suivante consiste à définir les variables d'environnement utiles votre application Next.js.
Par défaut, vous n'en avez besoin d'aucune. N'indiquez pas NODE_ENV, Next.js détecte le mode production lors de l'exécution de la commande next start : si vous ajoutez cette variable, cela risque donc de planter votre application.

Vous pouvez ajouter, selon votre application, toutes les variables utilisées lors du build de votre application et lors de son utilisation, telles que des clés d'API.

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

L'étape suivante vous donne quelques instruction, que l'on va voir ensemble après avoir ajusté le code de notre application pour le déploiement :

Ajustement du code Next.js

Dans votre application, sur votre environnement local, nous avons quelques ajustement à faire pour préparer le projet au déploiement en production.

Lors du déploiement, Clever Cloud s'attend à trouver un script "install", et écoutera ensuite le port 8080.

Il faut donc éditer le fichier package.json à la racine de votre application Next.js, pour ajouter le build dans une nouvelle commande install, et indiquer le port attendu par Clever Cloud dans la commande start :

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 Next.js et initialiser votre dépôt local avec git init, sinon 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 :

Vérifier 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 Next.js.

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) :

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 Next.js :

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.

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 Next.js déployée en production !
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.