Deployer Next.js sur DigitalOcean

Deployer Next.js sur DigitalOcean

Pourquoi Deployer Next.js sur DigitalOcean ?

Le déploiement de Next.js sur DigitalOcean permet aux développeurs d'offrir des applications web performantes et sécurisées à grande échelle. Cela est particulièrement important dans un environnement où la popularité croissante des sites Web nécessite une haute disponibilité et des temps de réponse rapides.

Un cas concret est celui d'un site e-commerce ou d'une application mobile backend qui nécessite des performances élevées pour assurer une expérience utilisateur fluide. Le déploiement sur DigitalOcean offre les ressources nécessaire pour gérer la charge d'utilisateurs potentiellement très importante tout en maintenant un coût compétitif.

Prerequis

• Connaissance approfondie de JavaScript et React
• Familiarité avec Next.js
• Un compte DigitalOcean
• Node.js version 12.0 ou supérieure installé localement

Concepts fondamentaux

1. Environnement d'Hébergement (Hosting)

L'environnement d'hébergement est le lieu où votre application est déployée et exécutée sur Internet. Pour Next.js, il existe plusieurs options, mais DigitalOcean offre une solution robuste avec des ressources performantes.

2. Serveur Web

Un serveur web est un logiciel qui gère les demandes HTTP entrantes et renvoie les réponses appropriées. Dans le cas de Next.js, le serveur web utilise généralement NGINX ou Apache pour traiter les requêtes.

3. Base de Données

La base de données stocke les données persistantes nécessaires à votre application. DigitalOcean offre une variété de solutions de bases de données, notamment PostgreSQL et MongoDB.

4. Déploiement continu (CI/CD)

Le déploiement continu permet de continuer à améliorer l'application en incorporant régulièrement les modifications dans le code source. Cela peut être réalisé via GitHub Actions ou DigitalOcean App Platform.

Mise en pratique : projet fil rouge

Mini-Projet : Un Gestionnaire de Tâches

Ce mini-projet est un simple gestionnaire de tâches permettant aux utilisateurs de créer, modifier et supprimer des tâches. Il utilise Next.js pour la logique côté serveur et React pour l'interface utilisateur.

Étape 1 : Créer le projet

npx create-next-app@latest task-manager
cd task-manager

Étape 2 : Créer les composants React

Créez un fichier Task.js dans le dossier components.

// components/Task.js
import { useState } from 'react';

const Task = ({ task, onDelete }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [editedTask, setEditedTask] = useState(task);

  const handleEditChange = (e) => {
    setEditedTask(e.target.value);
  };

  const handleSave = () => {
    onDelete(task.id, editedTask);
    setIsEditing(false);
  };

  return (
    <div>
      {isEditing ? (
        <input
          type="text"
          value={editedTask}
          onChange={handleEditChange}
        />
        <button onClick={handleSave}>Enregistrer</button>
      ) : (
        <>
          <span>{task.title}</span>
          <button onClick={() => setIsEditing(true)}>Modifier</button>
          <button onClick={() => onDelete(task.id)}>Supprimer</button>
        </>
      )}
    </div>
  );
};

export default Task;

Étape 3 : Créer la page d'accueil

Créez un fichier index.js dans le dossier pages.

// pages/index.js
import { useState } from 'react';
import Task from '../components/Task';

const Home = () => {
  const [tasks, setTasks] = useState([
    { id: 1, title: 'Faire les courses' },
    { id: 2, title: 'Nettoyer la maison' },
  ]);

  const addTask = (title) => {
    setTasks([...tasks, { id: tasks.length + 1, title }]);
  };

  const deleteTask = (id, newTitle) => {
    setTasks(tasks.filter((task) => task.id !== id));
    if (newTitle) {
      // Simuler la mise à jour de la tâche
      alert(`Tâche ${id} mise à jour : ${newTitle}`);
    }
  };

  return (
    <div>
      <h1>Gestionnaire de Tâches</h1>
      <button onClick={() => addTask(prompt('Nouvelle tâche'))}>Ajouter une tâche</button>
      {tasks.map((task) => (
        <Task key={task.id} task={task} onDelete={deleteTask} />
      ))}
    </div>
  );
};

export default Home;

Étape 4 : Créer le fichier package.json

Ajoutez des scripts pour faciliter le déploiement.

{
  "name": "task-manager",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "latest",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

Étape 5 : Lancer le serveur local

npm run dev

Visitez http://localhost:3000 pour voir votre gestionnaire de tâches en action.

Erreurs frequentes et debugging

Erreur 1 : Le serveur ne démarre pas

Message d'erreur :

Error: listen EACCES: permission denied 0.0.0.0:80

Code incorrect :

npm run start

Code correct :

sudo npm run start

Erreur 2 : Problème avec la base de données

Message d'erreur :

error TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.

Code incorrect :

const user = await prisma.user.findUnique({
  where: { id: userId },
});

Code correct :

const user = await prisma.user.findUnique({
  where: { id: parseInt(userId) }, // Assurez-vous que userId est un nombre
});

Erreur 3 : Problème avec le déploiement continu

Message d'erreur :

Error: Repository not found

Code incorrect :

- name: Deploy to DigitalOcean
  uses: appleboy/ssh-action@master
  with:
    host: $secrets.DO_HOST
    username: root
    key: $secrets.DO_KEY
    script: |
      npm install -g now
      now --prod task-manager

Code correct :

- name: Deploy to DigitalOcean
  uses: appleboy/ssh-action@master
  with:
    host: $secrets.DO_HOST
    username: root
    key: $secrets.DO_KEY
    script: |
      npm install -g now
      now --prod task-manager --token $secrets.NOW_TOKEN

Pour aller plus loin

1. Intégration avec une base de données relationnelle : Apprenez à utiliser Prisma pour gérer les interactions avec une base de données PostgreSQL.
2. Déploiement sur DigitalOcean App Platform : Explorez la facilité de déploiement offerte par DigitalOcean App Platform, qui permet d'automatiser le processus de déploiement continu.
3. Performance et optimisation : Découvrez comment améliorer les performances de votre application Next.js avec des techniques comme le pré-rendering et la lazy loading.

Défi pratique

Définissez une API de blog simple : Créez un backend en utilisant Express.js pour gérer les opérations CRUD sur les articles de blog. Intégrez ce backend dans votre application Next.js frontend pour permettre aux utilisateurs de créer, lire, mettre à jour et supprimer des articles.