Un guide de démarrage rapide pour héberger Next.js sur Upsun

next.jsGitHubconfiguration

13 décembre 2023

Cet article est également disponible en Anglais.

Bienvenue dans notre guide de démarrage rapide sur l'hébergement de Next.js (au moment de la rédaction, la version la plus récente de Next.js est 14.0.3) sur Upsun où nous allons démontrer à quel point il est simple d'héberger des projets Next.js sur notre PaaS. Suivez simplement les étapes détaillées ci-dessous et vous aurez tout mis en place en un rien de temps.

Avez-vous vu le tutoriel de démonstration d'Upsun disponible pour les utilisateurs via la Console ? C'est l'endroit idéal pour commencer à comprendre le fonctionnement d'Upsun et à mieux comprendre ce que nous offrons. Si vous cherchez une méthode alternative pour déployer une application sur Upsun - comme avec l'Upsun CLI - vous pouvez trouver des informations utiles dans notre guide Next.js dédié.

Avant de commencer, pour les besoins de ce tutoriel, nous supposerons que vous avez déjà installé le CLI d'Upsun localement. Les étapes suivantes sont basées sur cette hypothèse :

Démarrer localement

Si vous avez déjà un dépôt Next.js GitHub existant avec, au moins, une route Hello world, veuillez le cloner localement en utilisant la commande suivante et passez ensuite à la deuxième étape : Configurez votre projet.

$ git clone git@github.com:<VotreRepoUrl>.git

Si vous n'avez pas encore de dépôt Next.js sur GitHub, vous êtes au bon endroit - les étapes suivantes vous montreront comment en créer un et le cloner localement.

1. Initialiser votre projet local

Tout d'abord, si vous n'avez pas encore de projet Next.js local, vous devez en créer un nouveau localement en suivant le guide d'installation de Next.js. Veuillez vous référer à toutes les étapes du guide d'installation pour plus de détails, mais pour résumer, voici les trois commandes nécessaires pour créer une application Next.js localement :

$ mkdir my-nextjs-app $ cd my-nextjs-app $ npm install next@latest react@latest react-dom@latest

2. Initialiser votre dépôt Git

Une fois que vous avez créé un nouveau projet Next.js localement, il est temps d'initialiser le dépôt Git local et de livrer les fichiers locaux, en utilisant la commande suivante :

$ git init $ git add package.json package-lock.json $ git commit -m "Init Next.js application"

Remarque : Vous pouvez ignorer l'ajout des dossiers node_modules et .next au dépôt Git car les modules Node seront installés pendant le crochet de construction plus tard dans ce processus. Utilisez les commandes suivantes pour le faire :

$ echo " node_modules"="">> .gitignore $ echo "/.next" >> .gitignore $ git add .gitignore && git commit -m "adding node_modules and .next folders in .gitignore file"

3. Ajouter une route Hello World

Pour s'assurer que votre application Next.js est facilement testable, vous devez créer votre première page Next.js. Pour ce faire, créez un nouveau fichier pages/index.tsx, il contiendra un script Hello world basique, comme vu ci-dessous :

export default function Page() { return <h1>Hello world, Next.js!</h1> }

Validez ensuite votre fichier à l'aide des commandes suivantes :

$ git add pages/index.tsx $ git commit -m "ajout d'un Hello World"

4. Créez votre dépôt GitHub

L'étape suivante consiste à créer un dépôt GitHub, pour cela suivez le guide officiel de GitHub qui fournit toutes les informations dont vous avez besoin.

5. Pousser le code source vers votre dépôt distant

La dernière étape de l'installation locale est de pousser votre code source vers votre dépôt GitHub distant, en utilisant la commande suivante :

$ git remote add origin git@github.com:OWNER/REPOSITORY.git $ git push -u origin main

Configurer votre projet

Pour pouvoir héberger votre application Next.js sur Upsun, quelques fichiers de configurationYAML sont nécessaires à la racine de votre projet pour gérer le comportement de votre application. Voir le code ci-dessous pour savoir comment les pré-générer automatiquement.

Ces fichiers de configuration YAML sont situés dans un dossier .upsun/ à la racine de votre code source, dont l'architecture ressemblera à ceci :

my-nextjs-app ├── .upsun │ └── config.yaml ├─── [.environment] └── <project sources>

Remarque: Un fichier .environment supplémentaire peut également être situé à la racine de votre code source, ce fichier peut contenir des variables d'environnement spécifiques à Upsun.

