Aide pour mettre en production mon site sous node.js/vue.js.

Bonjour à tous !

Je travail sur un site perso que j'aimerai bien mettre en ligne. Coté front end le site utilise un framework javascript, vue.js (très proche d'angular pour ceux qui ne connaitraient pas) avec vue cli pour développer correctement. Coté base de donnée j'utilise mongoDb avec qui me permet de gérer la bdd et les utilisateurs sans trop me prendre la tête (par ce que je suis vraiment pas trés compétent en mongoDB il faut bien l'avouer).

En local tout fonctionne bien : j'écris mes templates vue.js, je fais un npm run devet en parallèle je lance dans la console le serveur deployd qui créer un fichier.js à la volé que j'ai juste à intégrer dans mon index.html pour permettre à mon site de parler avec la bdd. Tout roule comme sur des roulettes.

Maintenant j'aimerai passer à la mise en production est là que ça se gâte un peu. Je n'ai pas encore d'hébergeur mais j'ai regardé du coté de Gandi qui me semble attractif. Si j'ai bien compris, dans un hebergement de base on a juste le droit de lancer un fichier serveur.js, mais impossible de lancer une commande directement depuis la console (pas possible de lancer d'un coté un serveur.js et de l'autre via la console de lancer deployd). La solution est d'utiliser deployed comme un module node.js et de demander au fichier serveur.js de le lancer. Ca je crois que je sais faire. C'est là que je suis un peu perdu.

Comment lancer le point d'entrée du site ?

Quand j'héberge mon site et que je met à la racine disons un serveur.js qui s'occupe uniquement de lancer la bdd via le module deployd, ainsi qu'un fichier index.hmtl, est-ce ça fonctionne ? Je veux dire quand on héberge un site en php il suffit de mettre un fichier index.html à la racine et le serveur comprend que c'est ce qu'il faut envoyer comme point d'entrée quand on se connecte au site. Est-ce que dans un hebergement node.js c'est pareil ? Est-ce que le serveur va lancer le serveur.js (qui fera sa petite vie) et servir en page d'accueil le ficher index.html sans que j'ai besoin de le demander ?

Ou est-ce que le serveur va juste lancer le fichier serveur.js et c'est tout. Il ne fait rien d'autre, si on se connecte au site il n'affiche pas la page index.html tant que le serveur.js ne lui a rien demandé en ce sens. Dans ce cas il faut empressement (sans jeu de mot :p) que le fichier serveur.js demande l'affichage de la page index.html.

Si ça fonctionne comme dans ce dernier cas, quel doit être mon script serveur.js pour qu'il affiche le fichier index.html présent au même niveau ? Je débute en node.js et j'ai du mal à trouver comment simplement servir un fichier index.html quand on se connecte au port du serveur. Soit je trouve des trucs compliqués avec express et des template (dont je ne veux pas, moi je veux juste afficher le index.html, le routeur est interne avec vue.js, le serveur n'a vraiment rien besoin de faire ), soit j'ai un truc qui ne marche pas.

Voici mon serveur.js pour le moment :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// serveur.js
const deployd = require('deployd');
const http = require('http');
const fs = require('fs');

// on lance la bdd via deployd
const options = {port: 3000, env : "development"};
const dpd = deployd(options);
dpd.listen();

// Chargement du fichier index.html affiché au client
const server = http.createServer(function(req, res) {
    fs.readFile('index.html', 'utf-8', function(error, content) {
        res.writeHead(200, {"Content-Type": "text/html"});
        res.end(content);
    });

});
// on lance le serveur
server.listen(8080);

La partie base de donnée fonctionne bien, mais la partie qui consiste a afficher le fichier index.html un peu moins. Mon fichier index.html charge du css et du js et c'est là que ça bug. Quand je vais sur localhost:8080, le html de index.html se charge bien mais il bug en important les fichiers css et js en affichant cette erreur :

http://prntscr.com/dam9yl

Quand je vais voir l'erreur dans le js, je tombe sur ça : http://prntscr.com/dama6g

Que fait mon html dans mon contenu js ?? (pour l'instant mon contenu du app.js est un simple console.log("test") afin de voir si ça fonctionne, donc le souçis ne vient pas du code du app.js). J'avoue que je suis un peu perdu. Le problème semble vraiment venir de l'incorporation des scripts, si dans le index.html je met du js directement dans une balise <script></script> il est interprété sans souçis. Mais impossible de charger les fichiers externes…

Merci d'avance pour vos réponses !

PS : c'est mon premier projet avec node.js que j'essaye de mettre en prod alors pas taper si je fais n'importe quoi. PS 2 : Si vous avez une recommandation à me faire en terme d’hébergeur qui est meilleure que gandhi, je suis preneur.

Quel serveur est censé servir tes assets (les fichiers .js et les fichiers .css) ?

Dans le bout de code que t'as montré, on voit un serveur qui ne fait rien d'autre que servir un fichier html sur localhost:8080.

Quel serveur est censé servir tes assets (les fichiers .js et les fichiers .css) ?

Je ne sais pas trop… Je n'ai qu'un seul serveur, le fichier serveur.js non ? Je dois lui faire importer le css et js ? Comment ?

Dans le bout de code que t'as montré, on voit un serveur qui ne fait rien d'autre que servir un fichier html sur localhost:8080.

Le probléme est que ce fichier html quand il est servis n'est pas capable de récupérer les css et js. Voici mon code html :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<!DOCTYPE html><html>
    <head>
        <meta charset=utf-8><title>Mon super site</title>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel=stylesheet>
        <link href=static/css/app.css rel=stylesheet>
    </head>
    <script type=text/javascript src=http://localhost:2403/dpd.js></script>
    <body>
        <h1>Mon super site</h1>
        <script type=text/javascript src=static/js/app.js></script>
    </body>
</html>

Quand je vais sur localhost la page html est bien servie, les scripts externes (dpd.js et google font) sont bien chargés. Mais le app.js et le app.css ne sont pas chargés, avec l'erreur que j'ai mise dans mon premier message. Pourquoi ? Une fois le index.html envoyé pourquoi ce dernier ne peut pas récupérer les fichiers js et css comme n'importe quel fichier html le ferait ?

Je dois dire au serveur de charger aussi ses fichiers ? Si oui comment faire ?

Ce qu'il sert à cette URL, c'est le contenu d'index.html. Du coup évidemment, il va pas servir d'autres fichiers, genre truc.css et chose.js.

Et une fois le fichier index.html celui-ci ne peut donc pas appeler les fichiers js et css sans qu'ils aient été servis par le serveur c'est ça ?

Je pensais que c'était comme sur un hébergement php, je met un fichier index.php qui contient des importations de js et css et que ça marcherait…

Du coup comment je fais pour dire à mon serveur de servir mes fichiers js et css du dossier static ?

Merci pour ta réponse !

J'avais finalement trouvé une autre solution via express et via le plugin chrome webserveur, mais ta solution est bien plus simple.

ton navigateur (et pas le fichier html) va faire une requête vers cette URL. Si il n'y pas de serveur pour répondre à cette requête, ça ne fonctionne pas.

Merci pour l'explication