Comment servir l'application VueJS 3 à partir du sous-dossier dans NGINX ?

Question

Je souhaite servir plusieurs applications VueJS 3 à partir du même serveur NGINX mais de sous-dossiers différents. J'ai découvert et essayé d'innombrables ressources provenant de Stack et du Web, mais les choses ne se déroulent tout simplement pas.

J'ai trois applications et trois types de build.

Production : mondomaine.com/app1, mondomaine.com/app2, mondomaine.com/app3

Staging : mydomain.com/staging/app1, mydomain.com/staging/app2, mydomain.com/staging/app3

Développement : mydomain.com/dev/app1, mydomain.com/dev/app2, mydomain.com/dev/app3

J'ai essayé de modifier la configuration de vue.config.js, router/index.js et NGINX, mais rien ne semble fonctionner.

Je serais très reconnaissant si quelqu'un pouvait partager un guide complet de mon problème.

Merci.

Answer 1

Essayez cette conf

server {
    listen 80;
    listen [::]:80;

    # SSL configuration
    #
    #listen 443 ssl;
    #listen [::]:443 ssl;
    
    #ssl_certificate /etc/letsencrypt/live/your-domain/fullchain.pem;
    #ssl_certificate_key /etc/letsencrypt/live/your-domain/privkey.pem;
    
    #
    #ssl_dhparam /etc/letsencrypt/live/dhparam/dhparam.pem;

    #ssl_protocols TLSv1.2;

    #ssl_prefer_server_ciphers on;
    #ssl_ciphers 'ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:DHE-RSA-AES256-SHA';  
    #add_header X-Frame-Options DENY;

    root /var/www/proyect-vue/dist;

    # Add index.php to the list if you are using PHP
        index index.html index.htm index.php;

    server_name your-domain;

    location / {
                try_files $uri $uri/ /index.html;
    }

 
    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    location ~ /\.ht {
        deny all;
    }
}

Vous pouvez maintenant utiliser git pour cloner le référentiel dans /var/www/ et taper npm run build