前面および背面を終了分離は、業界標準のインターネット使用のプロジェクト開発、効果的に（NodeJSの途中であってもよい）nginxの+ Tomcatの実施形態を切り離すことにより、前端と後端の開発となっています。前面および分離の後端は、大規模な分散型アーキテクチャ、柔軟なコンピューティングアーキテクチャ、マイクロサービスアーキテクチャ、（例えばブラウザ、車載端末、アンドロイド、IOS、等のようなさまざまなクライアント、）マルチターミナルサービスの将来のためのもので、固体基盤を築くであろう。核となるアイデアの前端と後端は、AJAXは、RESTfulなAPIインタフェースのバックエンドに呼び出し、JSONデータを介して相互作用を通じて、フロントエンドのHTMLページを分離することです。
開発開発のフロントエンドの分離および後端
JavaWeb以前のプロジェクトでは、それらのほとんどは、Javaプログラマーであり、バックエンドと従事、フロントエンドに従事します。時代の発展に伴い、多くの中小企業が徐々に前との境界の後端より多くの明確なフロントエンドエンジニアだけでフロントエンドの開発という、バックエンドの開発エンジニアだけのバックエンドを共有し始めました。そして、中規模企業は、すべてのラウンドを必要とする中小企業（お金を節約するために）プロの人材を必要としています。しかし、個人のキャリア開発のために、分離した方が良い、後半のとき、キャリア開発するため、企業ではなく、熟練労働者よりも一つの領域の専門家、する傾向があります。1台のフロントエンド、バックエンドの場合は、それが何かを言うことができないということになります。
その上でのパフォーマンス、スムーズなスピード、互換性とユーザーエクスペリエンスとの追求のフロントページ。だから、フロントエンドの開発エンジニアのために、HTML5、CSS3、JavaScriptやjQueryの、AngularJS、ブートストラップ、ReactJS、VueJS、WebPACKの、より少ない/サス、ガルプ、NodeJS、GoogleのV8エンジン、JSのマルチスレッド、JSのモジュラーに焦点を当てる必要があります、JS指向プログラミング、デザインパターン、ブラウザの互換性、パフォーマンスの最適化について。
3高（高並行性、高可用性、高パフォーマンス）、セキュリティ、ストレージ、および他のサービスのバックエンドを追求。だから、バックエンドの開発エンジニアのために、必要性は、Javaの基本、デザインパターン、JVM原理、原則とソースコード、Linuxでは、リレーショナルデータベースのトランザクションの分離とロック機構、MongoDBは、HTTP / TCP、マルチスレッドの春の家族のバケットに焦点を当てます、分散アーキテクチャ、柔軟なコンピューティングアーキテクチャ、マイクロサービスアーキテクチャ、Javaパフォーマンスチューニング、最適化データベースのパフォーマンスと関連するプロジェクト管理。
あなたのコアコンピタンスはますます高くなってされるように、特定の方向に深く掘り下げます。あなたが人生の中に入れたものに言っているように、人生は何に戻ってきます。おそらく何も（貪欲人々続くんだろう、あなたが費やすすべてのエネルギーを作る、あなたは何を思うだろう後者の前面と背面には、深遠なものをたくさん持っているので、それがあるかどうか、いわゆるフルスタックを追求するために自分自身を強制しないでください。最後に、何もすべてで、サンタクロースは、私はそれはすべてを）したいフレーズを言ったとは思いません。もちろん、生活の中で同じに値しない人や物事に時間を無駄にしないと同じように、あなたが学校に行くことができないという意味ではありません、学習が可能ですが、一部の焦点に、優先順位を付けます。
結合の問題を分離前端と後端を解決します
むかしむかし、私たちのプロジェクトは、そのようなので、上のSpring MVC、構造体、春ブーツ、春のJDBC、Hibernateは、MyBatisのとなど、いくつかの舞台裏の枠組みを、JavaWebを使用しています。Javaのバックエンドでのプロジェクトのほとんどは、3層に分かれているすなわち、制御層（コントローラ）、ビジネス層（サービス）および持続性（ダオ）。層は、（Freemarkerのように、またはページテンプレート）制御パラメータ、通話関連のビジネス層、データをカプセル化、およびルーティングを受信してJSPページをレンダリングする責任があります。そして、JSPページの手書きのJavaまたは発現に使用するさまざまなタブが遊びのアイデアのMVCのセットで、背景データを表示します。
私たちは、この状況を見て：私たちは、需要の上に設定し、ウェブサイトを、開発したコードが終了し、このようにMavenなどのIDEツールや戦争が終わっとしてラベル付けされたコードのパッケージとテストを終え、本番環境でのWebコンテナに戦争パッケージを公開します以上、やり直すWEBコンテナ、ドメイン名、DNSの設定が終わると、サイトが訪問することができます。この時点で、我々はすべてのフロントとリア側のコードにあったものJS、CSS、画像、その他の静的リソースファイルを含む戦争のパッケージは、。
次に、我々はブラウザにドメイン（www.xxx.com）を入力し、ブラウザは、ドメイン名とDNSサーバの外にサーバを経由して、当社のIPネットワークを見つける（3後、サーバー、TCPハンドシェイクにHTTPリクエストを送信しますHTTP以下は、当社のサーバーが要求を取得した後、TCPプロトコルを介してデータを転送するためにTCP / IP）、で、サービスを提供するパラメータを受け取り、その後、ブラウザへの対応に戻り始め、ブラウザは、コンテンツタイプによって返されたコンテンツを解析し、 、ユーザに提示。
ここでは、私たちの家は100枚の絵を持っていることを前提とし、ユーザーがホームページにアクセスすると、その後、あなたは100 HTTPリクエストを確立する必要があり、当社のサーバーは、これらの要求を受けて、我々は、サーバー上の（消費ソケットTCPトランスポートを再生するためのメモリのコストを作成する必要がありますコンピューティングリソース）。人は大丈夫であれば、すべてのページが、このサーバのみ、私たちの要求に要求されているので、1万人がある場合はここでの焦点は、このような場合は、当社のサーバーへの圧力は、非常に大きくなり、それに同時にアクセスしています（私はその後、私は私たちのサーバは（TCP接続、帯域幅、メモリ、ハードディスク、IO、WEBサーバのメモリなど）を運ぶことができなかったことを怖い、私は恐れて、ダウンタイム午前、）、ここでは、サーバークラスタを話す単一インスタンスのサーバーを述べたことはありません。
中規模のWEBアプリケーションを切り離すことが理由です。理論的にように、我々の単一サーバ上で投げるのユーザーがそのファイル、ログ、およびアップロード、データベース、アプリケーションサービス、メッセージキュー、キャッシュを置くことができ、どのようなメカニズムは、任意のアラームサービス管理をプレイしていない、パフォーマンス行われなければならないものを監視し、そして、私はよくダウン（青少年の仏部門に）それを愛します。しかし、現実には、とき、サブアプリケーションのメモリが不安定なので、ああ、私たちをダウンできるようにし、全体のサーバのメモリオーバーフローを引き起こし、時間と再び我々の悪い、私たちのサイトをハングアップするためにはつながりません。例えば、この時間は、開発スパートのピークであることを起こる場合は、当社のビジネスは、サーバーがハングアップしたときに、ビジネスを貼り付けた技術、それは多数のユーザの損失につながる可能性があり、結果は悲惨である可能性があります。ここでは、偶然に、技術がビジネスの前に行かなければならない、またはそれは、開発の最良の時期を逃すことがあります。
また、あなたが一緒にカップリングのすべてを使用する場合、玉石の同等は、サーバーの負荷が容量不足であるとき、一般的にサーバークラスタが作られ、ロード・バランシングを使用しています。だから、実際にあなたがレベルでの石のブロックを拡張され、加速性能は低く、低取得されます。あなたが知っている、自分の負荷が低い場合や機能モジュールは、パフォーマンスのボトルネック拡張魚のために行くために、水平方向の水平展開を拡大する必要はありません。ここでの例では、フロントエンドのパフォーマンスのボトルネックは関係ありませんが、フロントエンドのレベルを拡張する必要はありません。同時に、唯一のバックエンドのコードを変更する場合、髪は、時間を配備し、また、フロントエンドのコードの再リリースを踏襲している、明らかに効率が低下します。
このため、インターネットの通常のアーキテクチャは、WEBサーバのクラスタリング、アプリケーション・サーバ・クラスタ、クラスタ・ファイル・サーバ、データベース・サーバ・クラスタ、Message Queueクラスタ、キャッシュ・クラスタ、最大分割の他のクラスタです。
欠点結合前端と後端（例ではJSP）
したがって、トラフィックが高くないため、ユーザにデータを明らかにページとしてJSPを使用して、そのためあまり厳しい性能要件が、今では、ビッグデータの時代で、インターネットプロジェクトの性能要件が増加しており、ほとんどの前のJavaWebプロジェクトフロントとリアの端部が連結されているオリジナルの建築パターンは、私たちを満たすことがますますできなかったので、我々は大幅にロードする当社の能力を高めるにデカップリング方法を見つける必要があります。（例えばJSPで）次の主な欠点の前端部に結合されました。
1.結合動的リソースとすべて一緒に静的リソース、サーバ圧力、サーバは、HTTPリクエスト、HTTPのようなCSS、JS、画像などの要求などの多様を受けるからです。サーバーの状況が発生すると、子牛のフロントを終えて戻って一緒に、ユーザーエクスペリエンスが悪いです。フロントとリアエンドの分離、あなたがハングアップ、バックエンドサーバーは、フロントエンドサーバーがハングアップしなかった場合は、要求されたデータよりも少ないものの、ユーザーがまだちょっと、インターフェイスを見ることができます。
良いデザイン2.UIした後、フロントエンドの開発エンジニアは、JSPページにHTMLを設定するには、Java開発エンジニアによって必要なHTMLにカットデザイン、高い誤り率（多くの場合、ページは、JSのコードの多くなるため）のための唯一の責任があります双方は共同開発し、非効率的なする必要がある場合、問題を修正。
3.JSPページはnginxの、など（5Wまでの同時HTTPの単一インスタンスという公式の主張を）使用することができない、パフォーマンスがアップしません（などのTomcat、Jettyは、樹脂、など）Java対応のWebサーバー上で実行する必要があります。
4.最初のリクエストJSP、サーブレットは、最初の操作が遅くなり、WEBサーバにコンパイルする必要があります。そして、各アクセス要求JSPサーブレットの後に、その後のHTMLページの出力ストリームは、高効率に直接（各オハイオ州ことに注意してください）HTMLを使用していません。
5.JSP内でより内蔵されていたラベルと排他的な表現、変更されたページでは、フロントエンドの開発エンジニアは、彼らの頭のはげを悩まスクラッチする傾向があります。
6.それは、すべてのコンテンツの出力と、同期的にロードされるため、JSPページの多くの内容が、応答が遅い場合。
7. JSPページを修正したJava IDEを使用し、非常に非友好的なフロントエンドの開発エンジニアのためのバックエンドの開発環境の多様性を設定するには、フロントエンドの開発エンジニアを必要とします。
別前部および利点の後端
別前端と後端は、nginxのを使用して、フロントエンドサーバ1前端と後端を分離達成することができます。フロントエンド/ WEBサーバは、JSと画像をCSSを入れて、静的リソースのシリーズ（あなたも、このようなOSSアリ雲のように、特定の静的ファイルサーバにこれらのリソースを入れて、CDNアクセラレーションを使用することができます）。フロントエンドサーバーは、ページ参照を制御するための責任がジャンプして、ルート、AJAX非同期インタフェース、Tomcatを使用してバックエンド/サーバ・アプリケーション（フロントにロマンチックな、データのみを提供する）を介してフロントページのバックエンドを呼び出して、全体的な応答データをスピードアップ。（ルータ、Reudx、WebPACKのなど、反応させ、例えばNodeJSように、フロントエンドのフレーム番号を用いて操作しなければなりません）
すぐに問題がお互いに責任を転嫁する現象が現れない見つけることができるバグが見つかった場合は、フロントとリアエンドモードの分離、下の2。ページのように論理エラージャンプ、ブラウザの互換性の問題、スクリプトエラー、ページのスタイルとある場合は、すべてのポットフロントエンドの開発エンジニアがあります。インターフェースは、データエラー、データ、応答タイムアウトやその他の問題を提出する障害がある場合は、バックエンドの開発エンジニアは、ポットを取るために前方に来る必要があります。責任双方は、彼らが戦うことはありません。
大規模な同時の場合、エンド分離、我々はフロントとリアエンドサーバー周り3.ながら水平に拡張することができます。淘宝網はホーム2000 +フロントエンドサーバーのクラスタを必要と知っているために万人が毎日平均PVの一日平均数を耐えすることができません。（アリの技術サミットが書かれている独自のWebコンテナに来て、抗10万同時HTTPのも、単一のインスタンス、2000の同時HTTP 200百万円、彼らはまた、無限に予知のピークに合わせて拡張することができ、良いホラーああ、ホーム...）
前記セパレータの先端が同時バックエンドサーバ/負荷圧力を低減することができます。フロントnginxのに転送されたHTTPリクエストのすべての他のすべてのインターフェイスに加えて、要求インタフェースをコール転送は、Tomcatです。そして、ページの最初の要求に加えて、ブラウザがキャッシュ・ページにローカルキャッシュを大量に呼び出します。
バックエンドサーバーが出たりダウンし、一時的で、通常はフロントページにアクセスしますが、データだけで磨くされていない場合でも、分離パターンのフロントエンド。
6.分離モードの前後端は、バックグラウンドインタフェースを多重化することができます。このような再APP関連サービスなどのマイクロチャネルの光関連のアプリケーションを実行する必要として、あなたが共有できるインターフェイスは、のみ、またはいくつかのリファクタリングによって、あなたは、インターフェイスの多くを再利用し、開発効率を向上させることができます。（マルチアプリケーション）
7ページは、負荷は、同期、非同期ローディングから変更されたため、コンテンツのない量は、恐れません示しています。
8.Nginxは、サーバ、フロントエンドのアップグレードや、よりシームレスに再起動せずに、ページの熱い展開をサポートしています。
9.（前端と後端は、このようなJSPページのようなコードを読み取るためのハード一緒に結合されている）の開発効率の向上、メンテナンスや視認性を増加させました。
前端と後端10は、開発効率を向上させるために、並行して開発することができます。
11.他のすべてのポートは、HTTP、パフォーマンスおよびセキュリティを使用して、ネットワークが保証されている（ポートスキャンからのハッカーを防ぐために）閉じ、nginxの証明書を展開し、外部ネットワークにアクセスするためにHTTPSを使用して、唯一のオープンポート80および443。
ノートの分離の終わりの前と後
1.開いている会議の要件、フロントとリアエンドエンジニアがすべて参加しなければならない、との良好なインタフェースのマニュアルを開発する必要、テストケースを書くためのバックエンドをエンジニア（2次元）、フロントエンドエンジニアはフルタイムのテストとして動作させてください。
2.上記のインターフェースは、白はあなたのコントローラの内部インターフェイスのメソッド呼び出しを呼び出すことであると言って、Javaインタフェースではありません。
3.私たちは、ネストされた類似したページの一部、改ページ、ページジャンプ制御に対処するためのフロントエンドのフレームワークを必要としています。
4.小さなプロジェクトは、その後、このような単純なイントラネットのプロジェクトは、フロントとリアエンドを分離する必要はありませんが、複雑なアーキテクチャは、パフォーマンスにドラッグします。それはネットワーク外の大規模なプロジェクトである場合でも、フロントとリアエンドを分離することは非常に必要です。
前の世代は、前後端の本当の分離はありません、それは少し良いパフォーマンスで、また、ベロシティ/ Freemarkerのフレームワークテンプレートおよびその他の静的なページ、個人的な感触に類似していたし、そう遠くないの背後にある実際にはJSPを使用しています。
前記セパレータの前端は、チームが後端のワークロード、改善された性能と拡張性を低減し、チームのフロントエンドの負荷を増加させるであろう。
あなたは、ページなどのいくつかをチェックするために、関連する権限を持っている場合7.は、これらのデータはまた、関連しているとAJAXによってインタフェースから年を取ることができます。
フロントとバックエンドのロジックをしているの両方を行うことができます8.が、それは前に推奨される、なぜならコンピューティングリソースの必要性から、ロジックの計算を実行するためのバックエンドのロジックに配置された場合、それはなど、メモリやCPUのコンピューティングリソースの消費を帯域幅ます。あなたが心に留めておく必要はありサーバコンピューティングリソースが限られているということで、サーバーの負荷が（並行性の高いシナリオ）をドロップするように、クライアントのコンピューティングリソースを使用して、前に置かれた場合。これは、前端と後端が行うことに必要とされる、データの検証と同様です。
9.フロントエンドは、顧客に優しいショーをバックエンド要求タイムアウトとバックエンドサービスのダウンタイムの場合に対処するためのメカニズムを持っている必要があります。
独立したフロントとリアは、拡張読書を終了します
1.それは普通のサーバとオペレーティングシステムであればJS、CSSに関しては、これらの静的リソースのイメージがPBグレード（1000TB）ファイルでの到着時に保存、（OSSアリクラウドファイルサーバのこのタイプを置くために類似したと考えることができ、またはフォルダ内の個々のファイル数3から5000000に達し、IO深刻なパフォーマンスの問題があるだろうが）、その後、CDN（国立サブノードの加速度）で、あなたは、あなたが国にいるかどうか、OSSに飛ぶようにページスピードを開きますその場所、そしてあなたのnginxの負荷をさらに低減されます。
2.軽量のマイクロサービスアーキテクチャを再生したい場合は、ゲートウェイを使用するNodeJS、および有益また、SEO最適化NodeJSを使用することの利点、国内の検索エンジンのスパイダーがクロールする一方nginxのは、単に、ブラウザに静的リソースページを返すため静的データは、優れた検索エンジンのサポートを得ることができないアプリケーションを作るページJSを解決しません。nginxのは、ページのレンダリングと同時に組み立てることがないだろう、あなたはブラウザのレンダリングの負担に追加して、ブラウザに静的なページを置き、その後、レンダリング作業を完了する必要があります。ブラウザ開始された要求は、nginxの、NodeJS統一分布にURLリクエストを介して配信さNodeJSでページのレンダリングのために組み立てられ、APIリクエストは、バックエンドサーバー、完全な応答に直接送信されます。
3.クロスドメインの問題を持っている場合は、CORSのSpring4は完璧な解決策になることができます。しかし、一般的には、2つのサービスドメインにフロントエンドとバックエンドのサービスを入れない限り、nginxのリバースプロキシクロスドメインの問題を使用する必要はありません。JSONPの方法も失いました。
4.あなたは、Tomcatネイティブセッションメカニズムを削除するには、主に、マルチターミナルアプリケーションを再生したい場合。（それは分散システムであるため）キャッシュを使用して、トークン・メカニズムを使用するには、単一のポイントを行います。トークンのメカニズム上のセキュリティ問題は、我々は、JWT（JSONウェブトークン）で理解することができます。
遠位端は、後端が可用性と安定性を確保するために、詳細なテストを必要とし、サービスであろう、模擬試験項目を添加してもよい（バックエンド仮想テストオブジェクトをシミュレートするように構成さを独立して開発し、試験することができます）。
概要
セパレータの前後端は、開発モードが、建築パターン（前後端分離アーキテクチャ）ない過ぎません。分離の前後端の前面と背面から分離されたコードを書くと、このような理解あまりにも一方的な場合にのみ考えてはいけません。前端と後端とを区別する必要がある、すなわち、アイテムの前端と後端を分離前端及び後端部は、2つのアイテムを投影している2台の異なるサーバー上の項目であり、独立した展開する必要がある、二つの異なるプロジェクト、二つの異なるコードライブラリ、2別の開発者。フロントとバックエンドの開発エンジニアは、並行開発を実現するために合意対話型インタフェースを必要としています。そして、開発が終了した後、フロントエンドとバックエンドのプロジェクト項目は、AJAXを経由してバックエンドのRESTful APIを呼び出して、独立して展開する必要がある、呼び出すためのフロントエンドHTTPリクエスト。データのみを生成する方法を気にしない、フロントエンドのスタイルと動的データの解析とページのレンダリングに焦点を当てる必要があります。バックエンドは、フロントエンドの表示ニーズに返される特定のビジネスロジックとビジネスデータに焦点を当てています。
「どこへ行くに関係なく、再起動する勇気を失うことはありません。」