Pourquoi Deployer Vue sur Vercel ?
Le déploiement d'un projet Vue.js sur Vercel est un processus simple et efficace pour rendre votre application accessible au public. Cela permet non seulement de partager facilement votre travail avec d'autres, mais aussi de déployer des applications rapidement et en toute sécurité.
Un cas concret d'utilisation du déploiement sur Vercel est lorsqu'un développeur crée une application web pour une entreprise locale qui nécessite un accès rapide et sécurisé à ses données. En déployant l'application sur Vercel, la team peut s'assurer que le site est toujours en ligne et facilement accessible.
Prerequis
- Connaissance de base de Vue.js
- Un environnement de développement avec Node.js installé (version 12.x ou supérieure)
- Un compte Vercel (gratuit pour les petits projets)
Concepts fondamentaux
1. Projet Vue.js
Un projet Vue.js est une application web basée sur le framework Vue.js, qui utilise des composants réutilisables et des vues réactives.
<!-- App.vue -->
<template>
<div id="app">
<h1>message</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Bonjour Vercel!'
};
}
};
</script>
<style>
#app {
text-align: center;
}
</style>
2. Configuration de Vercel
Vercel nécessite une configuration simple pour déployer un projet Vue.js. Vous devez créer un fichier vercel.json à la racine de votre projet.
// vercel.json
{
"version": 2,
"builds": [
{
"src": "nuxt.config.js",
"use": "@vercel/nuxt"
}
],
"routes": [
{ src: '/(.*)', dest: '/' }
]
}
3. Déploiement
Pour déployer votre projet sur Vercel, suivez ces étapes :
- Connectez-vous à votre compte Vercel.
- Cliquez sur le bouton "New Project".
- Sélectionnez votre repository GitHub ou GitLab où se trouve votre projet Vue.js.
- Suivez les instructions pour lier votre repository à Vercel et déployer.
Mise en pratique : Projet fil rouge
Nous allons créer un gestionnaire de tâches simple en utilisant Vue.js. Ce projet comprendra une liste des tâches, la possibilité d'ajouter et de supprimer des tâches.
Étape 1 : Création du projet Vue.js
## Créer un nouveau projet Vue.js
npm init vue@latest
Suivez les instructions pour créer votre projet.
Étape 2 : Ajout des dépendances
## Installer Axios pour les appels API
npm install axios
Étape 3 : Structure du projet
Créez une structure de fichier comme suit :
/project-root
/src
/components
TaskList.vue
AddTask.vue
App.vue
main.js
public
index.html
vercel.json
Étape 4 : Implémentation des composants
TaskList.vue
<template>
<div>
<h2>Tasks</h2>
<ul>
<li v-for="task in tasks" :key="task.id">
task.title
<button @click="deleteTask(task.id)">Delete</button>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
tasks: []
};
},
created() {
this.fetchTasks();
},
methods: {
fetchTasks() {
axios.get('/api/tasks')
.then(response => {
this.tasks = response.data;
})
.catch(error => {
console.error('There was an error fetching the tasks!', error);
});
},
deleteTask(id) {
axios.delete(`/api/tasks/${id}`)
.then(() => {
this.fetchTasks();
})
.catch(error => {
console.error('There was an error deleting the task!', error);
});
}
}
};
</script>
AddTask.vue
<template>
<div>
<h2>Add Task</h2>
<form @submit.prevent="addTask">
<input v-model="newTask.title" type="text" placeholder="Title" required>
<button type="submit">Add</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
newTask: {
title: ''
}
};
},
methods: {
addTask() {
axios.post('/api/tasks', this.newTask)
.then(() => {
this.newTask.title = '';
})
.catch(error => {
console.error('There was an error adding the task!', error);
});
}
}
};
</script>
App.vue
<template>
<div id="app">
<h1>Task Manager</h1>
<AddTask />
<TaskList />
</div>
</template>
<script>
import AddTask from './components/AddTask.vue';
import TaskList from './components/TaskList.vue';
export default {
components: {
AddTask,
TaskList
}
};
</script>
main.js
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
Étape 5 : Configuration du backend (Express)
Créez un fichier server.js dans le répertoire racine de votre projet.
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 3000;
app.use(bodyParser.json());
let tasks = [
{ id: 1, title: 'Task 1' },
{ id: 2, title: 'Task 2' }
];
app.get('/api/tasks', (req, res) => {
res.json(tasks);
});
app.post('/api/tasks', (req, res) => {
const newTask = {
id: tasks.length + 1,
title: req.body.title
};
tasks.push(newTask);
res.status(201).json(newTask);
});
app.delete('/api/tasks/:id', (req, res) => {
tasks = tasks.filter(task => task.id !== parseInt(req.params.id));
res.status(204).send();
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
Étape 6 : Configuration de Vercel
Créez un fichier vercel.json pour configurer le déploiement.
{
"version": 2,
"builds": [
{
"src": "server.js",
"use": "@vercel/node"
},
{
"src": "nuxt.config.js",
"use": "@vercel/nuxt"
}
],
"routes": [
{ src: '/(.*)', dest: '/' }
]
}
Erreurs frequentes et debugging
Erreur 1 : TypeError: Cannot read property 'map' of undefined
## ❌ Mauvais
<template>
<div v-for="task in tasks" :key="task.id">
task.title
</div>
</template>
<script>
export default {
data() {
return {
tasks: []
};
}
};
</script>
vue
## ✅ Correct
<template>
<div v-if="tasks && tasks.length > 0">
<div v-for="task in tasks" :key="task.id">
task.title
</div>
</div>
<div v-else>No tasks found</div>
</template>
<script>
export default {
data() {
return {
tasks: []
};
}
};
</script>
Erreur 2 : 404 Not Found
## ❌ Mauvais
npm run serve
bash
## ✅ Correct
vercel dev
Erreur 3 : Failed to load resource: the server responded with a status of 500 (Internal Server Error)
// server.js
app.get('/api/tasks', (req, res) => {
tasks = undefined; // Erreur intentionnelle
res.json(tasks);
});
javascript
// Correction
app.get('/api/tasks', (req, res) => {
if (!tasks) {
tasks = [];
}
res.json(tasks);
});
Pour aller plus loin
1. Utiliser Vue Router
Vue Router est une bibliothèque pour gérer les routes dans votre application Vue.js.
2. Authentification avec Firebase
Firebase offre des services d'authentification faciles à utiliser, permettant de sécuriser facilement vos applications.
3. Optimisation du rendu côté serveur (SSR)
Pour une meilleure performance, vous pouvez utiliser Vue.js avec le rendu côté serveur.
Défi pratique
Développez une application de todo list complète en utilisant Vue.js et le rendu côté serveur (SSR). Ajoutez des fonctionnalités comme la mise à jour et la suppression des tâches.
Bonne chance avec votre projet !