Nginxリバースプロキシスキル

クロスドメイン

フロントエンド開発者として避けられない問題はクロスドメインですが、クロスドメインとは何でしょうか?
クロスドメイン: ブラウザーが他の Web サイトからのスクリプトを実行できないという事実を指します。これは、ブラウザの同一オリジンポリシー (ブラウザによって JavaScript に課されるセキュリティ制限) が原因で発生します。ブラウザーの同一オリジンポリシーは、プロトコル、ドメイン名、ポートが同じである必要があり、それらのいずれかが異なるとクロスドメインが発生することを意味します。

では、クロスドメインの問題を解決するにはどうすればよいでしょうか。バックエンドと話し合って、CORS を通じてクロスドメインの問題を解決することもできます。しかし、自分の人生に強いフロントエンドのカブは、それを自分で解決することもできます。

webpack-dev-server リバースプロキシ

webpack-dev-server は、ノードプロキシミドルウェアhttp-proxy-middlewareに基づいて実装されているため、この問題点を解決するのに役立ちます。
構成：

proxy: {
    
    
  '/api': {
    
    
    target: 'https://xxx.com', // 反向代理的目标服务
    changeOrigin: true,  // 开启后会虚拟一个请求头Origin
    cookieDomainRewrite: {
    
    
      '.xxx.com': 'localhost',
    },  // 修改响应头中 cookie 中的域名
  }
}

リバースプロキシとは何ですか

簡単に言うと、A はCにリクエストを送信する必要がありますが、CはAを知りたがりませんが、AはBを知っています。 A はBにリクエストを送信しますが、B は何も返しませんが、 Cにリクエストを返すことはできます。次に、B は再度Cにリクエストを送信し、 C はBのためにリクエストをBに返し、 B はリクエストをAに返します。。。。

特に開発では、フロントエンドはドメイン名https://xxx.comへのインターフェイスを呼び出す必要がありますが、フロントエンド開発環境のスタートアッププロジェクトはhttps://localhost:8080サービスであり、インターフェイスを呼び出します直接ドメインを越えます。

したがって、フロントエンドはプロキシ層である必要があります。https://localhost:8080からhttps://xxx.comドメイン名のインターフェイスへの直接リクエストは、フロントエンドでは認識できない必要があります。

リバースプロキシは実サーバーを隠します。

スイッチング環境のデバッグの問題
が迫っています。新しい要件を開発しているが、この時点でオンラインのバグがある場合、どうすればよいでしょうか?

1. まずブランチを切り替える
2. ターゲットのドメイン名を変更する
3. 再起動する
2番目のステップに到達するたびに、どの環境で再現できるかを尋ねる必要があります。このプロセスは複雑ではありませんが、可能であれば省略します、そうしたいですか、それを考えたほうが幸せです。

プロキシレイヤーを抽出する

可能であれば、フロントエンドはフロントエンドのコンパイルプロセスをサービスプロキシターゲットにバンドルする必要がなくなりました。Nginxでも試してみるのもいいかもしれません。
1. Nginx をインストールする;
2. 固定フロントエンドプロキシ;

proxy: {
    
    
  '/api': {
    
    
    target: '127.0.0.1:8080', // 固定IP
    changeOrigin: true,  // 开启后会虚拟一个请求头Origin
    cookieDomainRewrite: {
    
    
      '.xxx.com': 'localhost',
    },  // 修改响应头中 cookie 中的域名
  }
}

3. Nginxプロキシ

server {
    
    
    listen       8080;   // 这里是我们想要默认访问的端口
    server_name  127.0.0.1;   //  这里是想在浏览器里访问的地址

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
    
    
        proxy_pass http://xxx.com;  //  这里是你在本地启动的时候的链接，例如localhost:4043，换个端口号就行了
       autoindex on;
    }
}

上記の構成により、フロントエンドプロキシレイヤーを Nginx プロキシレイヤーから分離できます。フロントエンドはローカル 127.0.0.1:8080 を介してバックエンドインターフェイスにアクセスし、特定のインターフェイスは開発環境へのプロキシになります。、テスト環境か本番環境かは Nginx によって決まりますが、nginx.conf を変更して再起動するだけです。また、Nginx のホットリスタートは非常に高速で、待ち時間がほぼゼロでコマンドを実行できます。

// windows下是这个命令
nginx.exe -s reload
// linux是这样的
nginx -s reload

固定ポート

港が占有されている場合はどうなりますか?

最も簡単な方法はポートを変更することですが、ポートを変更して Nginx 構成ファイルを変更することはプロキシを変更するよりも複雑であるため、別の方法を見つけるしかありません。IPまたはポートを再度転送する方法はありますか? 答えは、hosts ファイルを変更することです

ユーザーが www.jia.com にアクセスすると、IP アドレス 127.0.0.1 が解決されます。そこで、127.0.0.1 のポート 80 をリッスンするように Nginx 設定を変更します。

server {
    
    
    listen       80;   // 这里是我们想要默认访问的端口
    server_name  127.0.0.1;   //  这里是想在浏览器里访问的地址

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
    
    
        proxy_pass http://xxx.com;  //  这里是你在本地启动的时候的链接，例如localhost:4043，换个端口号就行了
       autoindex on;
    }
}

次に、ローカルプロキシ構成を変更します。

proxy: {
    
    
  '/api': {
    
    
    target: 'www.jia.com', // 固定IP
    changeOrigin: true,  // 开启后会虚拟一个请求头Origin
    cookieDomainRewrite: {
    
    
      '.xxx.com': 'localhost',
    },  // 修改响应头中 cookie 中的域名
  }
}

このようにして、フロントエンドアクセスインターフェイスのドメイン名 https://xxx.com は https://www.jia.com にプロキシされ、https://www.jia.com は次のように 127.0.0.1 に解決されます。ローカルホストにアクセスし、Nginx が 127.0.0.1 のポート 80 をリッスンすると、リクエストは実際のバックエンドサービスに転送されます。