序文 決まり文句です。ここでは、フロントエンドとバックエンドの分離についての私の理解についてお話しします。単純な分離は、元の MVC ビュー レイヤーを削除して、独立したサーブレット サービスにするだけです。サーブレットは http で接続されます。ここでのビュー サーブレット コンテナーは、Tomcat、Apache、Nginx、IIS などの任意のサーバー側サービスにすることができます。ここでは、よく使われる Nginx を例に簡単に説明します。 需要分析 需要分析から始めましょう。
ヒント: 設定を個別に処理できるように、ここに conf.d/*.conf を記述することをお勧めします。 パブリック構成 サーバ{ listen 80; # ポートの設定 server_name _; # ドメイン名の設定 charset utf-8; # エンコーディング access_log /xxx/log/nginx_access.log main; # 成功ログ error_log /xxx/log/nginx_error.log error; # エラーログ index index.html; # ファイルの検索順序 set $root /xxx/nginx/; # 変数設定、パブリックパスの設定 # その他の場所 } /xxx/log/nginx_access.log および /xxx/log/nginx_error.log の下に対応するファイルを手動で作成してください。 nginx reload を初めて実行するときにエラーが発生する場合があります。 set の $root パスは絶対パスであり、access_log と error_log も絶対パスです。 単一プロジェクト構成 ディレクトリ構造 nginx |----- インデックス.html |----- ユーザー.html 場所の設定 位置 / { ルート $root; } 最も単純なルート パス ベースの構成は次のようになります。ここでは、場所を経由するパスを構成し、$root フォルダー内の index.html ファイルを指定するだけです。 マルチプロジェクト構成 ディレクトリ構造 nginx |----- ア |----- インデックス.html |----- バ |----- インデックス.html 複数の場所の構成 場所 ^~ /a { エイリアス $root/a; } 場所 ^~ /b { エイリアス $root/b; } 位置 / { ルート $root; } コピーキャット プロジェクト間の唯一の違いは、ルートとエイリアスの違いです。ルートはファイルの絶対一致パスを参照しますが、エイリアスは相対一致を参照します。 root は http、server、location で設定できますが、alias は location でのみ設定できます。正規表現 ^~ も追加しました。/a または /b に一致する場合、場所のパスが何であっても、リソースの実際のパスは alias で指定されたパスである必要があります。この方法では、/a と /b のパスを一致させて、固定パスにジャンプすることができます。これは、SPA スタイルのフロントエンド プロジェクトでは非常に便利です。なぜなら、コア ファイルとして実際に存在するのは index.html ファイルが 1 つだけだからです (リソース ファイルは別の問題です)。この方法では、常に index.html にジャンプして、ブラウザを手動で更新したときに、ルート パスに基づいてサーバーの他のパスにあるリソースが検索されないようにすることができます。次に、spa のルート パスを設定し、/b が一致する必要があります。 なぜそのような需要があるのでしょうか?フロントエンドは軽量であり、このメカニズムを使用してサーバーを節約し、同じ種類のビジネスを集約します。 admin.xxxx.com/a => 運用管理デスク、admin.xxxx.com/b => ERP 管理デスクのように。管理ドメイン名の下のサブパスを切り取るだけです。シンプルで軽量。 リクエスト転送 場所 ^~ /api { proxy_pass http://api.xxx.com/; } これは非常に簡単です。/api リクエストを正規表現と照合し、proxy_pass 属性を通じてリクエストを http://api.xxx.com に送信します。あなたはできる クッキードメインを変更する セキュリティ上の理由から、特定の Cookie ドメイン属性を設定することがありますが、これは nginx 転送にはあまり適していません。もちろん解決策はあり、それは非常に簡単です。 位置 { proxy_cookie_domain <このドメインのドメイン> <変更するドメイン>; } クッキーパスを変更する API インターフェースに転送し直すと、API ドメイン名が Cookie を取得できない場合があります。ドメインに加えて、Cookie パスの可能性もあります。もちろん解決策は簡単です 位置 { proxy_cookie_path <このドメインのパス> <変更するパス>; } その後の最適化 これは、nginx の設定の最も簡単な例にすぎません。gzip の有効化、キャッシュ設定、リソース リクエストをマージするためのプラグイン、50 倍、40 倍のページの設定、モバイルと PC のジャンプの判断などの設定もあります。nginx は、やはり非常に強力です。 要約する 以上がこの記事の全内容です。この記事の内容が皆様の勉強や仕事に何らかの参考学習価値をもたらすことを願います。123WORDPRESS.COM をご愛顧いただき、誠にありがとうございます。 以下もご興味があるかもしれません:
|
<<: JS と Nodejs におけるイベント駆動型開発についての簡単な説明
>>: 一般的な MySQL ストレージ エンジンとパラメータ設定およびチューニングの紹介
(1)はじめに: clipboard.js は、テキストをクリップボードにコピーする機能を実装する軽...
目次1. プラグイン2. 幕間3. 実装4. 検証機能1. プラグインまず、私たちが選んだプラグイン...
mysqlインストーラコミュニティ8.0.16.0インストールグラフィックチュートリアル、参考までに...
MySQL でテーブルを削除するのは非常に簡単ですが、削除コマンドを実行するとすべてのデータが消えて...
前の単語line-height、font-size、vertical-align は、インライン要素...
新しいLinuxサーバーを入手する場合、通常は次の5つの構成を実行する必要があります。 HOSTAN...
このセクションでは、Web ページ内のテキストをスクロールしたり、スクロール プロパティを制御できる...
この記事では、参考までに、Navicatを使用してCSVファイルをMySQLにインポートするための具...
<br />Web ページをデザインするときには、いつも不快なことに遭遇します。最も一般...
nginx をインストールApple Mac ではインストールに brew を使用します。brew ...
目次1. 関数とメソッドの違い2. 良い関数の書き方2.1 正確な命名2.1.1 関数の命名2.1....
node を D ドライブにインストールしましたが、C ドライブのスペースを占有したくなかったため、...
フロントエンドとバックエンドを分離した開発では、フロントエンドがバックエンドの API を呼び出して...
Docker はポートを IPv6 にのみマッピングし、IPv4 にはマッピングしません。 dock...
html、address、blockquote、body、dd、div、dl、dt、fieldset...