クライアントとサーバーの整理SPA/Node.jsアプリケーション

Question

Node.jsバックエンドと単一ページのWebアプリケーションフロントエンドを使用してアプリケーションを作成しています。

私はクライアントとサーバーのロジックを同じプロジェクトに保存しているため、簡単で迅速な開発が可能です。

私は成果物をどのように整理するのが最適か考えています。

Node.jsの部分は、プリプロセッサのバッテリー（蒸散、縮小、連結など）を通過する必要がないため、簡単です。

上記のようにフロントエンドを変換する必要があります。distフォルダに配置されていると思います。

ファイルの現在の階層はそうのようなものです：

my-app 
- src 
    - client 
    - server 

私はSRC /クライアントの下でクライアントアーティファクトのためのdistフォルダを置くべきか？

誰もがこれを試して、このアプローチで問題を見つけましたか？

私はHeroku（gitを使用するデプロイメントシステム）を使用しています。

クライアント用に構築された成果物をコミットするのは間違っていますが、私はそれをHerokuにプッシュすることによって展開したい場合、それらをコミットする必要があると思います。これは正しいです？

Answer 1

この質問は、あり、独断答えを誘うので、私は、これは決して行くための唯一の方法であると言うことから始めますが、私の意見では、それはで動作するのが最も簡単であり、ほとんどを作るようセンス。

生産クライアントコード

は、前処理した後、あなたはそれを見てどのように応じ distributionまたは destinationを意味するかもしれませんいずれかが、 my-app/distまたは my-app/dstに配置する必要があります。いずれにしても、私のお勧めは、 このフォルダにコミットすることです。これは、リモートでたくさんのデバッグを省くためです。

たとえば、コードがローカルではあるがリモートでは動作しない場合は、distフォルダを生成するためにpostinstallフックなどを使用して、プログラムの問題点を特定しようとするときに、

distフォルダをコミットするもう1つの利点は、ビルドプロセスで使用するすべてのパッケージをdependenciesではなくdevDependenciesと指定できることです。これはの巨大なであり、あなたのherokuプロセスでの展開がずっと速くなり、メモリ使用量も少なくなります。

これは、あなたがという自動化されたタスクを使用して、同じビルドプロセスを使用したくないと判断した場合でも、distフォルダを作成することをお勧めしますリモートでdistディレクトリをコミットすることを選択してください。カスタムnpmコマンドとして追加することができます。npm run buildとあなたのgulpタスクを呼び出す必要があります。

最後の1つです。 reactやangularのようなフレームワークの代わりにpugまたはまたはejsのようなテンプレート言語を使用している場合は、本番環境で提供される静的なHTMLファイルをビルドするためにテンプレートを実行できるかどうかを判断することをおすすめします。

もしそうでなければ、特定のテンプレート言語で提供されている推奨事項に従って、少なくともテンプレートをコンパイルしてください（実行するのと混同しないでください）。通常、コマンドラインユーティリティを使用してコンパイルされたテンプレートを生成することを推奨します。そのため、本番環境で呼び出されるたびにコンパイルする必要はありません。これにより、コンパイルされたテンプレートをキャッシュするためにより多くのメモリーを使用する代わりに、node.jsサーバーが要求に迅速に応答するようになります。

Answer 2

このルートに行く予定がある場合は、nodejs app.js/index.jsを編集して静的ファイルを提供し、ディレクトリをdist/に指定します。 また、api以外のすべてのリクエストをフロントエンドに転送するようにexpressに指示する必要があります。