Wotwizard UI

Pas de problème, je voulais dire ajouter un sous-titre… pas besoin de changer le titre de WotWizard.

oui, j’ai lu que 10% des Tulusiens (j’ose penser que vous êtes de là-bas) sont des descendants d’ex-républicains fuyant le franquisme… c’est peut-être pour cela que la G1 a tant triomphé là-bas heheheheh

3 Likes

C’est sans doute la bonne solution.

1 Like

Ce sera donc le slogan de l’application :slight_smile:

Oui c’est tout ce que je peux ajouter.

Concernant la version d’apollo je n’ai pas trouvé où cela se déclare, et je me demande si ce n’est pas un soucis uniquement local dû à mon environnement (j’ai d’abords essayé avec node 15 et le fichier package-lock, ça a peut être engendrer le soucis de version d’apollo. Maintenant que le package-lock est ajouté au gitignore, le problème est probablement résolu, le prochain nous le dira ^^).

1 Like

J’ai voulu corriger le soucis de 404 lors du refresh d’une page.

Je n’ai pas le soucis en local avec le server Express généré par npm, j’ai donc pensé que le soucis venais spécifiquement du reverse proxy de netlify.app.

J’ai donc lancé une instance wotwizard-ui en mode static délivré par nginx sur une VM du serveur axiom, ici: https://wotwizard.axiom-team.fr

Mais je constate le même problème, 404 lorsqu’on tente d’accéder à une page directement via l’URL.
Mais au moins maintenant, j’ai les logs héhé:

2022/01/09 23:00:41 [error] 1160#1160: *464163 open() "/home/axiom/apps/wotwizard-ui/membres/DDDD5A140607B31BB6C15D9C7F85B5BB8C679F0261C6F1E5D7ECAFE41B815222" failed (2: No such file or directory), client: 77.xx.xx.xx, server: wotwizard.axiom-team.fr, request: "GET /membres/DDDD5A140607B31BB6C15D9C7F85B5BB8C679F0261C6F1E5D7ECAFE41B815222 HTTP/1.0", host: "wotwizard.axiom-team.fr"

Il tente d’accéder au répertoire absolu {SERVER_ROOT+URL}. Donc normal qu’il n’y trouve rien.
Je n’ai pas encore trouvé comment configurer correctement nginx et nuxtjs pour dépasser ce problème.

2 Likes

C’est normal. J’ai configuré l’appli en mode SPA (Single Page Application). toutes les routes sont gérées automatiquement par nuxt.js via le router de Vue.js. Si tu veux du SSR (Server Side Rendering), il faut un serveur Node et configurer l’appli dans nuxt.config.js, à la ligne 5 (il y le lien vers la doc en commentaire à la ligne 4). Et, au lieu de faire un npm run generate, il faut faire un npm run build puis un npm run start. Enfin c’est ce que j’en ai compris pour le moment :stuck_out_tongue:

EDIT : Netlify (qui gère le CI/CD via le dépôt github) ne gère que le SPA et non le SSR. Il y a une astuce pour customiser l’erreur 404 envoyée par Netlify.

2 Likes

En fait pas besoin de toucher à la config de nuxt (je m’en doutait vue que ça marchais en mode dev en local), suffit de lancer nuxt en mode SSR.

Ici j’utilise pm2 pour lancer le serveur nodejs en daemon:

https://wotwizard.axiom-team.fr/membres/D01102D1D649EE65A027BC47FD1FB5BB6FECE7B6230414DB66EC490B51DBED7A


Au passage, en recompilant wotwizard-ui dans un nouvel environnement, je n’ai eu aucun soucis de dépendances.

En gros tu as juste fait npm run build puis npm run start ? Du coup je me demande à quoi sert cette option…

Oui. Je ne sais pas de quelle option tu parles, mais en tout cas ça fonctionne impec en mode SSR.

J’ai juste créé ce fichier de conf à la racine du dépôt pour pouvoir lancer le site en daemon avec un simple pm2 start:

module.exports = {
  apps: [
    {
      name: 'wotwizard',
      script: 'npm',
      args: 'start',
      watch: false,
      force: true,
      env: {
        PORT: 10091,
        HOST: '0.0.0.0',
        NODE_ENV: 'production',
      },
    },
  ],
};

Je ne sais pas si c’est utile de l’ajouter au git.

Bah l’option dont je parlais dans nuxt.config.js, à la ligne 5 :

ssr: false,

C’est spécifique à ton environnement de “production” donc pas sûr. Pour l’instant j’utilise le système de Netlify pour le dev car ça me suffit et le CI/CD est déjà automatisé avec github.

Ah oui, aucune idée, je l’ai gardé tel quel ssr: false.

Ce qui est spécifique c’est le port, mais on peut versionner un ecosystem.config.js.example avec port 3000 par défaut, et expliquer ça dans le readme.
Mais je pense pas que soit utile, ya pas vraiment d’intéret à lancer d’instance de wotwizard-ui en prod chez sois ou ailleurs, là c’était juste pour tester et confirmer que ça fonctionne comme prévue en mode ssr.

pm2 n’est pas forcément utilisé chez tout le monde. M’enfin je dis ça, j’y connais rien. Je découvre :stuck_out_tongue:

1 Like

Je crois que j’ai trouvé l’utilité de cette option. D’après ce que je comprends, avec ssr: false, l’appli est téléchargée en totalité côté client et s’exécute dans le navigateur. Si tu mets true, chaque lien interne ré-interroge le serveur. Faudrait que tu essaies pour voir.

Ah oui en effet, c’est plus rapide ainsi ^^

Penses-tu pouvoir configurer le CI/CD entre le Gitlab et ton serveur ? Comme ça je peux abandonner Github et Netlify :wink:

Arf malheuresement je n’ai jamais configuré les CI, je ne sais pas comment faire :disappointed:

Par contre j’ai un cron qui check toutes les 10 minutes si un git pull de master donne des nouveautés, auquel cas il rebuild le site et relance le deamon pm2 :sweat_smile:

Ce qui revient dans les faits à peut prêt au même …

1 Like

La solution me convient :wink: Tu me diras quand tu auras mis le cron en place.

bah c’est fait lol

Bon faudra quand même que quelqu’un configure la CI ce sera plus propre.

Alors je supprime le dépôt github et l’appli wotwizard.netlify.app. La nouvelle URL devient : https://wotwizard.axiom-team.fr

2 Likes

J’ai mis à jour le README et créé une page de template par défaut extrêmement commentée pour que n’importe qui (ou presque) puisse contribuer facilement sans se taper toute la doc ou en fouillant dans le code, même en utilisant l’internationalisation ! :wink:

1 Like