フロントエンドとバックエンドを分離した nginx 構成を展開するための完全な手順

フロントエンドとバックエンドを分離した nginx 構成を展開するための完全な手順

序文

決まり文句です。ここでは、フロントエンドとバックエンドの分離についての私の理解についてお話しします。単純な分離は、元の MVC ビュー レイヤーを削除して、独立したサーブレット サービスにするだけです。サーブレットは http で接続されます。ここでのビュー サーブレット コンテナーは、Tomcat、Apache、Nginx、IIS などの任意のサーバー側サービスにすることができます。ここでは、よく使われる Nginx を例に簡単に説明します。

需要分析

需要分析から始めましょう。

  • 単一プロジェクト
    • 単一プロジェクトとは、フロントエンド サービスがサーバー上に展開され、www.xxx.com => index.html が単一のポイントになることを意味します。
  • 複数のプロジェクト
    • マルチプロジェクトとは、1 つのサーバーが複数のフロントエンド サービスと共にデプロイされ、www.xxx.com/a => a.html、www.xxx.com/b => b.html などが複数のサイトを指すことができることを意味します。
  • エージェントをリクエストします。
  • Cookie ドメインの書き換え。
  • Cookie パスのオーバーライド。

ヒント: 設定を個別に処理できるように、ここに 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 をご愛顧いただき、誠にありがとうございます。

以下もご興味があるかもしれません:
  • サーバー上で Nginx を使用して Springboot プロジェクトをデプロイする方法の詳細なチュートリアル (jar パッケージ)
  • Nginx サーバーのセットアップと基本構成の詳細な説明
  • Nginx ロケーション設定のチュートリアル (ゼロから)
  • nginx 構成サービスを開始する方法の詳細なチュートリアル
  • 初心者でも基礎知識なしでNginxサービスの導入を完了できます

<<:  JS と Nodejs におけるイベント駆動型開発についての簡単な説明

>>:  一般的な MySQL ストレージ エンジンとパラメータ設定およびチューニングの紹介

推薦する

Vue のスロットの使用法と適用シナリオの詳細な分析

スロットとは何ですか? Vue では、子コンポーネント タグの中央に何もラップできないことはわかって...

Webデザイン: タイトルが完全に表示できない場合

<br />今日、新しくなった ChinaUI.com の Web サイトを見たのですが...

ネイティブ Js で実装されたシンプルなシームレス スクロール カルーセルのサンプル コード

シンプルなシームレススクロールカルーセルには多くの抜け穴があり、後から画像を追加するのは非常に不便で...

MySQL 同期遅延が発生したときに Seconds_Behind_Master が 0 のままになる理由

目次問題の説明原理分析問題分析拡大する総括する問題の説明ユーザーはプライマリ データベースに対して変...

Alibaba Cloud ドメイン名と IP バインディングの手順と方法

1 Alibaba Cloud コンソールに入り、ドメイン名コンソールを見つけて、バインドするドメイ...

最小限の展開で CentOS8 に OpenStack Ussuri をインストールする方法の詳細なチュートリアル

CentOS8 に最小限のデプロイメントで OpenStack Ussuri をインストールするため...

Axiosは繰り返しのリクエストをキャンセル

目次序文1. リクエストをキャンセルする方法2. 重複リクエストの判定方法3. 繰り返しリクエストを...

ReactでCSSをエレガントに書く方法

目次1. インラインスタイル2. インポート方法を使用する3.cssモジュールのエクスポート4. ス...

Vue2/vue3 ルーティング権限管理方法の例

1. Vueルーティングの権限制御には一般的に2つの方法がありますa. ルーティングメタ情報(メタ)...

初心者向け入門チュートリアル④:サブディレクトリのバインド方法

これが何を意味するのかを理解するには、まずサブディレクトリとは何かを知る必要があります。では、サブデ...

LinuxシステムにTomcatをインストールし、サービスの起動とシャットダウンを構成する

Linuxシステムでサービスの起動とシャットダウンを構成する1. コマンドcd /etc/init....

uniapp パッケージ化されたアプレット レーダー チャート コンポーネントの完全なコード

効果画像:実装コードは以下のとおりですビュー <canvas id="radar-c...

nginx を使用して http を https に変換するサンプルコード

最近、小さなプログラムを書いています。その小さなプログラムの公式ウェブサイトはhttpsを使用する必...

Navicat 経由で MySQL にリモート接続する方法

Navicat を使用して IP 経由で直接接続すると、次のようなさまざまなエラーが報告されます: ...