序文 決まり文句です。ここでは、フロントエンドとバックエンドの分離についての私の理解についてお話しします。単純な分離は、元の 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 ストレージ エンジンとパラメータ設定およびチューニングの紹介
スロットとは何ですか? Vue では、子コンポーネント タグの中央に何もラップできないことはわかって...
<br />今日、新しくなった ChinaUI.com の Web サイトを見たのですが...
シンプルなシームレススクロールカルーセルには多くの抜け穴があり、後から画像を追加するのは非常に不便で...
目次問題の説明原理分析問題分析拡大する総括する問題の説明ユーザーはプライマリ データベースに対して変...
1 Alibaba Cloud コンソールに入り、ドメイン名コンソールを見つけて、バインドするドメイ...
CentOS8 に最小限のデプロイメントで OpenStack Ussuri をインストールするため...
目次序文1. リクエストをキャンセルする方法2. 重複リクエストの判定方法3. 繰り返しリクエストを...
目次1. インラインスタイル2. インポート方法を使用する3.cssモジュールのエクスポート4. ス...
1. Vueルーティングの権限制御には一般的に2つの方法がありますa. ルーティングメタ情報(メタ)...
これが何を意味するのかを理解するには、まずサブディレクトリとは何かを知る必要があります。では、サブデ...
Linuxシステムでサービスの起動とシャットダウンを構成する1. コマンドcd /etc/init....
効果画像:実装コードは以下のとおりですビュー <canvas id="radar-c...
最近、小さなプログラムを書いています。その小さなプログラムの公式ウェブサイトはhttpsを使用する必...
元の住所: http://www.webdesignfromscratch.com/web-2.0-...
Navicat を使用して IP 経由で直接接続すると、次のようなさまざまなエラーが報告されます: ...