Vue.js server über node.js routen

[cypher28]

Hallo zusammen,

ich versuche mich gerade an Progressive Web Apps einzuarbeiten. Habe dazu einen node.js Server als Backend und als Frontend nutze ich Vue.js.
Die App soll auf einem externen Ubuntu Server laufen. Verbinden tu ich mich über VSCode SSH an den Server.
Bei Vue.js ist es ja möglich über

npm run serve

ein dev Server zu starten der einen localhost generiert. Da ich ja über ssh mit dem externen server verbunden bin, ist es dank VSCode möglich über

http://localhost:xxxxx

die Vue.js App anzuzeigen.
Ist es möglich über den node.js server durch eine router die Ausgabe von localhost zu routen?

Ich hoffe ich konnte es erklären was ich meine.

Man kann bei Vue.js auch einen build erzeugen mit

npm run build

, welches dann einen /dist ordner erzeugt. Dann kann man die index.html über node.js routen was aber leider unpraktisch ist, weil man beim testen immer wieder ein neues build erzeugen muss.

Irgendwo hatte ich mal gelesen das man im Hintergrund 2 server laufen lassen muss und irgendwie package.json vom Backend oder die vue.config.js einstellen muss.

Falls jemand einen Tip hat wäre ich sehr dankbar.

Habe im node.js Server erstmlas eine Route und über die soll dann die Ausgabe von localhost geroutet werden.

app.get('/', (req, res) => {
  res.end("Hello World");
 console.log('funktioniert');
})

 

[mikdoe]

Hallo!
Kannst du bitte etwas ausführlicher erklären wo welche Anwendung/Port lauscht und was mit was über welche Stationen kommunizieren soll damit man sich ein Bild machen kann was das Ziel ist.

 

[cypher28]

Hallo,

ich versuchs mal zu erklären.

Es existiert ein externer Server, auf dem Ubuntu 20.04 installiert ist. Auf diesem kann ich per SSH mich verbinden.
Auf dem externen Server habe ich node.js installiert und nutze Express.js um mir einen kleinen Server zu erstellen.
Hier mal der Server:

const express = require('express');
const fs = require("fs");
const https = require("https");
const app = express();
const port = 80;

https
  .createServer(
    {
      key: fs.readFileSync("ssl/privkey.pem"),
      cert: fs.readFileSync("ssl/cert.pem"),
    },
      app
  )
  .listen(443, () => {
    console.log('https server is running on port 443')
  });

app.get('/', (req, res) => {
  res.send("Hello World");
 console.log('funktioniert');
})
app.get('/api', (req, res) => {
  console.log('Umleitung hat funktioniert')
})

Als Frontend habe ich mir auf dem server vue.js installiert.

Wenn ich im Terminal mit dem Befehl

npm run serve

den vue server starte, kann ich dann wie in der console angegeben über

http://localhost:8080/

den vue Frontend mir anzeigen lassen. Sowei sogut.

Nun möchte ich aber das unter

http://localhost:8080/

ausgegebene Vue Frontend über

app.get('/', (req, res)...

Routen lassen.
Damit ich über den Browser wie z.B. mit dem Link https://INTERNETADRESSE/ die Frontend Seite von Vue angezeigt bekomme.

 

[mikdoe]

Meinst du so etwas wie die Datei hosts mit der man Namen auf IP-Nummern "umleiten" kann?

Was ist die hosts-Datei und wie ändert man sie?

Mit der hosts-Datei wurden früher Webadressen aufgelöst. Heute ist sie noch für lokale Netzwerke und die Sperrung ungewünschter und schädlicher Websites praktisch.

www.ionos.de

 

[cypher28]

Leider nein.
Bin dabei mir das vue.js Framework mit einem node.js Backend anzueignen. Bei Vue.js kann man einen deployment Server erzeugen, welches dann über den localhost erreichbar ist, obwohl der ganze Code auf einem externen Server liegt. Ich glaube das ist möglich durch die ssh Verbindung mit VSCode. Nur läuft es dann natürlich nicht durch den node.sj Server um die Routings zu testen.
Oder aber man muss einen "build" vom Projekt erstellen, welches einen "dist" ordner erzeugt. Diese muss dann in das node.js Projekt verschoben werden, um es über den node.js server zu testen.
Und genau dieses erstellen und verschieben kann man eigentlich umgehen indem man im package.json vom node.js server einen eintrag macht, damit die routing des node.js servers über den localhost durchgeführt wird.

Ich hatte dasmal gemacht mit einer Anleitung aus dem Netz, nur finde ich es nicht mehr.