Nginx プロキシ転送構成を通じてクロスドメイン API プロキシ転送を実装する方法

Nginx プロキシ転送構成を通じてクロスドメイン API プロキシ転送を実装する方法

序文

WEB 開発では、クロスドメイン リクエストが頻繁に発生します。クロスドメインの問題を解決する方法は、window.name、iframe、JSONP、CORS など多数ありますが、ここでは詳しく説明しません。異なるプロトコルとポートが関係するクロスドメイン リクエスト方法は、プロキシを使用することです。ここでは、Nginx プロキシ メソッドに焦点を当てます。

シナリオ
フロントエンドとバックエンドが分離された Web アプリケーションが、ポート 3000 を使用してローカルで起動されます。フロントエンド ページには、http://127.0.0.1:3000 からアクセスできます。ページ内の一部の Ajax リクエストのアドレスは、http://127.0.0.1:3000/api/getList です。通常、次の図に示すように、404 でなければリクエストは失敗します。

このバックエンド サービスのインターフェイスは他のサーバーに保存されます。たとえば、会社のイントラネットでは、http://172.30.1.123:8081/api/getList を通じてテスト環境のサービス インターフェイスにアクセスできます。

この場合のリクエストには、異なるポートを使用したクロスドメイン リクエストが含まれるため、Nginx を使用してリクエストをプロキシできます。

Nginx プロキシ設定リファレンス

まず、Nginx 設定ファイルを見つけます。

  • Windows のパスは、Nginx をインストールしたディレクトリです。たとえば、私の場合はドライブ C のルート ディレクトリ、つまり c:\nginx\conf\nginx.conf にあります。
  • Mac システム構成ファイルのパスは、/usr/local/etc/nginx/nginx.conf です。Finder で、Shift + Command + G を押して /usr/local/etc/nginx/ と入力し、ディレクトリに入ります。

Nginx 構成ファイルに次の構成を追加します。

サーバー{
 聞く 80;
 サーバー名 127.0.0.1;

 位置 / {
 プロキシパス http://127.0.0.1:3000;
 }

 場所 ~ /api/ {
 プロキシパス http://172.30.1.123:8081;
 }
}

上記の構成は次のように理解できます。

ポート 80 をリッスンし (Nginx はデフォルトでポート 80 から開始します)、http://127.0.0.1 のすべてのリクエスト サービスを 127.0.0.1 ポート 3000 に転送します。
http://127.0.0.1/api/ または http://127.0.0.1/api/getList リクエストを http://172.30.1.123:8081 に転送します。

仕上げる

上記の設定後、http://127.0.0.1 (IP アクセスを使用する場合) を介して WEB アプリケーションに直接アクセスでき、関連する API リクエストも Nginx 設定に従って行われます。ブラウザに表示される /api/getList リクエストは 127.0.0.1 ポート 80 ですが、実際にはこのリクエストは Nginx によって http://172.30.1.123:8081/api/getList に転送されています。

最適化:

基本的なプロキシ機能は上記の設定と同じくらいシンプルです。

ただし、実際の IP サービスを取得する必要がある場合は、次のように実際の IP に関する構成も追加する必要があります。

サーバー{
 聞く 80;
 サーバー名 127.0.0.1;

 位置 / {
 プロキシパス http://127.0.0.1:3000;
 proxy_set_header ホスト $host:80;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 }

 場所 ~ /api/ {
 プロキシパス http://172.30.1.123:8081;
 proxy_set_header ホスト $host:80;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 }
}

proxy_set_header 構成は、HTTP 要求ヘッダーを変更します。ここで、Host は要求されたホスト名、X-Real-IP は要求の実際の IP、X-Forwarded-For は要求を開始したユーザーを示します。

ここでは Nginx がプロキシ サーバーであるため、proxy_set_header を通じてこの情報を構成する目的は、サーバーが実際のリクエスト ヘッダーを取得できるようにすることです。

フレンドリーなヒント:

Nginx の各構成ステートメントの後にポイントを追加する必要があります。そうしないと、構成エラーが報告され、混乱することになります。

拡大する

ホストをバインド

サーバーにアクセスするために IP アドレスを入力するのが面倒な場合は、ホストを自分で変更することもできます。ホスト変更ツール SwitchHosts をお勧めします。

ホスト変更リファレンス:

127.0.0.1 www.domain.com #必要なドメイン名に変更します

ホストがバインドされている場合は、Nginx 構成で指定したドメイン名を直接構成することもできます。次に例を示します。

サーバー{
 聞く 80;
 server_name www.domain.com; #ここで IP をドメイン名に変更します#...
}

ホストを変更した後は、http://www.domain.com などのドメイン名から直接アクセスできます。

場所について

上記の構成では、ローカライズ後の構成について混乱するかもしれません。ローカライズ後の一般的な要件は次のとおりです。

