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

Discuss
#1

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

#2

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

#3

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 :sob:

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 :muscle:

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 :cry:

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

#4

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

#5

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.

#6

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.

#7

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

1 Like
#8

Bonjour,
Encore toutes mes excuses (une habitude?) pour ce retour cette fois plus que long :pray: :pray:.
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

#9

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.

#10

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