Héberger un projet Vite (Vue3 - router4 - pinia - Quasar)

Yot · April 17, 2021, 5:21pm

Bonjour à toutes et tous,

je souhaite héberger sur mon Yunohost un projet Nuxt.js en mode “static”.
Je pense utiliser une coquille “multi wep-app”.
Quelqu’un aurait il déjà réaliser une telle opération et si oui y’a t’il des points particuliers (pré requis, configuration Nginx…)

Merci d’avance pour vos retours

Cordialement,

Lionel

Stylix58 · April 17, 2021, 9:47pm

Il faudrait plutôt faire d’abord le setup en ssh puis utiliser l’app redirect pour faire le reste du boulot.

Yot · November 27, 2021, 7:11pm

Bonjour,
merci Stylix58 pour ta réponse.
Je suis reparti sans utiliser multi web app.

Voici un point de situation peu brillant, je dois l’avouer

Mon projet et sous le répertoire var/www/[monProjet].
Tout est configuré (node, les pluggins…), npm run build a tourné correctement.
Si je lance le npm start et que je me rends à l’adresse localhost:3010 pas de souci, mon site est opérationel, je suis le roi

Mais ce site étant fait pour être visible que par un peu plus de personne que moi seul, je me dit qu’il faut que le serveur sache vers où rediriger les visiteurs et pour cela configurer nginx.
Confiant je crée un répertoire /etc/nginx/conf.d/[monporjet][monDomaine]ynh.fr.d dans lequel je crée un fichier [monProje].conf qui contient ceci :

#sub_path_only rewrite ^/$ / permanent;
location / {

  # Path to source
  #alias /var/www/[monProjet]/ ;

  # Force usage of https
  if ($scheme = http) {
    rewrite ^ https://$server_name$request_uri? permanent;
  }

  # Common parameter to increase upload size limit in conjunction with dedicated php-fpm file
  client_max_body_size 50M;

  proxy_set_header Accept-Encoding "";
  proxy_pass http://localhost:3010;
  proxy_set_header Host $http_host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
  proxy_next_upstream error timeout http_502 http_503 http_504;

  # Include SSOWAT user panel.
 # include conf.d/yunohost_panel.conf.inc;
}

Un coup de

sudo nginx -t me dit qu’il n’y pas d’erreur dans la config
je la prends en compte en lançant la commande sudo service nginx reload
je relance mon site avec npm start

Confiant, je teste l’accès depuis l’extérieur à partir de l’adresse https://www.[monProjet].[monDomaine].ynh.fr et je tombe non pas sur mon site mais sur la page d’administration de yunohost

Je me rend donc à l’évidence, je suis loin (et c’est un doux euphémisme…) de maîtriser l’accès à mon site depuis internet pour des visiteurs anonymes. j’ai suivi pas mal de tuto sur nginx, j’en aperçois la philosophie mais j’avoue que je suis perplexe face à l’imbrication de tous les fichiers de configuration.

Merci d’avance à tous ceux qui voudront bien se pencher sur mon problème,

Bonne soirée

Lionel

Stylix58 · November 28, 2021, 6:25pm

Il faudrait que tu installe l’app YunoHost Redirect plutôt que de configurer Nginx à la main…

LaBaude · November 28, 2021, 7:32pm

Hello,

Juste une question, pourquoi ne pas utiliser une custom web app en fait ? Parce que c’est fait exactement pour ce genre de situations.
Après pour ce qui est des conf Nginx et notamment des redirections c’est un peu foireux en fonction des cas.

Stylix58 · November 29, 2021, 6:32am

Ah oui, justement c’est cette app qu’il faut utiliser. L’app Redirect est plus faite pour des apps servies avec un serveur NodeJS.

Yot · January 17, 2022, 4:12pm

Bonjour LaBAude
Bonjour Stylix58

Merci pour vos réponses et désolé pour mon temps de réaction, j’étais absent à l’étranger pour mon taf.
J’ai eu un problème d’installation de custom web app qui a été réglé par la dernière mise à jour Yunohost.

Je vais m’attaquer au transfert de mes fichiers et à la configuration de Nginx.

Merci encore à vous deux

Lionel

Yot · March 25, 2022, 5:12pm

Bonjour,
Encore toutes mes excuses (une habitude?) pour ce retour cette fois plus que long .
J’ai donc installé custom web app, déposé mes fichiers.
je me rend sur le site et là c’est bof :

l’index.html est lu car la balise <title> se retrouve bien dans l’onglet du navigateur
mais les composants ne sont pas rendus, la page est vierge.

A l’inspection de la page, j’ai ces erreurs en console :

La ressource à l’adresse « YunoHost Portal…== » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff)

J’ai trouvé des tonnes réponses possibles sur ce type d’erreur mais j’avoue ne pas bien comprendre l’enchevêtrement de tous les fichiers de configuration Nginx !

