Deployer Vue sur Heroku

Deployer Vue sur Heroku : Un Tutoriel Approfondi

Pourquoi Deployer Vue sur Heroku ?

Le déploiement de projets Vue.js sur Heroku offre une solution pratique pour rendre vos applications web accessibles en ligne sans avoir à gérer un serveur back-end. L'infrastructure cloud de Heroku permet une mise à l'échelle automatique, des mises à jour automatiques et une maintenance minimaliste.

Un cas d'utilisation concret est le déploiement d'un site web de gestion de tâches personnelles ou professionnelles. En utilisant Vue.js pour la interface utilisateur et Heroku pour héberger le backend, vous pouvez facilement partager ce site avec n'importe quel utilisateur.

Prerequis

• Connaissance avancée de JavaScript et Vue.js.
• Compréhension des concepts de base de l'architecture web (HTML, CSS, JavaScript).
• Un compte Heroku et un compte GitHub (pour la gestion du code source).

Outils à installer (versions)

• Node.js v14 ou plus tard
• Git v2.0 ou plus tard

Concepts fondamentaux

1. Vue CLI

Vue CLI est l'interface de ligne de commande officielle pour créer, gérer et développer des applications Vue.js.

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

2. Build Process

Lorsque vous déploiez une application Vue.js sur Heroku, il est nécessaire de construire l'application en production. Vue CLI fournit un outil pour cela :

## Construire l'application en mode production
npm run build

Le résultat du processus de construction se trouve dans le dossier dist.

3. Procfile

Un Procfile est un fichier texte qui spécifie comment Heroku doit exécuter votre application.

web: npm start

Ce fichier indique à Heroku que l'application web doit être lancée avec la commande npm start.

Mise en pratique : Projet fil rouge

Nous allons créer un simple gestionnaire de tâches avec Vue.js. Voici les étapes pour construire le projet :

1. Créer un nouveau projet Vue.js

## Initialiser un nouveau projet Vue.js
vue create task-manager

2. Installer Axios pour la communication backend

## Installer Axios
npm install axios

3. Structure du projet

task-manager/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── TaskList.vue
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md

4. Créer le composant TaskList.vue

<template>
  <div class="task-list">
    <h1>Task Manager</h1>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">task.text</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'TaskList',
  data() {
    return {
      tasks: []
    };
  },
  mounted() {
    this.fetchTasks();
  },
  methods: {
    async fetchTasks() {
      try {
        const response = await axios.get('https://api.example.com/tasks');
        this.tasks = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

<style scoped>
.task-list {
  text-align: center;
}
</style>

5. Mettre à jour App.vue pour utiliser le composant TaskList

<template>
  <div id="app">
    <TaskList />
  </div>
</template>

<script>
import TaskList from './components/TaskList.vue';

export default {
  name: 'App',
  components: {
    TaskList
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6. Ajouter le Procfile

web: npm start

7. Construire l'application en production

## Construire l'application en mode production
npm run build

Erreurs fréquentes et debugging

Voici trois erreurs courantes lors du déploiement de Vue.js sur Heroku :

1. Le serveur ne démarre pas

Code incorrect :

## Dans package.json
"scripts": {
  "start": "node server.js"
}

Code correct :

## Dans package.json
"scripts": {
  "start": "node ./dist/server.js"
}

2. Axios ne fonctionne pas

Code incorrect :

axios.get('/api/tasks');

Code correct :

axios.get('https://api.example.com/tasks');

3. Le build ne se termine pas

Code incorrect :

## Dans package.json
"scripts": {
  "build": "vue-cli-service build"
}

Code correct :

## Dans package.json
"scripts": {
  "build": "vue-cli-service build --mode production"
}

Pour aller plus loin

1. Authentification et Sécurité

En production, vous devrez ajouter une couche d'authentification et de sécurité à votre application.

Concepts avancés : Authentification avec JWT

2. Optimisation des performances

Optimisez les rendus et la performance de votre application en utilisant des techniques comme le lazy loading et le code splitting.

Vue.js Performance Tips

3. Déploiement automatique avec GitHub Actions

Configurez un pipeline d'intégration continue pour déployer automatiquement vos modifications sur Heroku.

Github Actions for Deployment

Défi pratique

Développez une application de chat en temps réel utilisant Vue.js, Socket.io et Express.js. Partagez votre code sur GitHub et déployez-la sur Heroku.

Challenge : Application de Chat en Temps Réel