Deployer Vue avec Docker

Pourquoi Deployer Vue avec Docker ?

Le déploiement de votre application Vue.js avec Docker est une pratique courante pour plusieurs raisons. Tout d'abord, Docker permet de créer des environnements de développement cohérents et isolés, ce qui facilite la collaboration entre les développeurs. Deuxièmement, cela simplifie le processus de déploiement sur n'importe quel système qui supporte Docker, sans avoir à s'inquiéter des dépendances spécifiques à l'environnement d'hébergement.

Un cas concret est un projet d'équipe où plusieurs développeurs travaillent sur la même application. Chaque membre de l'équipe peut utiliser une version différente du système d'exploitation et des outils, mais grâce au Dockerfile, ils peuvent s'assurer qu'ils travaillent dans le même environnement, ce qui diminue les problèmes liés aux incompatibilités.

Prerequis

• Connaissance de base de Vue.js (Composition API ou Options API)
• Familiarité avec Node.js et npm
• Installation de Docker et Docker Compose sur votre système

Concepts fondamentaux

1. Dockerfile

Un Dockerfile est un fichier texte qui contient toutes les instructions nécessaires pour construire une image Docker.

## dockerfile
FROM node:14-alpine

## Copie le package.json et le package-lock.json dans le container
COPY package*.json ./

## Installe les dépendances du projet
RUN npm install

## Copie tous les fichiers du projet dans le container
COPY . .

## Expose le port sur lequel l'application va tourner
EXPOSE 8080

## Démarre l'application au démarrage du conteneur
CMD ["npm", "run", "serve"]

2. docker-compose.yml

docker-compose.yml est un fichier de configuration qui permet de définir et d'exécuter plusieurs conteneurs Docker.

## docker-compose.yml
version: '3'
services:
  app:
    build: .
    ports:
      - "8080:8080"
    volumes:
      - .:/app
      - /app/node_modules

Mise en pratique : projet fil rouge

Nous allons créer un simple gestionnaire de tâches avec Vue.js et déploié sur Docker.

1. Création du projet Vue.js

## Créer le projet Vue.js
npm install -g @vue/cli
vue create task-manager
cd task-manager

2. Ajout des fonctionnalités de base

Modifier src/App.vue pour ajouter une interface utilisateur simple.

<!-- src/App.vue -->
<template>
  <div id="app">
    <h1>Task Manager</h1>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="Add a new task"/>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        task
        <button @click="removeTask(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      newTask: '',
      tasks: []
    }
  },
  methods: {
    addTask() {
      if (this.newTask) {
        this.tasks.push(this.newTask)
        this.newTask = ''
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1)
    }
  }
}
</script>

3. Création du Dockerfile

Créer un fichier Dockerfile à la racine de votre projet.

## dockerfile
FROM node:14-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 8080

CMD ["npm", "run", "serve"]

4. Création du docker-compose.yml

Créer un fichier docker-compose.yml à la racine de votre projet.

## docker-compose.yml
version: '3'
services:
  app:
    build: .
    ports:
      - "8080:8080"
    volumes:
      - .:/app
      - /app/node_modules

5. Build et lancement du conteneur Docker

## Construire et lancer le conteneur
docker-compose up --build

Accédez à http://localhost:8080 dans votre navigateur pour voir votre application en cours d'exécution.

Erreurs frequentes et debugging

1. "Error: Cannot find module 'vue'"

Cause : Le module Vue n'est pas installé correctement.

## Code incorrect
npm install vue

## Code correct
npm install --save vue@^3.0.0

2. "Module not found: Error: Can't resolve 'path/to/module'"

Cause : Le chemin du module n'est pas correct.

## Code incorrect
import MyComponent from './components/MyComponent.vue'

## Code correct
import MyComponent from '@/components/MyComponent.vue'

3. "Permission denied: /app/node_modules"

Cause : Les permissions sur le volume monté ne sont pas correctes.

## Corriger les permissions
chmod -R 755 node_modules

Pour aller plus loin

1. Docker multitiers : Apprenez à utiliser Docker pour créer des environnements de développement multitiers en utilisant Docker Compose.
2. Utilisation de l'optimization de production avec Vue CLI : Découvrez comment optimiser votre application Vue.js pour la production en utilisant les outils fournis par Vue CLI.
3. Intégration continue et livraison continue (CI/CD) : Automatisez le processus de déploiement avec des outils comme Jenkins, GitLab CI ou GitHub Actions.

Défi pratique : Créez une application complète utilisant un backend Node.js pour gérer les tâches. Utilisez Docker Compose pour déployer l'ensemble de votre application en un seul coup.