Expressでクライアントサイドルーティングを使用して複数の反応するアプリケーションにサービス

Question

1つのサービスに異なるソフトウェア製品がありますが、これは1つのサーバーに導入する必要があります。クライアントはcreate-react-appによるビルド設定で反応して構築され、サーバはNode.jsとExpressを実行します。

私はそれが次のように行われているサーバーから単一のアプリケーションに役立つ：私は、サーバーから複数のアプリケーションにサービスを提供できるようにしたい

// 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')); 
    }); 
} 

を。私はどうしたらいいですか？

私が試みたのは、アセットのさまざまな静的パスを配線し、クライアントが別の名前で区切ることですが、動作しませんでした。このように：

// 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')); 
    }); 
} 

私はまた、このようにそれを実行しようとしましたが、Expressのスローエラーしている：いいえデフォルトエンジンが指定されていませんし、拡張子が提供されなかった。

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')); 
    }); 
} 

私はこのか何かを達成することができる方法同様？

Answer 1

この問題でしばらくの間苦労した後、元の設定を損なうことなく解決策を見つけました。

Express vhost packageを使用して、仮想ドメインを介した要求の処理をセットアップしました。あなたが必要とする

アプリのインスタンスを作成するときは、（我々の場合には、その3つの別々のアプリケーションに加えて、元のアプリのインスタンス）を個別に公開するとして、あなたは急行のように多くのアプリケーションを初期化する必要があります。その後

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

vhostをインストールしてインポートします。次に、各アプリケーションの静的フォルダを指定することで、静的ファイルを個別に処理することができます。残りの部分は、それぞれ指定されたサブドメインの要求を処理します。

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)); 

ドメインのDNSレジストリにCレコードとして必要なサブドメインを追加することを忘れないでください。例：

...records 
CNAME vendor @ 
CNAME admin @ 

Answer 2

なぜこれを行うには反応とreact-routerを使用していませんか？

import App1 from './App1/App' 
import App2 from './App2/App' 
import App3 from './App3/App' 

const AppRouter=() => 
    <Router> 
     <Switch> 
      <Route exact path="/1" component={App1}/> 
      <Route exact path="/2" component={App2}/> 
      <Route exact path="/3" component={App3}/> 
     </Switch> 
    </Router>; 

だから、あなたは1つのアプリケーションでそれらを構築することができます。

Answer 3

私は仮想ホストを使用せずにこれを実現できました。主なアプリをルート（つまり/）に残した以外は、あなたが質問に付けた最初のアイデアを使用しました。この後

// 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')); 
}); 

、私はmainApp/package.jsonに入ったと

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

:4141を追加特急サーバが実行されているポートです。この行は、fetch('/some/route')への呼び出しを、反応アプリ自体ではなくサーバーに戻します。

は最後に、我々はapp2/package.jsonに行くと、私はここで鍵が"homepage"の鍵であると信じてい

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

を追加します。私がそれを理解すると、反応が始まると、ホームページでいくつかの静的ファイルが検索され、"homepage"の部分がなければ、空の白い画面またはmainAppしか取得できませんでした。

私はこれが誰かを助けてくれることを願っています！