Merci d’avance à tous pour votre aide,

Lionel

tituspijean · March 25, 2022, 8:13pm

Je soupçonne un problème de redirection lors du chargement des composants de la page. Le portail YunoHost ne devrait pas se charger je pense.

Quelques question en vrac histoire de cerner le problème:

Ta webapp est-elle publique?
Est-ce que la config NGINX si dessus est toujours d’actualité? Si non, la partager.
Peux-tu essayer d’identifier pour quels composants ça bloque, et quelle est leur adresse?

Remarque: les deux liens ci-dessus sont de ce format: https://gwf.ynh.fr/yunohost/sso/?r=aHR0cHM6Ly9nd2Yue, l’argument après le r= est l’adresse vers laquelle tu dois être redirigé après authentification. Elle est encodée en base64. Après décodage, ça donne juste https://gwf.. Question: as-tu caviardé l’adresse, ou est-elle bien comme ça? Si c’est la bonne, il y a clairement un souci au niveau des adresses des composants de la page.

Yot · March 26, 2022, 7:13am

Bonjour,
et merci de t’intéresser à mon souci.

Pour le contexte :
Je suis en train de coder une SPA de présentation de photos. J’aimerai l’héberger sur Yunohost et donc pour tester la faisabilité, j’ai montée un petit site sur lequel se trouve deux pages :

