Deployer Nuxt sur DigitalOcean : un tutoriel approfondi
Pourquoi Deployer Nuxt sur DigitalOcean ?
En tant que développeur senior Nuxt avec 10+ ans d'expérience, je sais combien il est important de disposer d'un environnement robuste et performant pour déployer nos applications. DigitalOcean offre des serveurs de haute performance à un prix compétitif, ce qui rend son déploiement idéal pour les projets Nuxt.
Un cas concret en 2-3 phrases : Imaginez que vous avez développé une application web complète utilisant Nuxt.js, et vous souhaitez la déployer sur une plateforme cloud fiable. Avec DigitalOcean, vous pouvez obtenir un environnement optimisé pour votre application, avec des ressources puissantes et facilement évoluables.
Prerequis
Avant de commencer le déploiement, assurez-vous d'avoir les éléments suivants :
- Un compte DigitalOcean
- Node.js 12.x ou plus récent
- Nuxt CLI installé (
npm install -g @nuxt/cli) - Git pour la gestion du code source (optionnel mais recommandé)
Concepts fondamentaux
1. Comprendre les concepts de base
Pour comprendre le déploiement sur DigitalOcean, nous devons aborder quelques concepts clés :
a) Droplet
Un Droplet est une instance virtuelle sur la plateforme DigitalOcean. Il s'agit d'un environnement complet et séparé où vous pouvez exécuter votre application.
## Créer un nouveau Droplet
doctl compute droplet create my-nuxt-app --image ubuntu-20-04-x64 --size s-1vcpu-1gb --region nyc3
b) DNS et Domaine
Vous aurez besoin d'un domaine pour accéder à votre application en ligne. Vous pouvez configurer un nom de domaine personnalisé sur DigitalOcean.
## Ajouter une A Record pour le domaine
doctl compute domain record create mydomain.com --record-name www --record-data 123.45.67.89
c) Port Forwarding et Firewall
Pour permettre l'accès à votre application, vous devrez configurer des règles de pare-feu et du port forwarding.
## Ouvrir le port 80 pour HTTP et le port 443 pour HTTPS
doctl compute firewall create --name nuxt-app-firewall \
--inbound-rules 'protocol:tcp,ports:22,address:0.0.0.0/0' \
'protocol:tcp,ports:80,address:0.0.0.0/0' \
'protocol:tcp,ports:443,address:0.0.0.0/0'
2. Configurer Nuxt.js pour le déploiement
Pour que votre application Nuxt.js fonctionne correctement sur DigitalOcean, vous devez configurer quelques paramètres :
a) Environnement de Production
Assurez-vous que votre application est configurée pour le mode production.
## Installer les dépendances et construire l'application
npm install
npm run build
b) Configuration du serveur web
Vous aurez besoin d'un serveur web pour servir votre application Nuxt.js. Vous pouvez utiliser NGINX ou Apache.
Exemple avec NGINX :
## Installer NGINX
sudo apt update
sudo apt install nginx
## Configurer NGINX pour votre application Nuxt.js
sudo nano /etc/nginx/sites-available/my-nuxt-app
server {
listen 80;
server_name mydomain.com;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
## Activer la configuration
sudo ln -s /etc/nginx/sites-available/my-nuxt-app /etc/nginx/sites-enabled/
## Relancer NGINX
sudo systemctl restart nginx
3. Déploiement
Pour déployer votre application Nuxt.js sur DigitalOcean, vous pouvez utiliser des méthodes comme SCP ou Git.
Exemple avec SCP :
## Copier les fichiers du projet vers le Droplet
scp -r ./* root@123.45.67.89:/home/root/my-nuxt-app
## Installer les dépendances et construire l'application sur le Droplet
ssh root@123.45.67.89 "cd /home/root/my-nuxt-app && npm install && npm run build"
Exemple avec Git :
## Configurer un dépôt Git sur DigitalOcean
git init --bare /var/www/my-nuxt-app.git
## Ajouter un webhook pour déclencher le déploiement
curl -X POST \
https://api.digitalocean.com/v2/domains/mydomain.com/records \
-H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
-H "Content-Type: application/json" \
-d '{
"type": "A",
"name": "deploy",
"data": "123.45.67.89",
"ttl": 60
}'
## Configurer le webhook dans votre dépôt Git pour déclencher la commande de déploiement
Mise en pratique : projet fil rouge
Créer un gestionnaire de tâches simple
Pour cet exemple, nous allons créer un gestionnaire de tâches simple utilisant Nuxt.js.
1. Initialiser le projet
## Créer un nouveau projet Nuxt.js
npx create-nuxt-app nuxt-todo
cd nuxt-todo
2. Configurer les dépendances
## Installer Axios pour les appels API
npm install axios
3. Créer la structure du projet
Créez le fichier pages/index.vue :
<template>
<div>
<h1>Gestionnaire de Tâches</h1>
<form @submit.prevent="addTask">
<input type="text" v-model="newTask" placeholder="Ajouter une tâche" />
<button type="submit">Ajouter</button>
</form>
<ul>
<li v-for="(task, index) in tasks" :key="index">
task.text
<button @click="removeTask(index)">Supprimer</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newTask: '',
tasks: []
};
},
methods: {
addTask() {
if (this.newTask) {
this.tasks.push({ text: this.newTask });
this.newTask = '';
}
},
removeTask(index) {
this.tasks.splice(index, 1);
}
}
};
</script>
4. Construire et déployer le projet
## Installer les dépendances et construire l'application
npm install
npm run build
## Déploiement sur DigitalOcean (utilisez la méthode SCP)
scp -r dist root@123.45.67.89:/home/root/nuxt-todo/dist
Erreurs frequentes et debugging
1. Problème de port
Message d'erreur :
Error: listen EADDRINUSE: address already in use :::3000
Code incorrect :
## Tentative de démarrer l'application sur le port 3000
npm run start
Code correct :
## Démarrer l'application sur un autre port (par exemple, 3001)
PORT=3001 npm run start
2. Problème de DNS
Message d'erreur :
Error: getaddrinfo ENOTFOUND mydomain.com
Code incorrect :
## Tentative de démarrer l'application avec le nom de domaine non configuré
npm run start
Code correct :
## Configurer le DNS et relancer l'application
doctl compute domain record create mydomain.com --record-name www --record-data 123.45.67.89
npm run start
3. Problème de configuration du serveur web
Message d'erreur :
nginx: [emerg] listen() to 0.0.0.0:80 failed (98: Address already in use)
Code incorrect :
## Tentative de configurer NGINX pour le port 80
sudo nano /etc/nginx/sites-available/my-nuxt-app
Code correct :
## Ouvrir un autre port pour NGINX (par exemple, 8080)
server {
listen 8080;
server_name mydomain.com;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Pour aller plus loin
1. Optimiser les performances
- Utilisez des plugins comme
@nuxtjs/axiospour gérer les appels API. - Configurez la pagination pour les listes de tâches volumineuses.
2. Ajouter une base de données
- Utilisez un service de base de données comme MongoDB sur DigitalOcean pour stocker les tâches.
- Configurer l'authentification et la sécurité des données.
3. Moniter et maintenir
- Utilisez des outils comme PM2 pour gérer le processus de votre application Nuxt.js.
- Configurez des logs pour suivre les erreurs et les performances en temps réel.
Défi pratique
Créez une API simple utilisant Nuxt.js pour stocker et récupérer des notes. Utilisez un service comme MongoDB sur DigitalOcean pour stocker les données. Assurez-vous de configurer le déploiement automatique avec Git et de mettre en place des règles de pare-feu sécurisées.
Ce tutoriel approfondi devrait vous aider à déployer votre application Nuxt.js sur DigitalOcean efficacement, en passant par les concepts fondamentaux et la mise en pratique d'un projet fil rouge. N'oubliez pas de tester attentivement chaque étape pour éviter les erreurs et assurer le bon fonctionnement de votre application en production.