なぜ分離の前後端必要がありますか？長所と短所は何ですか
プログラマプライベートキッチン2019年 - 08 - 02 09：31：44 の記事は6115個の言葉、読むために16分を推定しています。 著者：Cherry300 出典：jianshu.com / P- / c86cee16b418
まず、前戯
前と分離の終了後にnginxの+ Tomcatの方法が開発したインターネットのプロジェクトを使用するために、業界の標準的な方法となっている大規模な分散アーキテクチャ、柔軟なコンピューティング・アーキテクチャの将来のためになる効果的なデカップリング、フロントおよび分離の後端（あなたはまた、中央nodejsを追加することができます） （例えば、クライアントの様々な：等ブラウザ、車載端末、アンドロイド、IOS）、マイクロサービスアーキテクチャ、マルチターミナルサービスとの強固な基盤を築きます。このステップでは、猿の大人のパスからシステムアーキテクチャの進化です。
核となるアイデアは、Ajax経由restuful APIのHTMLページへのフロントエンドインターフェイスは、バックエンドに呼び出し、JSONデータの相互作用を利用しています。
インターネットアーキテクチャでは、用語集：
Webサーバーは：一般的にnginxの、サーバーのApacheの種類としてを指し、それらは一般のみ静的リソースを解析することができます。
アプリケーションサーバー：一般桟橋、Tomcatなどを指し、樹脂などのサーバーは動的なリソースは静的リソースを解決することができます解決することができ、ない良いのWebサーバに静的リソースを解析する機能。
通常、唯一のWebサーバがネットワークの外部からアクセスすることができ、アプリケーションサーバは、ネットワークにアクセスすることができます。
第二に、手術に特化した業界（開発者の分離）
前JavaWebプロジェクトは、ほとんどのJavaプログラマーDangdie母ですが、また、フロントエンドに従事するバックエンドをして従事すること。
時代の発展に伴い、多くの中小企業は、徐々にちょうどフロント、バックエンドエンジニア物事のほんのバックエンドを行う前の、そしてより多くの境界点の後端と、より明確に、フロントエンドエンジニアを始めました。手術に特化した、いわゆる業界人ならば何でも、彼、結局、何も細かいです。
そして、中規模企業が専門家を必要とする、小規模企業はオールラウンドが必要ですが、個人やプロの開発のために、私は別のをお勧めします。
1、バックエンドのJavaエンジニアのための：
Javaベースの設計パターン、JVM原理、スプリング+ springmvc原理とソース、Linuxでは、MySQLのトランザクションの分離及びロック機構、MongoDBは、HTTP / TCP、マルチスレッド、分散アーキテクチャ、柔軟なコンピューティングアーキテクチャ、マイクロアーキテクチャのサービスに焦点を当てますJavaのパフォーマンスの最適化、および関連するプロジェクト管理。
その上に3つのハイ（高い同時実行、高可用性、高パフォーマンス）、セキュリティ、ストレージ、ビジネスや：のバックエンドを追求。
2、フロントエンドエンジニアのための：
HTML5、CSS3、jQueryの、angularjs、ブートストラップ、reactjs、vuejs、WebPACKの、より少ない/ SASS、がぶ飲み、nodejs、GoogleのV8エンジンは、Javascriptマルチスレッド、モジュラー、アスペクト指向プログラミング、デザインパターン、ブラウザの互換性に焦点を当て、パフォーマンスの最適化、およびように。
フロントエンドは追求です：ようにページのパフォーマンス、スピードと滑らかな、互換性、ユーザーエクスペリエンスと。
手術に特化した産業、あなたが人生の中に入れたものを言うように、あなたのコアコンピタンスは、ますます高くなってしますので、生活が戻ってあなたのものになります。そして、両端の開発は、結局、あなたはどう思うだろう、何もあなた罰金より深いません。
エンジニアの両側がチームと、その後の卓越性のフルスタックを構築するために、それぞれの分野、独立したガバナンス、に集中するようにチームは、前とバイ・サイドのチームの後に分割されています。
第三に、プリミティブ時代（種々のカップリング）
私たちはその上JavaWebの背景フレームあり、springmvc /ストラット+春+春のjdbc /休止状態/ MyBatisのプロジェクトの数を使用しているとき、いくつかは持っています。
プロジェクトのほとんどは、3つの層、制御層、ビジネス層、永続化層に分けJavaのバックエンドです。レイヤーは、制御パラメータを受信するための責任があり、通話関連のビジネス層、データをカプセル化し、ルートに＆JSPページをレンダリングします。その後、さまざまなタブまたはJSPページを使用して手書きのJava式は、アイデアのMVCのセットを演奏し、バックグラウンドデータを表示します。
私たちは、この状況を見て：需要は、終了コードを完成し、テストテストは、オーバーその後、何ですか？それを公開するには？あなたは正しい、などのEclipseのMavenなどのツールを使用するか、戦争のパッケージとしてラベルされたコードを入れ、その後、本番環境でのWebコンテナに戦争パッケージを公開する必要がありますか？
リリースが終わった後、あなたのWebコンテナを開始したい、サービスの提供を開始、あなたのWebサイトに関連するなど、ドメイン名、DNSを設定するには、この時間は、（あなたがウェブサイトと仮定）訪問することができます。その後、我々はあなたの前で見て、バックエンドのコードはバッグ内のすべてのその戦争ではないでしょうか？あなたのJS、CSS、画像、様々なサードパーティのライブラリを含む、右？
さて、ここであなたは、ブラウザでウェブサイトのドメイン（www.xxx.com）を入力し、何が起こったのか？（この問題は、企業の多くが疑問に直面もある）私は、あなた自身の靴で検索するには、貧しい人々の基盤をドライああ言うを拾います。
DNSサーバのネットワークIP外部のサーバーでのドメイン名で見つかったブラウザは、HTTP（以下は、TCP / IPである）TCP3握手した後、ご使用のサーバーにHTTPリクエストを送信し、TCPプロトコルを介してデータを送信するために始めた、あなたのサーバが取得します要求の後、ブラウザを、サービスを提供するパラメータを受け取り、その後、ブラウザにあなたの応答を返すために始め、その後、あなたはコンテンツタイプによってコンテンツを解析するために返され、ユーザに提示。
そして、私たちが見て、のは、あなたの家は100枚の絵を持っていると仮定しましょう、この時間は、それがユーザーからのHTTPリクエストはそう、実際には、ありません一度、ユーザーの最初の訪問は、ブラウザのキャッシュにあるだろうと、あなたの100枚の写真、要求100 httpリクエスト（誰かが短い質問にhttp接続であっても、長い私に言った、ここで説明されていない）に接続、ブラウザ、サーバーは、これらの要求を受けて、我々は、メモリのコストのためのソケットを作成する必要がありますサーバー、JSPの痛みのポイントに4のためのTCP送信（メートルを再生
プロジェクトのほとんどは、トラフィックが高くないため、ユーザにデータを明らかにするJSPページ、およびので、あまり厳しい性能要件を使用しますが、今ではビッグデータの時代で、インターネットプロジェクトの性能要件が増加しているので、として前javaWebフロントとリアの端部が連結されているオリジナルの建築パターンは、私たちを満たすことがますますできなかったので、我々は大幅にロードする当社の能力を強化する方法をデカップリングする方法を見つける必要があります。
サーバーがようにそのようなHTTPリクエストCSS、JS、画像などの各種のHTTP要求を、受け取り、そしてするので1は、動的リソースと静的リソースは、サーバ圧力、すべて一緒に結合されています。サーバーの状況が発生すると、それはフロントとバックで終了する、ユーザーエクスペリエンスが悪いです。
2は、優れたUIデザインの後、フロントエンドエンジニアは、HTMLは、（多くの場合、ページはjsのコードの多くなるので）高いエラー率にエンジニアJavaのJSPページで設定する必要があり、変更のhtmlにカットデザインのための唯一の責任があります双方は時に問題の非効率性の相乗効果を開発する必要があります。
図3は、JSP（などのTomcat、桟橋、樹脂、など）を実行する必要があり、そのパフォーマンスアップはもちろんのこと、（HTTP同時nginxのは、最大5ワットへの単一のインスタンスは、この利点を使用すると言われて）JavaでサポートnginxのWebサーバーで使用することはできません。
4、最初の要求のJSPは、最初の実行が遅くなり、Webサーバでサーブレットにコンパイルする必要があります。
5は、サーブレット、JSPにアクセスするための各要求は、出力ストリームのhtmlページです、高効率（〜毎回ヨーヨープロ）を直接HTMLではありません。
6、フロントエンドエンジニアは、ページを変更痛みのポイントの多くに遭遇するようにハード押されたことになるとき、JSPや表現の内側よりラベルがあります。
7、それは同期的にロードされるため、多くのJSPページのコンテンツは、応答が遅い場合。
8は、フロントエンドエンジニアは、Java-IDE（例えば日食）、およびバックエンドの開発環境の多様性を設定する必要が使用する必要がある、あなたは、フロントエンドエンジニアの感情はないと考えられてきました。
痛みのポイントの上の数字に基づいて、我々はプロジェクト全体前方に体重移動、前後端の真のデカップリングを開発する権利でなければなりません！
第五に、開発モデル
古い方法の前にあります。
1、製品の経験/リーダーシップ/顧客が必要です
作るために2、UIデザイン
3、フロントエンドエンジニアは、htmlページを行います
4、バックエンドエンジニアは、HTMLページのJSPページに設定します（フロントとHTML、JSPを設定するために行う必要がありますバックエンドのために他のフロントエンドの強い依存の後端部。HTMLが変更された場合は、より多くの痛み、低効率の開発）
5、統合問題
図6に示すように、フロントエンドリワーク
図7に示すように、バックエンド・リワーク
図8に示すように、一体化された第2
9、成功した統合
10、配達
新しい方法：
1、製品の経験/リーダーシップ/顧客が必要です
作るために2、UIデザイン
図3に示すように、フロントとリアの終了コンベンション＆パラメータデータインターフェース＆
図4は、フロントとリアの並行開発終了（強い依存、ニーズが要求の変更を変更した場合、平行前端と後端を開発することができるのであれば、双方がコードを変更しないインタフェース・パラメータ定数として、高効率の開発）
図5に示すように、統合された前端と後端
6、フロントページを調整
7、成功した統合
8、配達
第六に、リクエストメソッド
古い方法の前にあります。
1、クライアント要求
2、サーブレットサーバまたはコントローラは、要求（ルーティングを制御し、バックエンドページ、バックエンドにおける有意な部分の全体のプロジェクト開発をレンダリングする権利）を受信します
3、サービス、DAOビジネスロジックのコード補完を呼び出します
4、JSPを返します
図5は、JSPいくつかの動的コードを表示します
新しい方法：
1、ブラウザがリクエストを送信します
直接htmlページ（ページをルーティングし、レンダリングフロントエンドの制御、前方の再開発プロジェクト全体に右）に2、
3、htmlページは、サーバインターフェイスを呼び出すための責任がある（のように簡単かつ効率的なJSON形式のデータを、JSONデータ形式を返すとxmlを置き換えるために戻って、その上でAJAXを経由して）データを生成し、
4、ページ上のダイナミクス効果を示すと操作DOMを解析し、HTMLを満たしました。
手順を要約すると新しい方法を要求します。
同時ブラウザ要求の数が多い - > Webサーバのクラスタ（nginxの） - >アプリケーション・サーバ・クラスタ（Tomcatの） - >ファイル/データベース/キャッシュ/メッセージキューサーバークラスタ
あなたはサブモジュールを再生することができますが、また、次のスキーマのアップグレードの準備をするために、小さなクラスターの一つに事業によって分割することができます。
七、前と後の分離のメリット
図1は、前端と後端はnginxのを使用する真のデカップリング、フロントエンドサーバであってもよいです。フロントエンド/ WEBサーバはCSSを入れて、JS、画像などの静的リソースのシリーズ（あなたも、CSS、JS、等アリクラウドOSSなどの特定のファイルサーバに画像や他のリソース、およびCDNアクセラレーションを使用することができます）に、フロントエンドページ参照・ジャンプ・ルーティングを制御する役割を担うサーバが、全体的な応答速度を高速化するために非同期インターフェイス、（データプロバイダを想像するのTomcat）Tomcatを使用して、バックエンド/サーバ・アプリケーションのフロントページのバックエンドを呼び出します。（我々は、そのようなnodejsなどのフロントエンド・エンジニアリング・フレームワークの一部を使用して反応させ、ルータ、Reduxの、WebPACKの、反応しなければなりません）
2は、問題を迅速に見つけることができるバグが、それぞれ他の現象に責任を転嫁しません発見しました。ページのロジック、すべてのフロントエンドエンジニアのための責任があると、その上のブラウザの互換性の問題、スクリプトエラー、ページのスタイルとの誤差をジャンプします。インターフェイスのデータエラーは、データが正常に送信されていない、応答タイムアウトの問題は、すべてのバックエンドエンジニアによって解決しました。お互いを乱すことなく、双方は、家族のそれぞれ他の表と裏が大好きです。
大規模な同時の場合3.な淘宝網などのフロントとリアエンドサーバは、2000 +フロントエンドサーバーのクラスタがどのように多くの十億の毎日+ PVの日々に耐えないためにホームが必要になりながら、私は、水平方向に拡張することができます。（アリの技術サミットに行き、彼らは、自分自身を書くためにWebコンテナにされている耳を傾けた場合でも、彼抗同時HTTP 100,000 2,000同時HTTP 200百万円、彼らはまた、予知ピークに基づいて、無制限の拡大することができ、単一のインスタンス、ひどい、それは家であります...）
4、同時削減バックエンドサーバ/負荷圧力。HTTPはすべてフロントnginxのに転送要求したすべての他のインターフェイスに加えて、リクエストインターフェースTomcatを呼び出し、参照nginxのプロキシTomcatを逆。そして、ページの最初の要求に加えて、ブラウザはローカルキャッシュの多数を呼び出します。
図5は、バックエンドサービスが切れているか、ダウンしても、フロントページは、通常の訪問になりますが、データはそれを磨くません。
アプリ関連のサービスがある場合は、インターフェイスを共有することができますので6は、多分あなたは、限り、いくつかのリファクタリングを介するなど、あなたはまた、効率を向上させる、インタフェースの多くを再利用することができ、マイクロチャネルの光関連のアプリケーションを必要としています。（マルチアプリケーション）
それが非同期でロードされているので7は、より多くの何かが、ページ表示を恐れていないです。
8、nginxのは、サーバー、フロントエンドのアップグレードや、よりシームレスに再起動せずに、ホット・デプロイ・ページをサポートしています。
図9は、コードの可読性と保守性増加（互いに結合前端と後端をコードは、非常に激しい読み取ります）。
10、前端と後端はむしろ依存前の強度よりも、並行して開発することができるので、開発効率を向上させます。
11は、nginxの証明書、HTTPSを使用して、エクストラネットへのアクセス、およびのみ開いているポート80および443に配備、他のすべてのポートが（ポートスキャンからのハッカーを防ぐために）閉じ、イントラネット使用HTTP、パフォーマンスおよびセキュリティが保証されています。
12、遠位端は外に、開発効率を向上させ、コンポーネントコードの再利用の多数の構成要素であります！
八ノート
1、オープンミーティングの要件は、エンジニアはすべてがあなたのフロントエンドエンジニアはフルタイムのテストを行動することはできませんが、フロントとリアの端、およびテストケース（2次元）を書くための良いインターフェースのドキュメント、バックエンドエンジニアを開発する必要性に関与しなければならない、クロムを使用することをお勧めしますJUnitの書き込みを取得するためのテストプラグ郵便配達やSOAPUIかのJMeter、サービス層。PS：フロントエンドのテストユニットはまた、それを再生することができますか？
2は、上記のインタフェースは、それがはっきりインターフェイスメソッドは内部のあなたのcontrolerを呼び出すことで呼び出して、インターフェースでJavaではありません。
図3は、作業負荷を軽減し、パフォーマンスとスケーラビリティを向上させるために、バックエンドのチームがチームのフロントエンドの作業負荷を増加させました。
4は、我々は、ネストされたページ、ページネーション、ページジャンプ制御と同様に対処するために、フロントエンドのフレームワークの番号が必要です。（上記フレームの前端のもの）。
5.プロジェクトが小さい、または単純なネットワークプロジェクトである場合は、任意のフレームワークなしに確保することができますが、あなたのプロジェクトは、ネットワークプロジェクト、ハァッ騒々し外にある場合。
図6は、静的なページを生成するために、このようなテンプレートフレームワークと同様の速度/ FreeMarkerの使用中に人がいる前に、見る人の目には、賢明な知恵を参照してください。
7、この記事の主な目的は、ネットワークのうち外大のJava Webプロジェクトで排除されるJSPを言うことです、JSPは完全に一部の学生の友人のために、JSP /サーブレットのJava Webおよびその他の関連財団以上に、学ぶことができないと言っていませんでしたマスター刑務所は、あなたがspringmvcこのフレームワークを書き込むものに基づいていると思いますか？
8は、該当するチェック権限場合、およびそのページ数には、インターフェースからの関連データも、AJAXを介して取得することができます。
両方のフロントエンド、バックエンドのロジックを作るために行うことができるため9は、私のアドバイスは、フロントエンドを置くことで、その理由は？あなたは、コンピューティングリソースの論理を計算する必要があるため、バックエンドのロジックに配置された場合はコンピューティング・リソースを消費します帯域幅＆メモリ＆CPUを実行するというように、あなたは覚えておく必要があり、サーバ・コンピューティング・リソースが限られているが、それであるあなたは、フロントを置く場合サーバーの負荷が（並行性の高いシナリオ）をドロップするように、クライアントのコンピューティングリソースを使用して。これは、検証、フロントとリアエンドを実行する必要があるデータに似ています！
10、フロント、バックエンド要求タイムアウトとユーザに優しいバックエンドサービスのダウンタイムの場合に対処する機構を有する必要があります。
九、拡張された読み取り
1、実際には、JSのため、CSS、画像、それは普通＆サーバーオペレーティングシステム、PBレベルのファイルに到達した後、ストレージ、または単一である場合は、静的なリソースのこの種は、（このようなOSSアリクラウドファイルサーバー上に置くに似て考えることができますフォルダ内のファイル数の深刻なパフォーマンスの問題があるでしょうioの3-5万人に達する）、その後、OSS（国家子ノードの加速度）のCDNと、あなたが国にいるかどうか、あなたが飛ぶようにページスピードを開くので、その場所、そしてあなたのnginxの負荷をさらに低減されます。
2、あなたは国内の検索エンジンのスパイダーがクロールする一方nginxのは、単に、ブラウザにページの静的リソースを返したため、軽量なマイクロサービスアーキテクチャを再生するためにゲートウェイnodejs使用すること、また、SEOの最適化のメリットをnodejsを支援したい場合静的データは、優れた検索エンジンのサポートを得ることができないアプリケーションを作るページJSを、解決しません。nginxのは、ページをレンダリングするためにアセンブルされませんので、あなたがブラウザに静的なページを置き、その後、ブラウザのレンダリングの負担を増加させ、レンダリング作業を完了する必要があります。ブラウザ開始された要求は、nginxのを通じて配布統一分布をnodejsするURLリクエストでnodejsをレンダリングするページに組み立てられている。API要求は、バックエンドサーバー、完全な応答に直接送信されます。
あなたは、クロスドメインの問題がある場合3.、CORSのspring4は完璧な解決策になることができますが、一般的にnginxのを使用されることはありません、プロキシクロスドメインの問題を逆にあなたのフロントエンドとバックエンドのサービスない限り、2つのサービスドメインに。JSONPの方法も失いました。
4は、（それは分散システムであるため）セキュリティ問題トークンメカニズムのための単一のポイントを行うには、キャッシュを使用して、トークンのメカニズムを使用して、Tomcatのネイティブセッションメカニズムを削除するには注意を払って、マルチターミナルアプリケーションをプレイしたい場合は、JWTで見つけることができます。
5、プロジェクトのフロントエンドは、模擬試験（バックエンドをシミュレートする仮想テストオブジェクトを作成、独立して開発および試験することができる）、バックエンドを追加することができるサービスの可用性と安定性を確保するために、詳細なテストケースを有する必要があります。
X.の概要
前端と後端は、単に別個の開発モデルが、建築パターン（前後端分離アーキテクチャ）ではありません。コードラインとフロントとリアの独立したフロントとリアエンドは、プロジェクトの前後端を区別する必要性から分離された場合にのみことを考えてはいけません。フロントエンドとバックエンドのプロジェクトには、二つのプロジェクトのプロジェクトである2台の異なるサーバー上で、必要性は別の、二つの異なるプロジェクト、二つの異なるコードベース、異なる開発を展開します。
フロントとリアエンドエンジニアは、安らかなAPIを呼び出すために、HTTP、AJAX要求を呼び出すことにより、並行開発を実現することで合意対話型インタフェース、展開終了後の自主開発の必要性、バックエンドへのフロントエンドを必要としています。フロントページには、唯一のスタイルと分析＆ダイナミックなデータをレンダリングに焦点を当て、および特定のバックエンドのビジネスロジックに集中する必要があります。
それは分散システムであるため、図4は、マルチ端末アプリケーションをプレイしたい場合は、（キャッシュを使用して、トークンのメカニズムを使用して、Tomcatのネイティブセッションメカニズムを削除するために注意を払います