Dans le cadre d’un projet web sous docker avec Nginx j’ai rencontré un problème avec un projet VueJS. Le chemin absolu n’est pas connu par le serveur nginx à cause d’un comportement normal de VueJS. Une erreur 404 apparaît lors des actualisations d’URI.
Configuration Nginx avec VueJS
Dans l’utilisation d’un serveur web Nginx avec VueJS vous avez peut-être rencontré l’erreur 404. Pour rappel, Nginx est un serveur web et VueJS est un framework javascript. Une fois notre application web terminée avec VueJS, il est nécessaire de la transpiler et de la minifier avec webpack. À l’issue, nous disposons d’un dossier « dist » prêt à l’emploi que le serveur Nginx va héberger et lire. Or nous nous apercevons rapidement qu’une erreur 404 apparaît pour accéder à nos différents URI. (ex : https://kassianoff.fr/blog/).
Notre environnement
Dans mon cas j’utilise la dernière version de Nginx 1.21.6 datant du 25 janvier 2022. Le serveur est publié en tant de micro-service avec une configuration par défaut. Le dossier dist est positionné à l’emplacement par défaut du serveur web. J’accède à mon serveur de production mais dès que j’actualise la page sur une URI j’ai une erreur web 404.
VueJS
Durant la phase de développement dans VueJS un routeur qui utilise le mode « hachage » par défaut est utilisé, ce qui ne pose aucun problème dans l’environnement local (et en ligne) car il utilise un caractère dièse (#) avant l’URL transmise en interne. Étant donné que cette section de l’URL n’est jamais envoyée au serveur, elle ne nécessite aucun traitement particulier.
En phase de production (derrière un reverse proxy) la page d’accueil est accessible normalement et il n’y a aucun problème. Cependant, lorsque vous actualisez la page, une erreur 404 apparaîtra et la ressource à laquelle accéder est introuvable sur le serveur, car l’adresse de routage définie par le routeur Vue est considérée comme l’adresse URL, or le chemin d’adresse n’existe pas, donc le phénomène 404 apparaît.
Nginx
Lorsque je regarde la configuration par défaut de mon serveur Nginx il n’y a pas de véritable ressource « menu/index » sous le répertoire racine /dist de la configuration Nginx. Ces ressources d’accès sont rendues en JS. La configuration initiale de Nginx sur le serveur est la suivante (en supposant que le nom de domaine est : kassianoff.fr) :
server
{
listen 80;
server_name kassianoff.fr;
index index.php index.html index.htm default.php default.htm default.html;
root /var/www/kassianoff/dist;
}Il convient alors d'ajouter le paramètre jump de Vue route dans la configuration Nginx du serveur. La première page ici est index.html. La configuration correcte est la suivante :
server
{
listen 80;
server_name kassianoff.fr;
index index.php index.html index.htm default.php default.htm default.html;
root /var/www/kassianoff/dist;
#Vue router configuration
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
}Après un redémarrage du serveur Nginx le problème n'est plus présent. Vous remarquerez que la configuration est simple car je n'utilise pas directement Nginx frontalement sur le web mais derrière un reverse-proxy qui gère la partie TLS ainsi que le routage avec des middlwares spécifiques. Si vous rencontrez le moindre problème n'hésitez pas à partager votre retour d’expérience à ce sujet.
