フルスタックJavaScriptでフロントエンドとバックエンドを分離する方法は？
私がフロントエンドを持っているとしましょう。これは、ほとんどが単一ページのアプリケーションで、angular、grunt、bowerを使用して書かれています。そして、私がバックエンドを持っているとしましょう。これは、主にREST APIがORMの上に座っており、grunt、express、sequelizeなどを使用してデータベースからオブジェクトを保存/取得するものです。
angularアプリケーションは、ユーザーに表示されるすべての視覚的要素を実行しますが、バックエンドによって提供されるサービスのGUIであることによって実行されます。
これらを2つの異なるコードベースに分離して、独立した開発、バージョン管理、継続的な統合、開発のプッシュなどを可能にすることが望ましいでしょう。
私の質問は、これをきれいに行うための方法は何ですか？フルスタックJavaScriptの推奨ベストプラクティスはありますか？
オプション＃1はモノリス、つまり「それらを分離しないでください」のようです。長所は、ビルドチェーンがシンプルで、すべてが1か所にあるということですが、多くの短所があるようです。独立してバージョン管理するのが難しい場合、フロントが壊れるとバックをデプロイできなくなります。
オプション＃2は準モノリスのようです。フロントエンドのビルドチェーンにより、バックエンドに一連のファイルが書き込まれます。フロントエンドのdistディレクトリはバックエンドのディレクトリを参照するため、基本的にフロントエンドが縮小、醜悪化などを行うと、すべてを実行するバックエンドにパブリッシュされます。
オプション＃3は完全に分離されているようです。フロントエンドとバックエンドはそれぞれ独自のサーバーを異なるポートで実行しており、完全に独立したプロジェクトです。欠点は、互いのポートを認識するように構成する必要があることです。バックエンドはフロントエンドからのCORSを許可する必要があり、フロントエンドはこれらすべてのエンドポイントが予想される場所を知る必要があります。
オプション＃4は、すべてを一緒にリギングするためにdocker-composeのようなものを使用することかもしれません。
他のオプションがあると確信しています。推奨されるベストプラクティスは何ですか？
これは、RESTインターフェースが間にあるフロントエンド、バックエンドのアプリケーションです。すでに完全に分離されています。
私の投票はオプション＃3です。あなたは設定について心配しているようですが、それが全体の要点です。構成により、緊密に結合されたコードバインディングを必要とせずに完全に分離できます。 CORSが心配な場合は、すべてを1つのドメインに配置してください。 CORSが必要な場合、それを管理する最良の方法は構成です。
ただし、ここには「ベストプラクティス」はありません。ベストプラクティスは、特定のニーズに最も適合するものです。
はい。2つを分離し、フロントエンドアプリをサードパーティアプリのように扱う必要があります。最終的には、たとえばモバイルアプリなどの別のクライアントを追加することができます。また、最初のクライアントがこのように構築されていれば、より簡単になります。
アプリのフロントエンドは解決が必要な静的なアセットにすぎないため、Dockerコンテナーまたは別のデプロイメントシステムの使用は、主にバックエンドに関係しています。これらのアセットをサーバーで静的にホストすることも、クラウドフロントのようなCDNのような別の場所でホストすることもできます。
Corsを回避することで少し設定を節約できますが、上記の回答が述べたように、それは一種のポイントです。 cors（およびトークン認証）を使用すると、他のクライアントのためにバックエンドをより適切に準備できます。
編集：フルスタックのjsのベストプラクティスについては、これは一貫していると言えます。 promiseを使用している場合（そして使用する必要がある場合）は、両側で実行します。同じjsスタイルとフォーマットを維持し、同じテストライブラリを使用します（可能な場合）。