フルスタックJavaScriptでフロントエンドとバックエンドを分離する方法は？

私がフロントエンドを持っていると仮定します。フロントエンドは、ほとんどが角ばった、うなり声、お辞儀を使って書かれた単一ページのアプリケーションです。そして、私がバックエンドを持っていると仮定します。ほとんどの場合、ORMの上に置かれたREST APIであり、データベースからオブジェクトを保存/取得し、うなり声、エクスプレス、シークライズなどを使用します。

角度のあるアプリケーションは、ユーザーに表示されるすべての視覚的な処理を行いますが、バックエンドによって提供されるサービスを介したGUIとして機能します。

これらを2つの異なるコードベースに分離し、独立した開発、バージョン管理、継続的統合、開発へのプッシュなどを可能にすることが望ましいでしょう。

私の質問は、これをきれいに行うための方法は何ですか？フルスタックJavaScriptの推奨ベストプラクティスはありますか？

オプション＃1はモノリス、つまり「それらを分離しない」ようです。利点は、ビルドチェーンがシンプルであり、すべてが1か所にあることですが、多くの欠点があるようです。個別にバージョン管理するのが難しく、前面が壊れていると、展開できない背面を意味します。

オプション＃2は準モノリスのようです。フロントエンドビルドチェーンにより、多数のファイルがバックエンドに書き込まれます。distフロントエンド上のディレクトリをするとき、フロントエンドminifies、uglifiesなどので、基本的に、バックエンドには、いくつかのディレクトリを参照することになり、それがすべてを実行し、バックエンドに公開してしまいます。

オプション＃3は完全に分離されているようです。フロントエンドとバックエンドはそれぞれ異なるポートで独自のサーバーを実行し、完全に独立したプロジェクトです。欠点は、互いのポートについて知るように設定する必要があるようです。バックエンドは、フロントエンドからのCORSを許可する必要があり、フロントエンドは、それらのすべてのエンドポイントが予想される場所を知る必要があります。

オプション＃4は、docker-composeなどを使用して、すべてをまとめてリグすることです。

私は他のオプションがあると確信しています。推奨されるベストプラクティスは何ですか？

それは、フロントエンド、バックエンドのアプリケーションであり、その間にRESTインターフェースがあります。すでに完全に分離されています。

私の投票はオプション＃3に対するものです。構成について心配しているように見えますが、それは全体的なポイントです。構成により、密結合コードバインディングを必要とせずに完全に分離できます。CORSが心配な場合は、すべてを1つのドメインに配置してください。CORSが必要な場合、それを管理する最良の方法は構成です。

しかし、ここには「ベストプラクティス」はありません。ベストプラクティスは、特定のニーズに最適な方法です。

はい、2つを分離し、フロントエンドアプリをサードパーティアプリのように扱う必要があります。最終的に別のクライアント、たとえばモバイルアプリを追加できます。最初のクライアントがこのように構築されていれば、あなたの生活は楽になります。

アプリのフロントエンドは解決する必要のある静的なアセットであるため、Dockerコンテナまたは別の展開システムの使用は主にバックエンドに関係します。これらのアセットをサーバーで静的にホストすることも、クラウドフロントのようなCDNのような他の場所でホストすることもできます。

corsを回避することで設定を少し節約できますが、上記の回答で述べたように、それが重要なポイントです。cors（およびトークン認証）を使用すると、他のクライアントのバックエンドもより適切に準備できます。

編集：フルスタックjsのベストプラクティスに関する限り、一貫性を保つためにこれを言います。Promiseを使用している場合（および使用する必要がある場合）、両側でそれを行います。同じjsスタイルとフォーマットを維持し、同じテストライブラリ（可能な場合）を使用するなど。