地域 / {
 # すべてのリクエストは次のルールに一致します # すべてのアドレスが / で始まるため、このルールはすべてのリクエストに一致します # xxx 設定はここに記述されます}

場所 = / {
 # 完全一致 /、任意の文字列が続くアドレスは一致しません}

ローケーション /api {
 # /api で始まるすべての URL に一致します。/api/getList など、/api の後の URL も含まれます。
 # 一致したら、検索を続けます。# これは、次の正規表現と一致しない場合にのみ使用されます。}

ローケーション ~ /api/abc {
 # /api/abc で始まるすべての URL に一致します。/api/abc/getList など、/api/abc の後の URL も含まれます。
 # 一致したら、検索を続けます。# これは、次の正規表現と一致しない場合にのみ使用されます。}
/ はユニバーサル マッチングに使用されます。他に一致するものがない場合、すべてのリクエストが一致します。先頭の = は完全一致を示します。たとえば、A では、ルート ディレクトリで終わるリクエストのみが一致し、その後に文字列を続けることはできません。
先頭の ^~ は、URI が正規一致ではなく通常の文字列で始まることを示します。先頭の ~ は、大文字と小文字を区別する正規一致を示します。
~*は大文字と小文字を区別しない正規の一致を示します

より詳細なロケーショニング正規マッチングルールについては、nginx 設定の場所の概要と書き換えルールの記述を参照してください。

追記

筆者もNginx初心者ユーザーです。この知識をわかりやすく記録し、困っている人と共有して一緒に勉強できればと思っています。抜けがあれば指摘してください。よろしくお願いします!

要約する

以上がこの記事の全内容です。この記事の内容が皆様の勉強や仕事に何らかの参考学習価値をもたらすことを願います。123WORDPRESS.COM をご愛顧いただき、誠にありがとうございます。

以下もご興味があるかもしれません:
  • nginxリバースプロキシを介したデバッグコードの実装
  • Docker で複数のアプリケーション サイトをプロキシするために Nginx を使用する方法
  • Nginx フォワード プロキシとリバース プロキシ、および負荷分散機能の構成コード例
  • Goを使用してNginxプロキシを追加する方法の詳細な説明
  • 内部 IP アクセスのみを許可する Nginx プロキシ設定を追加する方法
  • Nginx プロキシ パス設定からプレフィックスを削除する実装
  • オペレーターが知っておくべき 18 個の Nginx プロキシ キャッシュ構成のヒント (どれを知っていますか?)
  • Nginx フォワードプロキシとリバースプロキシの違いと原理分析

<<:  JavaScript における call、apply、bind の実装原則の詳細な説明

>>:  MySQL の低速クエリの最適化: 理論と実践からの制限の利点

推薦する

IE6/7 で絶対配置された要素が不可解に消えたりブロックされたりする問題を解決する方法

1. 絶対配置レイヤーの隣接フローティング レイヤーの幅が親レイヤーの幅と等しくなく、フロートがクリ...

ノードにおけるhttpモジュールの使用と実行プロセス

ノードにおけるhttpの役割は何ですか? httpモジュールの役割は、サーバーの作成と記述を支援する...

画像ソーシャルネットワーキングサイトのUIアプリケーションの比較分析(図)

私たちの生活、仕事、勉強において、ソーシャル ネットワークは徐々に将来のインターネット発展のトレンド...

Dockerを使用してPythonランタイム環境の基本イメージを作成する方法

1. 準備1.1 Pythonインストールパッケージをダウンロードします(注:Pythonバージョン...

MySQL ステートメントの配置と概要の紹介

SQL (Structured Query Language) ステートメント、つまり構造化クエリ言...

MySQL マルチテーブルクエリの詳細な説明

よく食べて十分に休息を取るというのは簡単なことのように思えますが、実際に実行するのはそれほど簡単では...

Docker で MySQL マスターとスレーブをデプロイする方法

画像をダウンロードMySQLイメージの選択 docker 検索 mysql MySQL 5.7 イメ...

Centos6.6 で php7 + nginx 環境をインストールする方法

この記事では、centos6.6 で php7 + nginx 環境をインストールする方法について説...

システム CD をマウントして yum ウェアハウスを構築する VMware 15.5 バージョンのグラフィック チュートリアル

1. CentOS 7 仮想マシンを開きます。 2. 仮想マシンにログインし、リストにないユーザー名...

MySQL実行計画の詳細な説明

EXPLAIN ステートメントは、MySQL がステートメントを実行する方法に関する情報を提供します...

入力のsize属性とmaxlength属性の違い

最近、プロジェクトで input size 属性と maxlength 属性を使用しました。以前は、...

XHTML Web ページ チュートリアル

この記事は主に、初心者に XHTML の基本的な知識と、XHTML と HTML の違いを理解しても...

プロジェクトを素早く構築するためのvite+vue3.0+ts+element-plusの実装

目次バイト機能使用環境プロジェクトを構築する構成vite.config.ts tsconfig.js...

Javascriptでシングルトンパターンを実装する方法

目次概要コードの実装シングルトンパターンの簡易版改良版プロキシバージョンシングルトンモード遅延シング...

docker-compose を使用して mongodb と mysql を構築する詳細なプロセス

docker-compose で mongodb と mysql を構築する詳細な方法を見てみましょ...