’/’ : la racine avec un composant qui affiche le logo Vue, un <h1> et un bouton qui donne accès à un second composant,
’/about’ : qui doit rendre un composant identique (logo+h1+bouton qui retourne sur la page ‘/’.

Voici les réponses à tes questions:

La web App est effectivement public;
J’ai effectivement caviarder le nommage des fichiers, voici ce que donne le décodage de l’une des erreurs : https://gwf.ynh.fr/assets/index.89ca7322.js ce qui me semble correct;
Aucun de mes composants n’est rendu, la page ‘/’ et la page ‘/about’ sont vides;
Voici la config Nginx qui a effectivement changé, je ne l’ai pas retouchée suite à l’installation de la webApp :

 rewrite ^/tbm$ /tbm/ permanent;
location /tbm/ {

    # Path to source
    alias /var/www/my_webapp/www/;

    # Default indexes and catch-all
    index index.html index.php;
    try_files $uri $uri/ /tbm/index.php?$args;


    # Prevent useless logs
    location = /tbm/favicon.ico {
        log_not_found off;
        access_log off;
    }
    location = /tbm/robots.txt {
        allow all;
        log_not_found off;
        access_log off;
    }

    # Deny access to hidden files and directories
    location ~ ^/tbm/(.+/|)\.(?!well-known\/) {
        deny all;
    }

    # Execute and serve PHP files
    location ~ [^/]\.php(/|$) {
        fastcgi_split_path_info ^(.+?\.php)(/.*)$;
        fastcgi_pass unix:/var/run/php/php7.3-fpm-my_webapp.sock;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param REMOTE_USER $remote_user;
        fastcgi_param PATH_INFO $fastcgi_path_info;
        fastcgi_param SCRIPT_FILENAME $request_filename;
    }

    # Include SSOWAT user panel.
    include conf.d/yunohost_panel.conf.inc;
}

Merci d’avance pour ton analyse,
Lionel

Edit :
j’ajoute l’erreur en console :

Mon fichier index.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TBM Test</title>
    <script type="module" crossorigin src="/assets/index.89ca7322.js"></script>
    <link rel="modulepreload" href="/assets/vendor.04e35240.js">
    <link rel="stylesheet" href="/assets/index.a2a26fae.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

et le fichier vers lequel pointe l’erreur de la console :

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8" /> 
        <link rel="icon" href="[/favicon.ico](view-source:https://gwf.ynh.fr/favicon.ico)" /> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
        <title>TBM Test</title>
        <script type="module" crossorigin src="[/assets/index.89ca7322.js](view-source:https://gwf.ynh.fr/assets/index.89ca7322.js)"></script> 
        <link rel="modulepreload" href="[/assets/vendor.04e35240.js](view-source:https://gwf.ynh.fr/assets/vendor.04e35240.js)"> 
        <link rel="stylesheet" href="[/assets/index.a2a26fae.css](view-source:https://gwf.ynh.fr/assets/index.a2a26fae.css)"> 
        <script type="text/javascript" src="[/ynh_portal.js](view-source:https://gwf.ynh.fr/ynh_portal.js)"></script>
        <link type="text/css" rel="stylesheet" href="[/ynh_overlay.css](view-source:https://gwf.ynh.fr/ynh_overlay.css)">
        <script type="text/javascript" src="[/ynhtheme/custom_portal.js](view-source:https://gwf.ynh.fr/ynhtheme/custom_portal.js)"></script>
        <link type="text/css" rel="stylesheet" href="[/ynhtheme/custom_overlay.css](view-source:https://gwf.ynh.fr/ynhtheme/custom_overlay.css)">
    </head> 
    <body>
         <div id="app"></div>
     </body> 
</html>

Yot · June 13, 2022, 4:37am

Bonjour,
je me permets de te relancer car je n’arrive toujours pas à comprendre cette erreur.

Merci d’avance

jarod5001 · June 13, 2022, 8:53am

C’est assez confu.
Ce serait bien que tu nous résumes ce que tu as fait et ce qui ne marche pas.
Si ton projet est sur github en public, ça peut aider aussi.

tituspijean · June 13, 2022, 11:03am

Je reprends le sujet un peu à froid, je n’ai pas tout relu. Est-ce normal que les assets soient chargés dans https://DOMAINE/assets/ et non pas https://DOMAINE/tbm/assets/?

Si ce n’est pas attendu, il faut peut-être implémenter une variable BASE_URL dans ton projet Vue.

Yot · June 13, 2022, 6:02pm

Bonsoir jarod5001,
Bonsoir tituspijean,

Merci de vous intéresser à mon souci.
Pour résumer :
Je souhaite héberger des applications réalisées avec Vite-Vue3 sur mon Yunohost plutôt que sur Netlify ou SupaBase. Pour tester, j’ai créer une application toute bête avec deux pages et le routing associé.

J’ai installé l’application “My WEbapp”.
Dans le répertoire /var/www/my_webapp/www j’ai installé les fichiers issus du Build soient:

un fichier “index.html”
un fichier “favico.ico”
un dossier “assets” qui contient les fichiers (js, css) créés lors du Build

Lorsque j’essaie d’atteindre le site, j’obtiens un page blanche, l’onglet portant bien le contenu de la balise du fichier “index.html”. Lorsque j’inspecte ma page la console remonte deux erreurs :

Le chargement du module à l’adresse “https://[domaine]/yunohost/sso” a été bloqué en raison d’un type MIME interdit (text/html)
La ressource à l’adresse “https://[domaine]/yunohost/sso” a été bloquée en raison d’un type MIME (text/html) incorrect (X-content-Type-Options: nosniff)

Je n’ai pas touché à la configuration faite par l’installation de “My Webapp”.

@tituspijean : j’ai suivi les instructions de My Webapp qui n’a pas créé de répertoire tbm.

Je reste à votre disposition pour vous fournir des données suplémentaires.

Merci encore

Lionel

tituspijean · June 13, 2022, 7:42pm

Ta conf NGINX citée plus haut sous-tend que ton site est installé sur https://gwf.ynh.fr/tbm. Est-il possible qu’il faille spécifier dans ton code que tous les liens doivent commencer par /tbm?

https://gwf.ynh.fr/assets deviendrait https://gwf.ynh.fr/tbm/assets par exemple.

Yot · June 14, 2022, 5:34pm

@tituspijean
Bonsoir,
n’est-ce pas le rôle de la directive alias /var/www/my_webapp/www/; que de rediriger vers le dossier créé par “My_WebApp”?

tituspijean · June 14, 2022, 8:24pm

Oui, mais ce n’est pas ce dont je parle.

Demander un fichier dans /assets/, tel que je suppose que tu as, n’est pas la même chose que dans assets/.

Yot · June 16, 2022, 5:29pm

Bonsoir tituspijean,

je comprends, en effet. je test cela ce weekend en configurant Vue.

Merci et bonne soirée,

Lionel

Yot · June 18, 2022, 5:29pm

Bonjour,

j’ai réalisé le Build de l’appli en utilisant l’option --base=https://gwf.ynh.fr/tbm/ et cela fonctionne, le site est accessible, à ceci prêt que

ma page d’accueil n’est pas rendue;
les photos ne s’affichent pas.
Je progresse et je me plonge dans la doc VITE pour la gestion des assets.
… et surtout merci pour votre aide.

Yot · June 23, 2022, 4:52am

Bonjour,
Mon problème d’accès est donc résolu en spécifiant dans le fichier vite.config.js l’adresse public du site avec la clef “base” :

export default defineConfig({
  // Définir le chemin public de l'application
  base: '/test-tbm/',
  //Définition des alias
  resolve: {
    alias: {
      '@': chemin.resolve(__dirname, './src'),
    },
  },
  //Déclaration des plugins utilisés
  plugins: [
    vue({
      template: { transformAssetUrls },
    }),
    //Localisation du fichier des variables Sass pour Quasar
    quasar({
      sassVariables: 'src/css/quasar-variables.sass',
    }),
  ],
});

Les images statiques sont rendues, il me reste à traiter les images avec un chemin dynamique du type

 <q-img
           :src="`/src/assets/images/menu/${realisation.image}`"
            :alt="realisation.name"
            spinner-color="black"
          />

Merci beaucoup pour votre aide, je vais passer le post en résolu.