Deployer Vue sur Azure

Pourquoi Deployer Vue sur Azure ?

Deploiement d'une application Vue.js sur Azure offre plusieurs avantages : elle permet une haute disponibilité, des performances optimales et une facilité de mise à l'échelle. L'environnement Azure propose des services robustes pour héberger des applications web modernes, en particulier celles développées avec Vue.js.

Un cas d'utilisation concret est la création d'une application web pour un client qui nécessite un site Web performant et facilement scalable. En déployant cette application sur Azure, le client peut s'assurer que son site sera toujours disponible, même pendant les périodes de forte demande, tout en bénéficiant des capacités de scale-out offertes par Azure.

Prerequis

• Connaissance de base de Vue.js et des concepts fondamentaux (components, props, state)
• Compréhension des bases d'Azure et des services disponibles
• Node.js v14 ou supérieur installé sur votre machine locale
• npm v6 ou supérieur installé pour gérer les dépendances du projet

Concepts fondamentaux

1. Service App Service Azure

Le Service App Service Azure est une solution complète pour le hébergement et la gestion des applications web, API, et backends mobiles.

## Ce bloc de code n'est pas fonctionnel, il sert à illustrer un concept.

2. Configuration Environment Variables

Azure permet de définir des variables d'environnement qui peuvent être utilisées dans votre application pour configurer différents environnements (développement, production, etc.).

## Ce bloc de code n'est pas fonctionnel, il sert à illustrer un concept.

3. Gestion des bases de données Azure

Azure offre plusieurs options pour héberger et gérer les bases de données, comme Azure SQL Database ou Cosmos DB.

## Ce bloc de code n'est pas fonctionnel, il sert à illustrer un concept.

Mise en pratique : projet fil rouge

Nous allons créer un simple gestionnaire de tâches avec Vue.js. Ce projet comprendra une interface utilisateur pour ajouter et afficher des tâches.

Étape 1 : Création du projet Vue.js

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

vue create task-manager
cd task-manager

Étape 2 : Ajout d'un composant TaskList.vue

Créez un composant pour afficher la liste des tâches.

<!-- src/components/TaskList.vue -->
<template>
  <div class="task-list">
    <h2>Tasks</h2>
    <ul>
      <li v-for="task in tasks" :key="task.id">task.title</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TaskList',
  data() {
    return {
      tasks: [
        { id: 1, title: 'Buy groceries' },
        { id: 2, title: 'Finish project' }
      ]
    };
  }
};
</script>

Étape 3 : Ajout d'un composant TaskForm.vue

Créez un formulaire pour ajouter de nouvelles tâches.

<!-- src/components/TaskForm.vue -->
<template>
  <div class="task-form">
    <h2>Add Task</h2>
    <form @submit.prevent="addTask">
      <input v-model="newTask" type="text" placeholder="New task" required />
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'TaskForm',
  data() {
    return {
      newTask: ''
    };
  },
  methods: {
    addTask() {
      this.$emit('add-task', { id: Date.now(), title: this.newTask });
      this.newTask = '';
    }
  }
};
</script>

Étape 4 : Intégration des composants dans App.vue

Intégrez les composants TaskList et TaskForm dans le fichier App.vue.

<!-- src/App.vue -->
<template>
  <div id="app">
    <h1>Task Manager</h1>
    <task-form @add-task="addTask"></task-form>
    <task-list :tasks="tasks"></task-list>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    TaskForm,
    TaskList
  },
  data() {
    return {
      tasks: []
    };
  },
  methods: {
    addTask(task) {
      this.tasks.push(task);
    }
  }
};
</script>

Étape 5 : Lancement du projet local

Lancez le projet pour vous assurer qu'il fonctionne correctement.

npm run serve

Erreurs frequentes et debugging

1. Erreur de compilation avec Webpack

Module not found: Error: Can't resolve 'vue'

Cause : Vue n'est pas installé correctement dans le projet.

Correction :

npm install vue --save

2. Erreur lors du déploiement sur Azure

Error: No target specified for deployment

Cause : Le fichier package.json ne contient pas les bonnes dépendances ou scripts pour le déploiement.

Correction :

"scripts": {
  "deploy": "vue-cli-service build && az webapp deploy --resource-group myResourceGroup --name myWebApp --src-path dist"
}

3. Problème d'accès aux variables d'environnement

process.env.VUE_APP_API_URL is undefined

Cause : Les variables d'environnement ne sont pas correctement définies dans Azure.

Correction :

1. Allez dans le portail Azure et sélectionnez votre application.
2. Accédez à la section "Configuration" et ajoutez une nouvelle variable de configuration avec le nom VUE_APP_API_URL et la valeur appropriée.

Pour aller plus loin

1. Utilisation de Vue Router

Intégrez Vue Router pour gérer les différentes pages de votre application.

Documentation Vue Router

2. Authentification avec Azure AD

Ajoutez une authentification sécurisée à votre application en utilisant Azure Active Directory.

Documentation Azure AD

3. Utilisation de Azure Functions pour les API backend

Créez des API backend avec Azure Functions et connectez-les à votre application Vue.js.

Documentation Azure Functions

Défi pratique

Développez une petite application CLI (Command Line Interface) en utilisant Vue.js. Cette application devrait permettre d'interagir avec un service API pour afficher des données et les modifier.

N'oubliez pas de suivre les bonnes pratiques pour la sécurité et la gestion des dépendances.