Deployer Vue sur DigitalOcean

Deployer Vue sur DigitalOcean : Tutoriel approfondi pour un développeur intermédiaire

Pourquoi Deployer Vue sur DigitalOcean ?

Le déploiement de votre application Vue.js sur une plateforme comme DigitalOcean permet d'offrir une haute disponibilité et des performances optimales. En effet, les serveurs dédiés de DigitalOcean offrent des ressources puissantes et sont facilement scalable, ce qui est essentiel pour une application modernne. Un cas concret d'utilisation serait un site web de commerce électronique avec une grande base d'utilisateurs, nécessitant une scalabilité élevée.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• Connaissances techniques :

  • Familiarité avec Vue.js
  • Connaissance de la ligne de commande (Terminal)
  • Compréhension des bases de l'infrastructure cloud (DigitalOcean)

• Outils à installer :

  • Node.js v14.0 ou plus récent
  • npm (Node Package Manager) v6.0 ou plus récent
  • Git
  • SSH (pour accéder au serveur)
  • Un compte DigitalOcean

Concepts fondamentaux

Vue CLI

Vue CLI est un outil de ligne de commande qui permet de créer et de gérer des projets Vue.js. Il offre une structure de base prête à l'emploi, facilitant le développement.

## Installation de Vue CLI via npm
npm install -g @vue/cli

Serveur Node.js

Un serveur Node.js est un environnement d'exécution JavaScript côté serveur. Dans ce cas, nous utiliserons Express pour créer notre serveur.

// Importation du module express
const express = require('express');
const app = express();
const port = 3000;

// Route de base
app.get('/', (req, res) => {
  res.send('Hello World!');
});

// Démarrage du serveur
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Configuration de la base de données

Pour une application réelle, vous aurez besoin d'une base de données. Voici un exemple simple avec MongoDB.

## Installation de MongoDB via npm
npm install mongodb
javascript
// Connexion à MongoDB
const { MongoClient } = require('mongodb');

async function main() {
  const uri = "your_mongodb_connection_string";
  const client = new MongoClient(uri);

  try {
    await client.connect();
    console.log("Connected to MongoDB");
  } finally {
    await client.close();
  }
}

main().catch(console.error);

Mise en pratique : projet fil rouge

Création du projet Vue.js

## Création d'un nouveau projet Vue.js
vue create todo-app
cd todo-app

Ajout d'une fonctionnalité de création de tâches

// src/components/TodoForm.vue
<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" placeholder="Ajouter une tâche" />
    <button type="submit">Ajouter</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      newTodo: ''
    };
  },
  methods: {
    addTodo() {
      this.$emit('add-todo', this.newTodo);
      this.newTodo = '';
    }
  }
};
</script>
javascript
// src/components/TodoList.vue
<template>
  <ul>
    <li v-for="todo in todos" :key="todo">todo</li>
  </ul>
</template>

<script>
export default {
  props: {
    todos: Array
  }
};
</script>
javascript
// src/App.vue
<template>
  <div id="app">
    <TodoForm @add-todo="addTodo" />
    <TodoList :todos="todos" />
  </div>
</template>

<script>
import TodoForm from './components/TodoForm.vue';
import TodoList from './components/TodoList.vue';

export default {
  components: {
    TodoForm,
    TodoList
  },
  data() {
    return {
      todos: []
    };
  },
  methods: {
    addTodo(todo) {
      this.todos.push(todo);
    }
  }
};
</script>

Création du serveur Node.js

// server.js
const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

let todos = [];

app.post('/todos', (req, res) => {
  const newTodo = req.body;
  todos.push(newTodo);
  res.status(201).send(todos);
});

app.get('/todos', (req, res) => {
  res.send(todos);
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Erreurs frequentes et debugging

Erreur 404 : Le fichier n'est pas trouvé

## Sur le serveur DigitalOcean
cd /var/www/html
nano index.html

Ajoutez la ligne suivante :

<script src="app.js"></script>

Erreur de connexion à la base de données

// Connexion à MongoDB via npm
const { MongoClient } = require('mongodb');

async function main() {
  const uri = "your_mongodb_connection_string";
  const client = new MongoClient(uri);

  try {
    await client.connect();
    console.log("Connected to MongoDB");
  } finally {
    await client.close();
  }
}

main().catch(console.error);

Correction :

const uri = "mongodb+srv://username:password@cluster0.mongodb.net/todo-app?retryWrites=true&w=majority";

Pour aller plus loin

1. Intégration des tests unitaires : Utilisez Jest pour écrire et exécuter des tests unitaires.
2. Sécurité de l'application : Apprenez les meilleures pratiques en matière de sécurité pour votre application Vue.js.
3. Optimisation des performances : Explorez les techniques d'optimisation pour améliorer la vitesse et le rendu de votre application.

Défi pratique

Créez une simple application de gestion de notes à faire avec Vue.js et Node.js, en utilisant une base de données MongoDB. Assurez-vous que l'application est bien structurée et qu'elle dispose d'une interface utilisateur intuitive.