Introduction

Le déploiement d'une application Web Next.js en production peut être rationalisé et efficace en exploitant les pipelines AWS (Amazon Web Services) Elastic Beanstalk, Docker et CI/CD avec AWS Code Build, Code Deploy et GitLab. Ce guide vous guidera dans la configuration d'un pipeline de déploiement moderne pour garantir que votre application est robuste, évolutive et facile à maintenir.

Conditions préalables

Avant de vous lancer dans le processus de déploiement, assurez-vous d'avoir :

• Un compte racine AWS ou un compte IAM avec l'autorisation de créer des environnements Elastic Beanstalk dans AWS

• Docker installé sur votre ordinateur local

• Compte GitLab ou GitHub avec un référentiel pour votre application Next.js

• Un projet Next.js prêt à être déployé

Étape 1 : Configurer AWS Elastic Beanstalk

• Créez un environnement Elastic Beanstalk : connectez-vous à la console de gestion AWS, accédez à Elastic Beanstalk et créez une nouvelle application.

• Entrez le nom de votre application et cliquez sur Créer.

• Après avoir créé l'application, il est maintenant temps de créer le nouvel environnement. Cliquez sur Créer un nouvel environnement.

• Choisissez l'environnement du serveur Web. Le nom de l'environnement aura le suffixe env avec le nom de votre application, et vous pourrez le modifier si vous le souhaitez.

• Entrez le nom d'environnement valide ainsi que le domaine. Saisissez le nom de domaine .

• Choisissez la plateforme appropriée. Dans ce cas, nous choisirons Managed Platform et Docker comme plateforme.

• Dans le code de l'application, choisissez Exemple d'application puisque nous déploierons notre propre code via AWS Code Pipeline.

• Dans les préréglages, vous pouvez le laisser par défaut, cependant, pour les applications de production, il est conseillé d'utiliser l'instance Haute disponibilité. Une fois que vous avez sélectionné le préréglage, cliquez sur Suivant.

• Créez ou utilisez votre rôle de service existant. Il est important de disposer du rôle de service Elastic Beanstalk ainsi que de la configuration du rôle de service EC2 avant de procéder à la création de l'instance EC2.
  Cependant, si vous souhaitez vous connecter en SSH à l'instance EC2 depuis votre terminal, ajoutez une paire de clés EC2 et créez un profil d'instance EC2 pour effectuer les opérations nécessaires.

• Choisissez votre VPC dans lequel vous souhaitez déployer votre instance EC2.

• Après avoir sélectionné le VPC, choisissez le sous-réseau dans chaque zone de disponibilité. Pour exécuter votre équilibreur de charge et vos instances dans les mêmes sous-réseaux publics, attribuez des adresses IP publiques aux instances comme indiqué dans l'image.

• Puisque nous n'avons pas besoin de configurer une base de données, nous pouvons passer à l'étape suivante en cliquant sur Suivant.

• Pour le volume racine, nous choisirons un SSD à usage général.

• Maintenant, à partir du groupe de sécurité, vous pouvez soit sélectionner un groupe de sécurité déjà existant, soit le laisser tel quel, et Elastic Beanstalk en créera un pour vous lors de la configuration de l'instance EC2.

• En cas de déploiement à des fins de production, il est toujours conseillé de configurer la mise à l'échelle automatique et de sélectionner le type d'instance qu'Elastic Beanstalk créera pour servir le trafic. Nous irons avec la famille t3.

• Cliquez sur Suivant.

• Dans les rapports sur l'état de santé, nous utiliserons les rapports de base, mais n'hésitez pas à choisir parmi les options disponibles en fonction du type de rapport dont vous avez besoin.

• Nous décocherons également les mises à jour de la plateforme gérée car elles ne sont pas requises pour le site Web de démonstration.

• Conservez le reste des paramètres tels quels et cliquez sur Suivant.

• Enfin, vérifiez vos modifications et cliquez sur Soumettre.

• Elastic Beanstalk lancera votre environnement, et cela prendra un certain temps.

• Après un lancement réussi, vous verrez un écran de félicitations.

Étape 2 : Créez votre application Next.js (ou utilisez-en une existante)

• Pour créer une application Next.js, ouvrez votre terminal, cd dans le répertoire dans lequel vous souhaitez créer l'application et exécutez la commande suivante :

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter" 

