Lors du déploiement d'une application Vue.js sur un serveur IIS, certaines configurations spécifiques sont souvent nécessaires pour garantir un fonctionnement optimal, surtout si des solutions comme Nginx ne sont pas utilisées pour la gestion des requêtes. Cet article aborde deux défis courants et leurs solutions directement via IIS et la configuration de l'application Vue.

Problème 1 : Requêtes d'API inter-origines (CORS) après le déploiement

Pendant le développement, il est courant de configurer un proxy dans vue.config.js pour gérer les requêtes API et éviter les problèmes CORS. Par exemple, si toutes les requêtes d'API commencent par /api (comme /api/controleurX/methodeY), la configuration suivante est typiquement utilisée pour rediriger ces requêtes vers le backend réel :

// vue.config.js
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    open: true, // Ouvre le navigateur automatiquement
    proxy: { 
      '/api': {
        target: 'https://api.votre-domaine.com/votre_service_test', // URL de l'API cible
        // target: 'http://localhost:8081/', // Alternative pour le backend local
        ws: true, // Active le support WebSocket
        secure: false, // Ignorer les certificats SSL non valides pour HTTPS
        changeOrigin: true, // Indispensable pour la réécriture du nom d'hôte
        pathRewrite: {
          '^/api': '' // Supprime le préfixe '/api' avant la redirection
        }
      }
    }
  }
});

En production sur IIS, un mécanisme similaire est requis. Cela peut être réalisé en utilisant les modules d'extension IIS : Application Request Routing (ARR) et URL Rewrite.

Installation des modules IIS

Si vous ne les avez pas déjà, téléchargez et installez les modules suivants :

• Application Request Routing (ARR)
• URL Rewrite

Configuration d'Application Request Routing

Après l'installation, assurez-vous qu'ARR est activé. Dans le gestionnaire IIS, au niveau du serveur :

1. Naviguez vers "Application Request Routing Cache".
2. Dans le volet "Actions", cliquez sur "Server Proxy Settings".
3. Cochez la case "Enable proxy" et appliquez les modifications.

Mise en place des règles de réécriture d'URL

Pour chaque site web IIS où l'application Vue est déployée et nécessite un proxy, suivez ces étapes :

1. Sélectionnez votre site web dans le gestionnaire IIS.
2. Double-cliquez sur le module "URL Rewrite".
3. Dans le volet "Actions", cliquez sur "Add Rule(s)..." puis choisissez "Blank Rule" sous "Inbound Rules".
4. Configurez la règle comme suit :
   • Match URL (Correspondance d'URL):
     • Requested URL: "Matches the Pattern" (Corespond à un motif)
     • Using: "Regular Expressions" (Expressions régulières)
     • Pattern: ^api/(.*) (Ce motif capture toute la partie de l'URL qui suit /api/)
   • Conditions : Laissez par défaut.
   • Server Variables : Laissez par défaut.
   • Action :
     • Action type: "Rewrite" (Réécrire)
     • Rewrite URL: https://api.votre-domaine.com/votre_backend/{R:1} (Remplacez par l'URL de votre API réelle. {R:1} fait référence à la partie capturée par le motif, c'est-à-dire tout ce qui suit /api/.)
     • Cochez "Stop processing of subsequent rules" (Arrêter le traitement des règles suivantes) pour éviter les conflits.
5. Cliquez sur "Apply" dans le volet "Actions" pour enregistrer la règle.

Cette configuration redirigera toutes les requêtes commençant par /api/ vers votre serveur backend, tout en supprimant le préfixe /api de l'URL avant de l'envoyer au back end, simulant ainsi le comportement de pathRewrite du devServer de Vue CLI.

Problème 2 : Déploiement dans une sous-application ou un répertoire virtuel IIS

Si votre application Vue doit être accessible via une URL comme http://monsite.com/mon_appli_vue/ plutôt que directement à la racine du domaine, des ajustements sont nécessaires dans la configuration de votre projet Vue.

Modification de vue.config.js

Le publicPath de votre application Vue doit être ajusté pour que tous les assets (JS, CSS, images) soient correctement chargés. Ajoutez ou modifiez cette ligne dans votre fichier vue.config.js :

// vue.config.js
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'production' ? '/mon_appli_vue/' : '/',
  // ... autres configurations ...
});

Remplacez /mon_appli_vue/ par le nom de votre sous-application ou répertoire virtuel IIS.

Adaptation de la configuration du routeur Vue

Le routeur de Vue doit également être informé du chemin de base de votre application. Que vous utilisiez le mode History ou Hash, la propriété base doit être définie conditionnellement :

// router/index.js (exemple avec Vue Router 4)
import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes'; // Importez vos définitions de routes

const routeurApplicatif = createRouter({
  history: createWebHistory(
    process.env.NODE_ENV === 'production' ? '/mon_appli_vue/' : '/'
  ),
  routes,
});

export default routeurApplicatif;

Là encore, ajustez /mon_appli_vue/ pour correspondre au chemin de votre sous-application IIS. Cette configuration permet à l'application de fonctionner correctement en développement (à la racine) et en production (dans la sous-application) sans nécessiter de modifications manuelles à chaque déploiement.