Mit mehreren apps reagieren mit client-side-routing im Express

Habe ich verschiedene software-Produkte, die für eine einzelne Dienstleistung, die bereitgestellt werden muss, um einen einzelnen server. Die Kunden sind gebaut mit reagieren, mit einer build-setup erstellen-reagieren-app, während der server läuft Node.js und Express.

Wenn ich für eine einzelne Anwendung aus dem server-es erfolgt auf folgende Weise:

//App.js
//...
//Entry point for data routes (API)
app.use('/data', indexRoute);

if(process.env.NODE_ENV !== 'development') {
  app.use(express.static(path.join(__dirname, 'build-client')));

  app.get('/*', function(req, res) {
    return res.sendFile(path.resolve( __dirname, 'build-client' , 'index.html'));
  });
}

Ich möchte in der Lage zu bedienen mehrere apps aus dem server. Wie soll ich das machen?

Was ich versucht habe zu Draht in verschiedenen statischen Pfaden, die für die Vermögenswerte und trennen Sie die clients mit verschiedenen Namen, obwohl es nicht funktioniert hat. Wie diese:

//App.js
//...
//Entry point for data routes (API)
app.use('/data', indexRoute);

if(process.env.NODE_ENV !== 'development') {
  app.use(express.static(path.join(__dirname, 'build-client')));
  app.use(express.static(path.join(__dirname, 'build-admin')));

  app.get('/client/*', function(req, res) {
    return res.sendFile(path.resolve( __dirname, 'build-client' , 'index.html'));
  });
  app.get('/admin/*', function(req, res) {
    return res.sendFile(path.resolve( __dirname, 'build-client' , 'index.html'));
  });
}

Habe ich auch schon versucht, es zu tun auf diese Weise, aber Express werfen Fehler: Kein Standard-engine angegeben wurde und keine Erweiterung vorgesehen:

if(process.env.NODE_ENV !== 'development') {
  //Admin paths
  app.use('/admin', express.static(path.join(__dirname, 'build-admin')));
  app.get('/admin/*', function(req, res) {
    return res.sendFile(path.resolve( __dirname, 'build-admin' , 'index.html'));
  });

  //Site paths
  app.use('/', express.static(path.join(__dirname, 'build-client')));
  app.get('/*', function(req, res) {
    return res.sendFile(path.resolve( __dirname, 'build-client' , 'index.html'));
  });
}

Wie könnte ich dies erreichen, oder etwas ähnliches?

InformationsquelleAutor sznrbrt | 2017-11-21



2 Replies
  1. 7

    Nach etwas Herumprobieren konnte ich dies erreichen, ohne Verwendung von virtual hosts. Ich nutzte die erste Idee, die Sie gab in der Frage, außer, dass ich Links die Haupt-app auf den root (d.h. /).

    //when going to `/app2`, serve the files at app2/build/* as static files
    app.use('/app2', express.static(path.join(__dirname, 'app2/build')))
    //when going to `/`, serve the files at mainApp/build/* as static files
    app.use(express.static(path.join(__dirname, 'mainApp/build')))
    
    
    //These are necessary for routing within react
    app.get('app2/*', (req, res) => {
      res.sendFile(path.join(__dirname + '/app2/build/index.html'))
    })
    
    app.get('*', (req, res) => {
      res.sendFile(path.join(__dirname + '/mainApp/build/index.html'));
    });

    Danach ging ich in mainApp/package.json und Hinzugefügt

    "proxy": "http://localhost:4141"

    :4141 ist der port, den der server express ausgeführt wird. Diese Linie wird telefonieren fetch('/some/route') gehen zurück an den server anstatt in Ihrem reagieren, die app selbst.

    Schließlich gehen wir zu app2/package.json und fügen Sie

    "proxy": "http://localhost:4141/app2",
    "homepage": "/app2"

    Ich glaube, dass der Schlüssel hier ist die "homepage" – Taste. Ich verstehe es so, wenn reagieren beginnt, sucht es einige statische Dateien auf seine homepage, und ohne die "homepage" Stück war ich nur in der Lage, entweder ein leerer weißer Bildschirm oder die mainApp.

    Ich hoffe, dies hilft jemand da draußen!

  2. 5

    Nach kämpfen für eine Weile mit diesem problem habe ich eine mögliche Lösung gefunden, ohne die ursprüngliche setup.

    Verwendeten wir Express-vhost-Paket setup, die Bearbeitung von Anfragen, durch virtuelle domains.

    Beim erstellen Ihrer app-Instanz sollten Sie initialisieren, da viele apps mit Ausdrücken, wie Sie wollen zu entlarven separat (in unserem Fall drei separate apps plus die original-app-Instanz)

    //Create an express instance
    const app = express();
    const appAdmin = express();
    const appClient = express();
    const appVendor = express();

    Danach zu installieren, müssen Sie diesen importieren. Dann mit der Angabe der statischen Ordner für jede app, die Sie behandeln können, dienen die statischen Dateien getrennt, während die verbleibenden Teil befasst sich mit der Bearbeitung der Anforderung für die angegebenen subdomains beziehungsweise.

      appAdmin.use(express.static(path.join(__dirname, 'build-admin')));
      appClient.use(express.static(path.join(__dirname, 'build-client')));
      appVendor.use(express.static(path.join(__dirname, 'build-vendor')));
    
      appAdmin.use((req, res, next) => {
        return res.sendFile(path.resolve( __dirname, 'build-admin' , 'index.html'));
      });
    
      appClient.use((req, res, next) => {
        return res.sendFile(path.resolve( __dirname, 'build-client' , 'index.html'));
      });
    
      appVendor.use((req, res, next) => {
        return res.sendFile(path.resolve( __dirname, 'build-vendor' , 'index.html'));
      });
    
      app.use(vhost('domain.com', appClient));
      app.use(vhost('www.domain.com', appClient));
      app.use(vhost('a.domain.com', appAdmin));
      app.use(vhost('b.domain.com', appVendor));

    Vergessen Sie nicht, fügen Sie die gewünschte sub-domains in Ihrer domain die DNS-Registrierung. Beispiel:

    ...records
    CNAME   vendor  @
    CNAME   admin   @

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.