Si votre code existant est déjà prêt, vous pouvez passer à la partie suivante

• Vous disposez maintenant d'un nouveau répertoire appelé nextjs-blog. Insérons-y :

cd nextjs-blog 

Ensuite, exécutez la commande suivante :

npm run dev 

Cela démarre le « serveur de développement » de votre application Next.js (nous en parlerons plus tard) sur le port 3000.

Vérifions si cela fonctionne. Ouvrez http://localhost:3000 dans votre navigateur.

• Il est maintenant temps de créer un Dockerfile dans l'application.

• Créez un fichier nommé Dockerfile à la racine de votre application et ajoutez le code suivant :
  

FROM node:18-alpine 

RUN mkdir -p /app 

WORKDIR /app 

COPY . . 

RUN npm install 

RUN npm run build 

EXPOSE 3000 

CMD ["npm", "start"] 

• Après avoir effectué les modifications, il est important de vérifier si la build a réussi. Démarrez le moteur Docker et exécutez la commande suivante :

docker build -t testapp . 

Une fois la compilation réussie, exécutez l'application avec la commande ci-dessous :

docker run -p 3000:3000 testapp 

• Créez un fichier nommé buildspec.yml à la racine de votre application et ajoutez le code suivant. Ce fichier sera utilisé ultérieurement lors de la configuration du pipeline de code au sein d'AWS.

version: 0.2 

artifacts: 

  type: zip 

  files: 

    - '**/*' 

• Après avoir ajouté ces fichiers à votre code nouveau ou existant, transférez ces modifications vers le référentiel distant sur Gitlab ou GitHub.

Étape 3 : Configurer le pipeline de code

• Connectez-vous à AWS Management Console, accédez à Code Pipeline et cliquez sur créer un pipeline.

• Entrez un nom de pipeline valide et choisissez le mode d'exécution du pipeline. Dans notre cas, nous sélectionnerons Queued (Pipeline type V2 requis).

• Créez un nouveau rôle de service s'il n'existe pas déjà ou sélectionnez un rôle de service existant et cliquez sur Suivant.

• Depuis le fournisseur source, sélectionnez l'emplacement de stockage de vos artefacts. Nous sélectionnerons "Gitlab".

• Dans la liste des connexions, sélectionnez une connexion existante ou créez une nouvelle connexion.

• Une fois la connexion réussie, sélectionnez ensuite le nom du référentiel et la branche à partir de laquelle le code sera utilisé.

• Pour le type de déclencheur, nous choisirons Aucun filtre et cliquerons sur Suivant.

• Ensuite, nous sélectionnons le fournisseur de build. Dans notre cas, nous sélectionnerons AWS Code Build. Sélectionnez la région ou laissez-la à la région AWS par défaut.

• Créez ensuite un nouveau projet dans Code Build en cliquant sur Créer un projet. Cela ouvrira une nouvelle fenêtre. Entrez le nom du projet et laissez tout ce qui se trouve dans l'environnement par défaut.

• Lors de la spécification de la spécification de build, assurez-vous de sélectionner Utiliser le fichier buildspec. Il s'agit du même fichier que nous avons créé précédemment. Laissez les autres paramètres par défaut et passez à l’étape suivante.

• Lorsque vous cliquez sur Continuer vers le pipeline de code, la fenêtre se fermera automatiquement et vous ramènera à l'écran du pipeline de code.

• Spécifiez le type de build comme build unique et cliquez sur Suivant.

• Dans l'étape d'ajout de déploiement, sélectionnez le fournisseur de déploiement. Dans ce cas, ce sera AWS Elastic Beanstalk où nous souhaitons que l'application soit finalement déployée.

• Sélectionnez le nom de l'application, le nom de l'environnement, configurez les paramètres de restauration et cliquez sur Suivant. Vérifiez les paramètres de votre pipeline de code et cliquez sur Créer un pipeline.

Étape 4 : Le site Web est en ligne !

Le déploiement de l'application Web Next.js en production est vraiment simple et peut être effectué plus efficacement avec les pipelines AWS Elastic Beanstalk, Docker et CI/CD à l'aide d'AWS Code Build, Code Deploy et GitLab.

Vous pouvez y accéder en utilisant l'URL fournie par Elastic Beanstalk. Apportez des modifications localement et il sera automatiquement déployé lorsque vous le pousserez vers votre succursale.

Bon codage !!