Deployer Nuxt sur Fly.io

Pourquoi Déployer Nuxt sur Fly.io ?

Deployer Nuxt sur Fly.io est une excellente solution pour les développeurs qui cherchent à rendre leurs applications web plus rapides, scalables et fiables. Avec Fly.io, vous pouvez déployer des applications Nuxt.js en quelques minutes, tout en profitant de la puissance de l'infrastructure cloud. Un cas concret d'utilisation serait un site e-commerce ou une plateforme collaborative nécessitant un temps de réponse minimal et une haute disponibilité.

Prerequis

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

• Node.js version 14.x ou supérieure
• Yarn ou npm installé
• Un compte Fly.io

Outils à installer :

• Node.js
• Yarn (optionnel)
• Fly CLI

Concepts fondamentaux

1. Nuxt.js

Nuxt.js est un framework JavaScript pour construire des applications universelles et hybrides. Il utilise Vue.js, Vue Router, Vuex et Axios par défaut.

// nuxt.config.js
export default {
  // Configuration de base
}

2. Fly.io

Fly.io est une plateforme d'hébergement déclaratif qui vous permet de déploiement rapide et échellez votre application en un clic.

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

3. Déploiement

Le déploiement sur Fly.io se fait via une commande simple qui prend en charge toutes les configurations nécessaires.

## Login avec Fly.io
flyctl auth login

## Créer un nouveau service
flyctl launch --name mon-nuxt-app

## Déployer l'application
flyctl deploy

Mise en pratique : Projet fil rouge

Nous allons créer une petite application de gestion des tâches appelée "TodoList". L'application permettra aux utilisateurs de créer, lire, mettre à jour et supprimer des tâches.

Étape 1 : Initialiser le projet Nuxt.js

## Créer un nouveau projet Nuxt.js
npx create-nuxt-app todo-list

Réponses pour les questions du setup :

• Project name: todo-list
• Programming language: JavaScript
• Package manager: Yarn (ou NPM)
• UI framework: Bulma
• Nuxt.js modules: None
• Linting tools: ESLint
• Testing framework: Jest
• Rendering mode: Universal (SSR)

Étape 2 : Créer le modèle et le controller

## Ajouter des fichiers manquants
touch nuxt.config.js
touch store/todos.js
touch pages/index.vue

nuxt.config.js

export default {
  buildModules: ['@nuxtjs/eslint-module'],
}

store/todos.js

export const state = () => ({
  todos: []
})

export const mutations = {
  SET_TODOS(state, todos) {
    state.todos = todos
  }
}

export const actions = {
  async fetchTodos({ commit }) {
    // Simuler une requête API
    const todos = [{ id: 1, text: 'Faire les courses' }, { id: 2, text: 'Nettoyer la maison' }]
    commit('SET_TODOS', todos)
  }
}

pages/index.vue

<template>
  <div>
    <h1>TodoList</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        todo.text
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    todos() {
      return this.$store.state.todos
    }
  },
  async fetch() {
    await this.$store.dispatch('fetchTodos')
  }
}
</script>

Étape 3 : Installer les dépendances et démarrer le serveur

## Installer les dépendances
yarn install

## Démarrer le serveur local
yarn dev

Erreurs fréquentes et debugging

1. Erreur de syntaxe dans le fichier store/todos.js

Code incorrect :

export const state = () => ({
  todos: []
})

Code correct :

export const state = () => ({
  todos: []
})

2. Erreur de chargement des données

Code incorrect :

async fetch() {
  await this.$store.dispatch('fetchTodos')
}

Code correct :

async fetch() {
  await this.$store.dispatch('fetchTodos')
}

3. Erreur d'authentification Fly.io

Code incorrect :

flyctl auth login

Code correct :

flyctl auth login

Pour aller plus loin

1. Ajouter des fonctionnalités avancées : Ajoutez des fonctionnalités comme la suppression de tâches et la mise à jour des tâches.
2. Utiliser une base de données : Utilisez une base de données comme MongoDB pour stocker les tâches plutôt que de les simuler avec un tableau JavaScript.
3. Ajouter des tests unitaires : Ajoutez des tests unitaires pour vous assurer que chaque composant fonctionne correctement.

Défi pratique

Créez une application de todo-list complète en ajoutant des fonctionnalités comme la suppression de tâches et la mise à jour des tâches. Utilisez une base de données comme MongoDB pour stocker les tâches plutôt que de les simuler avec un tableau JavaScript.

Instructions :

1. Installez MongoDB sur votre machine.
2. Configurez la connexion à MongoDB dans votre application Nuxt.js.
3. Ajoutez des fonctionnalités de suppression et de mise à jour de tâches.
4. Déployez votre application sur Fly.io.