Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

NodeJS Discussion :

Déploiement Vue JS et Node


Sujet :

NodeJS

  1. #1
    Nouveau Candidat au Club
    Déploiement Vue JS et Node
    Bonjour à tous,

    J'essaye actuellement de déployer une application faite en Vue JS (côté front) et en Node JS (côté back) pour mon projet de fin d'étude.
    J'ai donc dans un même dossier :
    • Un dossier client (Front)
    • Un dossier serveur (Back)




    A terme je souhaiterai mettre en ligne cette app chez un hébergeur qui dispose notamment d'une interface cPanel.

    Je fais donc mes tests en local :
    1. Je fais un build côté client, je récupère le dossier "public" que je mets dans dans le dossier serveur
    2. Je fais un "npm start" et j'ai la page d'accueil qui s'affiche dans mn navigateur en entrant "localhost:3000" (qui est une page de login)


    Problème dès lors que je fais appelle à une fonction de Vue JS qui fait appelle à une route Node j'ai une erreur :
    "vue-router.esm.js:2051 Uncaught (in promise) undefined"

    J'ai également fait un test en mettant en ligne mon app sur Heroku j'ai également une erreur mais différente :
    "OPTIONS http://localhost:3000/read/login net::ERR_CONNECTION_REFUSED"
    A noter que sur Heroku j'ai essayé également en remplaçant http://localhost:3000 par "localhost:5000" and "https://tranquil-tor-67272.herokuapp.com/" mais rien ne change.

    Voici le code de mon app.js
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
     
       // CREATION DES DEPENDANCES DE MODULES
    //MODULE DE JS.NODE
    const https = require('https');
    const fs = require('fs');
    // var http = require("http");
    const express = require('express');
    const app = express();
    const router = express.Router();
    const cors = require("cors");
    const mysql = require('mysql');
    const bodyParser = require('body-parser');
    const mysqlApostrophe = require("mysql-apostrophe");
    //Module permettant de faire des refresh en SPA
    const history = require('connect-history-api-fallback');
     
    //IMPORT DES MODULES CREES
    var dataBase = require('./routes/dataBase');
     
    app.use(history());
    app.use(cors());
    // MISE EN PLACE DU BODY PARSER QUI PERMET DE LIRE LES JSON ET URL ENVOYE PAR LE FORMULAIRE
    app.use(bodyParser.json()); // LIRE LES BODY ENCODES EN JSON
    app.use(bodyParser.urlencoded({ // LIRE LES BODY ENCODES EN URL
        extended: true
    }));
     
    //Mise en place de express
    // parse application/x-www-form-urlencoded
    app.use(bodyParser.urlencoded({ extended: false }))
     
    // MISE EN PLACE DE mysqlApostrophe
    app.use(mysqlApostrophe); //PERMET D'INSERER DES CHAMPS CONTENANT DES APOSTROPHES
     
     
    // RECUPERATION DES FICHIERS ROUTES DANS LE DOSSIER ROUTES
    const creation = require("./routes/create");
    const lecture = require("./routes/read");
    const maj = require("./routes/update");
    const suppression = require("./routes/delete")
     
    // UTILISATION DES ROUTES
    app.use("/create", creation);
    app.use("/read", lecture);
    app.use("/update", maj);
    app.use("/delete", suppression)
     
    //Gestion de la mise en production
    if (process.env.NODE_ENV === 'production') {
        //Static folder
        app.use(express.static(__dirname + '/public/')).use
        //Handle SPA
        app.get(/.*/, (req, res) => res.sendFile(__dirname + '/public/index.html'));
    } else {
        //Static folder
        app.use(express.static(__dirname + '/public/')).use
        //Handle SPA
        app.get(/.*/, (req, res) => res.sendFile(__dirname + '/public/index.html'));
    }
     
    // CHOIX DU PORT UTILISE PAR LE SERVEUR
    const port = process.env.PORT || 3000; //RECUPERE UN PORT LIBRE SINON 3000
    app.listen(port, function () {
        console.log("Le serveur utilise le port : " + port)
    });


    Et voici mon package.json:
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
     
    {
      "name": "projetweb",
      "version": "1.0.0",
      "engines": {
        "node": "10.16.3"
      },
      "description": "projet web gestion des appareils",
      "main": "app.js",
      "scripts": {
        "start": "node app.js",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "Yassine Gharbi",
      "license": "ISC",
      "dependencies": {
        "babel-register": "^6.26.0",
        "bcrypt": "^3.0.6",
        "body-parser": "^1.19.0",
        "connect-history-api-fallback": "^1.6.0",
        "cors": "^2.8.5",
        "express": "^4.17.1",
        "jsonwebtoken": "^8.5.1",
        "morgan": "^1.9.1",
        "mysql": "^2.17.1",
        "mysql-apostrophe": "^1.0.8",
        "webpack-node-externals": "^1.7.2"
      }
    }


    Pouvez-vous svp à résoudre ce problème.
    Si vous avez besoin de plus d'informations n'hésitez pas.

    Merci à vous

  2. #2
    Membre à l'essai
    Salut, problème résolu ? Sinon essaye de paramétrer CORS côté serveur, j’ai l’impression que l’erreur vient de la.

###raw>template_hook.ano_emploi###