Pour pré-générer ces fichiers YAML, veuillez utiliser la commande suivante upsun project:init depuis la racine de votre projet Next.js et suivez les instructions, comme vous pouvez le voir ci-dessous :

upsun project:init Bienvenue à Upsun ! Commençons par quelques questions. Nous avons besoin d'en savoir un peu plus sur votre projet. Cela ne prendra qu'une minute ! ✓ Pile détectée : Next.js ✓ Runtime détecté : JavaScript/Node.js ✓ Gestionnaires de dépendances détectés : Npm Indiquez-nous le nom de l'application de votre projet : [app] (_/) Nous avons presque terminé... =(^.^)= Enfin, à moins que vous ne créiez un site web statique, votre projet utilise des services. Définissons-les : Sélectionnez tous les services que vous utilisez : [] Vous n'avez sélectionné aucun service, voulez-vous quand même continuer ? [┌───────────────────────────────────────────────────┐ │ CONGRATULATIONS !                                                                                                                      │ │ │ │ Nous avons créé les fichiers suivants pour vous :                                                                         │ │ - .upsun/config.yaml │ │ │ │ │ Nous sautons de joie ! ⍢ │ └───────────────────────────────────────────────────┘ │ / │/ │ ( /) ( . .) o (_(")(") Vous pouvez maintenant déployer votre application sur Upsun ! Pour ce faire, livrez vos fichiers et déployez votre application en utilisant la CLI d'Upsun : $ git add . $ git commit -m 'Add Upsun configuration files' $ upsun project:set-remote $ upsun push

La commande upsun project:init (raccourci upsun ify) détectera automatiquement que vous utilisez une pile Next.js, vous demandera si vous souhaitez ajouter des services (merci de ne pas en ajouter pour l'instant), et générera les fichiers YAML .upsun/config.yaml correspondants, comme suit :

# Liste complète de toutes les propriétés disponibles : https://docs.upsun.com/create-apps/app-reference.html applications : app : source : root : "/" type : "nodejs:20" mounts : "/.npm" : source : "storage" source_path : "npm" web : commands : start : "npx next start -p $PORT" upstream : socket_family : tcp locations : "/" : passthru : true build : flavor : none dependencies : nodejs : sharp : "*" hooks : build : | set -eux npm i npm exec next build routes : "https://{default}/" : type : upstream upstream : "app:http" "https://www.{default}/" : type : redirect to : "https://{default}/"

Puis validez vos nouveaux fichiers, en utilisant la commande suivante, et la configuration du projet est terminée :

$ git add .upsun/config.yaml $ git commit -m "Upsun config files" $ git push

Créer un nouveau projet Upsun

Remarque : Si vous n'avez pas encore de compte Upsun, veuillez en créer un pour compléter les étapes suivantes.

La prochaine étape dans la mise en place de Next.js sur Upsun est de créer un projet, ce qui est simple à faire via la console. Sur la page d'accueil de votre console (tous les projets), dans le coin supérieur droit, cliquez sur le bouton " Créer un projet", comme indiqué ci-dessous :

Si vous n'avez pas encore créé d'organisation dans laquelle placer le projet, il vous sera d'abord demandé d'en créer une. Une fois que vous l'avez fait, sélectionnez cette organisation dans le menu déroulant, puis sélectionnez Déployer avec GitHub, comme indiqué dans l'écran ci-dessous :

Sélectionnez ensuite Connect with GitHub parmi les options proposées, comme le montre l'écran ci-dessous :

Dans le formulaire suivant qui apparaît et que vous pouvez voir dans l'écran ci-dessous, sélectionnez votre organisation GitHub dans le premier menu déroulant, puis sélectionnez Install & Authorize et remplissez les informations d'identification GitHub. Vous devrez sélectionner votre organisation GitHub et le dépôt GitHub précédemment créé, puis sélectionner Continuer.

Vous serez alors amené à l'étape 3 de cette configuration - comme on peut le voir ci-dessous - où vous devrez remplir divers détails, y compris le nom du projet, le nom de l'environnement et la région. Une fois que vous avez terminé, sélectionnez Créer un projet.

Sur la page suivante, pendant que le processus de création du projet se poursuit en arrière-plan, vous verrez à gauche d'autres instructions de configuration, si vous en avez besoin. Sur la droite, vous pouvez suivre le processus de création du projet et vous serez informé lorsqu'il sera terminé, comme le montre l'écran ci-dessous :

Une fois votre projet créé, le processus d'intégration GitHub déploiera automatiquement votre application sur la base du code source de votre dépôt GitHub. Attendez que l'intégration termine le déploiement et elle affichera alors les informations relatives à votre application, dont vous pouvez voir un exemple dans l'écran ci-dessous :

Il est temps de déployer, n'est-ce pas ?

Et juste comme ça, c'est le moment de déployer ! Mais attendez...

Comme vous vous êtes déjà assuré que votre code source GitHub était prêt pour Upsun, votre projet aura été automatiquement déployé lors de la création du projet et votre application sera en ligne - pas de déploiement nécessaire et la première sauvegarde de votre application sera faite automatiquement. Vérifiez votre nouvelle URL de projet que vous pouvez trouver en bas de l'interface de la console.

L'étape suivante est d'accéder à la console de votre projet en cliquant sur le bouton View project en bas de la page de configuration, et voilà, votre application Next.js est en ligne et vous pouvez commencer à jouer avec et à ajouter plein de nouvelles fonctionnalités !

Qu'en est-il des mises à jour ?

1. Allocation des ressources

Lors de la première mise à jour de votre environnement de production, Upsun utilisera la taille par défaut pour chacun de vos conteneurs de service/application. Le paramètre par défaut est fixé à 0,5 CPU et 0,2 GB de RAM, mais c'est plus que ce qui est nécessaire pour ce conteneur, alors diminuons-le à quelque chose de plus approprié.

Si vous avez besoin de définir des ressourcespersonnalisées (CPU, mémoire et disque) pour les différents conteneurs, la procédure est simple. Dans la vue de l'environnement, cliquez sur le lien Configurer les ressources dans le bloc de notification en haut. Cette opération peut également être effectuée via le CLI.

En général, les ressources suivantes devraient être efficaces, mais n'hésitez pas à adapter ces valeurs aux besoins de votre application :

CPU : 0.1, mémoire 64 MB
1 instance
1024 MB de disque/stockage

Après avoir confirmé vos choix, Upsun prendra vos sélections, rassemblera les images précédemment construites, leur appliquera vos sélections de ressources et redéploiera votre application complète. Si vous avez besoin de plus d'informations, veuillez vous référer à notre documentation sur la gestion des ressources sur Upsun.

2. Changements de code

Veuillez noter: Les mêmes règles qui s'appliquent aux flux de travail Git, s'appliquent aux projets Upsun : ne mettez jamais à jour votre environnement de production directement, et créez toujours une nouvelle branche pour tester vos changements locaux.

Pour mettre à jour votre application, créez une nouvelle branche Git comme d'habitude via votre terminal, implémentez les changements que vous souhaitez faire, et poussez la branche vers votre dépôt GitHub.

git switch -c update-hello // modifiez le code, par exemple le message Hello world $ git add . && git commit -m "Change Hello world" $ git push -u origin update-hello

Remarque: si vous avez déjà installé le CLI Upsun, vous pouvez également utiliser la commande upsun push (au lieu de git push) car elle utilisera le Git remote upsun pour pousser votre code, et ce remote est défini comme étant le même que origin.

Il créera automatiquement un nouvel environnement de prévisualisationUpsun inactif , basé sur le code source de votre branche et les données de l'environnement parent (base de données et/ou actifs). Ce nouvel environnement n'est pas actif par défaut, ce qui signifie qu'il ne consomme pas de ressources, vous devez donc l'activer la première fois que vous poussez une nouvelle branche sur votre repo, en utilisant la commande suivante :

upsun environment:activate Êtes-vous sûr de vouloir activer l'environnement update-hello (type : development) ? [O/n] y Activation de l'environnement update-hello ...

Remarque: Comme nous n'avons pas encore configuré les ressources pour notre conteneur d'application, le processus d'activation échouera - mais ne vous inquiétez pas, c'est prévu. Le problème sera résolu avec la sortie de Git25 prévue en janvier 2024 car cette nouvelle version de Git rassemblera et utilisera les paramètres des ressources parentales tels qu'ils sont. En attendant, veuillez suivre les étapes ci-dessus pour configurer les ressources dans votre environnement de prévisualisation.

A la fin de cette activation, votre environnement de prévisualisation est déployé et vous pouvez y accéder soit en utilisant la Console en allant dans l'environnement correspondant et en cliquant sur son URL frontale, soit en utilisant la commande CLI suivante :

$ upsun environment:url -primary

Et juste comme ça, vous êtes prêt à héberger vos applications Next.js sur Upsun. Gardez l'œil ouvert pour de nombreux autres guides à venir, avec de nouveaux articles postés sur notre blog sur une sélection de sujets chaque semaine. En savoir plus sur les fonctionnalités et les capacités d'Upsun.