Deployer Vue sur Fly.io

Pourquoi Deployer Vue sur Fly.io ?

Deployer une application Vue.js sur Fly.io est un processus efficace et simple qui permet de créer une expérience utilisateur sur Internet en quelques minutes seulement. Fly.io offre des instances serverless pour les applications web, ce qui signifie que vous payez uniquement pendant le temps d'exécution de votre application, ce qui est idéal pour les petites et moyennes entreprises.

Un cas concret d'utilisation serait d'héberger une plateforme d'e-commerce en ligne. Ainsi, chaque fois qu'un utilisateur accède au site, l'application sera déployée sur un serveur Fly.io, garantissant une performance optimale et une disponibilité élevée.

Prerequis

• Connaissance de base de Vue.js
• Node.js et npm installés (version 14.0 ou supérieure)
• Un compte Fly.io
• Un terminal accessible

Concepts fondamentaux

1. Fly.io CLI

Fly.io propose une interface en ligne de commande (CLI) pour gérer facilement vos applications serverless.

## Installation de la CLI Fly.io
curl -L https://fly.io/install.sh | sh

## Connexion à votre compte Fly.io
flyctl auth login

2. Structure du Projet

Une application Vue.js est structurée en composants et fichiers. Voici une structure de base d'un projet Vue.js :

my-vue-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   └── ...
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md

3. Configuration de Fly.io

Créez un fichier fly.toml à la racine de votre projet pour configurer Fly.io :

## fly.toml

app = "my-vue-app"

[build]
  image = "node:14"
  command = "npm install && npm run build"

[env]
  NODE_ENV = "production"

[http]
  services = [
    { internal_port = 8080, protocol = "tcp" },
  ]

4. Création de l'Application

Créez un fichier main.js pour démarrer votre application Vue.js :

// src/main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

5. Déploiement sur Fly.io

Enfin, déployez votre application sur Fly.io avec la commande suivante :

## Déploiement de l'application
flyctl launch

Mise en pratique : projet fil rouge

Nous allons créer un simple gestionnaire de tâches en utilisant Vue.js. Voici les étapes pour construire cette application et la déployer sur Fly.io.

1. Création du Projet

Commencez par créer un nouveau projet Vue.js :

## Création d'un nouveau projet Vue.js
npm init vue@latest my-vue-app
cd my-vue-app

2. Structure de l'Application

La structure de base de votre application devrait ressembler à celle-ci :

my-vue-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   └── TaskList.vue
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md

3. Définition des Composants

Créez un composant TaskList.vue pour gérer les tâches :

<!-- src/components/TaskList.vue -->

<template>
  <div>
    <h1>Tâches</h1>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        task
        <button @click="removeTask(index)">Supprimer</button>
      </li>
    </ul>
    <input v-model="newTask" placeholder="Ajouter une tâche" />
    <button @click="addTask">Ajouter</button>
  </div>
</template>

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

4. Intégration du Composant dans l'Application

Modifiez App.vue pour inclure le composant TaskList :

<!-- src/App.vue -->

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

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

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

5. Ajout des Dépendances

Assurez-vous que toutes les dépendances nécessaires sont installées :

## Installation des dépendances
npm install

6. Build de l'Application

Construisez votre application pour la production :

## Build de l'application
npm run build

7. Déploiement sur Fly.io

Enfin, déployez votre application sur Fly.io :

## Déploiement de l'application
flyctl launch

Erreurs frequentes et debugging

Voici quelques erreurs courantes lors du déploiement de Vue.js sur Fly.io et les solutions pour y remédier.

1. Erreur : Error: listen EADDRINUSE :::8080

Cette erreur indique que le port 8080 est déjà utilisé sur votre machine.

## Code incorrect
flyctl launch

## Code correct
flyctl launch --addr localhost:3000

2. Erreur : Error: failed to run user process (exit status 1)

Cette erreur peut se produire si des dépendances sont manquantes ou mal installées.

## Code incorrect
npm run build

## Code correct
npm install
npm run build

3. Erreur : Error: failed to execute script (exit status 1)

Cette erreur peut se produire si la configuration de Fly.io est incorrecte.

## fly.toml
[env]
  NODE_ENV = "production"

[http]
  services = [
    { internal_port = 8080, protocol = "tcp" },
  ]

Pour aller plus loin

Voici quelques pistes pour approfondir votre compréhension de Fly.io et Vue.js :

1. Fly.io : Documentation officielle
2. Vue.js : Documentation officielle

Défi pratique

Créez une application de gestion de contacts en utilisant Vue.js et Fly.io. L'application devrait permettre d'afficher, ajouter, modifier et supprimer des contacts.