次にプロキシを使う方法.js

執筆Precious Luke ✏️
仲介人は至る所にある.私たちが日常の活動のために使用するもののほとんどは、これらの中間の助けのために維持され、利用可能です.
例えば、私たちが使う商品やサービスの小売業者や卸売業者は、より効率的な方法で私たちが必要とするものを得るのを助けるだけではない.我々は、メーカーを満たすために、または原料がどこから来る知っている必要はありません.
本質的には、これはプロキシがあるものです-それは私たちのためのデジタルミドルマンとして機能します.

What is a proxy?

Importance of proxies

Implementing a proxy in a Next.js app

何がプロキシですか？

プロキシ、またはプロキシサーバーは、あなたが訪問しているデバイスとデバイス間のリレーとして機能します.例えば、もしあなたが本当のアイデンティティを明らかにする必要がないということを考慮するなら、これはセキュリティのために大きな利益を提供することができます.
MIDMemanと同じように、プロキシサーバーはクライアントとサーバー間のクライアント要求を転送することによって中間サーバーとして動作します.プロキシサーバは仮想私設ネットワーク(VPN)のために誤解されるべきではありません、それらの使用が類似しているかもしれない間、それらは同じでありません.
お使いのコンピュータ上のVPNクライアントは、ローカルのISPルーティングを置き換えるVPNサーバーでセキュアなトンネルを確立します.VPN接続を暗号化し、ネットワークトラフィックのすべてを確保する;プロキシサーバのようなブラウザからのhttps呼び出しだけではありません.
インターネットの上の何でも、クライアントまたはもののサーバー側です.ブラウザはクライアントの例ですあなたがFacebookやTwitterに登録すると、フォームフィールド(トラフィック)を記入し、サーバーによって処理されている.
今、あなたがインターネット上で何かをしようとすると、コンピュータ(クライアント)は、サーバーと直接通信します.これはプロキシサーバーが私たちが避けるのを助けることです.

プロキシの重要性

保護

プロキシを使用せずにウェブサイトに行く今日のサイバーセキュリティ環境では安全と考えられていませんそれはあなたが開いて、サーバーにアクセスしている誰にも脆弱なままになります.プロキシを使用してクライアントの情報を維持するのに役立ちます違反から保護されます.

ファイアウォール

大部分の会社または家は、特定のウェブサイトにアクセスするために彼らのネットワークのユーザーを制限するために、ファイアウォールを設置しました.プロキシサーバーは、ブロックされたウェブサイトをバイパスする際に使用できます.組織が彼らの従業員のデータセキュリティのために危険であると思われるブロックされたかブラックリストのウェブサイトを持つことは、一般的です.
そのうえ、多くのウェブサイトは、地理的な制限をします.これらの場合、ウェブサイトへのアクセスが必要な場合、プロキシサーバーはあなたを助けることができます.

匿名性

あなたはゲートウェイを介してトラフィックを送信しているので、これは匿名の特定のレベルを作成します.
これは、クライアントサーバーの式からあなたの身元を削除し、これはサーバーが受信した唯一の情報ですmidlemanに特定のデータを渡すことによってこれを実現します.ユーザーは、プロキシを使用して、この方法で匿名の個人情報やブラウジング習慣を保つことができます.

次のプロキシの実装。jsアプリ

次.JSは、ノードの上に構築されたオープンソース開発フレームワークです.JSは、サーバー側のレンダリングや静的なWebサイトの生成などの反応ベースのWebアプリケーション機能を有効にします.
今、我々は簡単に次のプロキシサーバーについて話しているすべての実験をしようとしている.JSアプリケーション.次.JSでもこの方法を行うにはRewrites 配列.
少なくともノードを確認してください.あなたのマシンにインストールされているJSのバージョン12.ノードを持つ.あなたのマシン上のJSはNPM(Node Package Manager)とともに来ます.そして、それはNPX(Node Package Execute)とともに来ます.そして、それは次にインストールするのに用いられます.js
一部の開発者は、糸を好む、NPMの代わりに別のオプション-先に行くとそれをインストールする場合は、使用するものです.

インストール.js

マシンに次のコマンドを入力します.

npx create-next-app@latest
#OR
yarn create next-app

インストールしたパッケージマネージャに関係なく、次のようにします.

その後、プロジェクトのフォルダーの名前を入力するプロンプトが表示されます.あなたは再び入力を押すと、プロジェクトの名前は“マイアプリ”になります.
インストールが完了したら、プロジェクトディレクトリに移動します.これはあなたの次のです.JSの新しいインストールは次のようになります.

起動するには、次のコマンドを実行します.

npm run dev
#OR
yarn dev

で始まるhttp://localhost:3000 .

あなたはこのイメージのような何かを得るでしょう😏).
この点で、私はあなたに次の程度の親しみがあると仮定します.ので、私はちょうどポイントにまっすぐになります.我々は、このアプリを使用するつもりです(それはデフォルトでポート3000で実行されていることに注意してください、あなたはいつもこれを再構成することができます)、それは別のポートにあるバックエンドサーバーに接続している.
私は猫ページを作成するつもりです、そこで、私は猫からのランダムな事実を得ていますhttps://meowfacts.herokuapp.com (これは猫についてのランダムな事実を表示する単純なAPIです).
次.JSはこれを行う簡単な方法を提供します.インnext.config.js , 内部でこのコードを置き換えます.

//js
module.exports = () => {
  const rewrites = () => {
    return [
      {
        source: "/cats",
        destination: "https://meowfacts.herokuapp.com",
      },
    ];
  };
  return {
    rewrites,
  };
};

Rewrites 別の目的地パスに着信リクエストパスをマップすることを許可します.
再書き込みはURLプロキシとして作用して、目的地経路をマスクします.対照的にredirects 新しいページに再配布され、URLの変更が表示されます.
上記のコードで行ったことは、単に次の設定です.そのように我々が行くとき/cats , それはそれを明らかにせずに目的地からデータを取得します.
私は先に行き、そのデータを取得する別のルートを追加しますhttps://random-d.uk/api/random . このように別のオブジェクトを追加する必要があります.

  {
        source: "/ducks",
        destination: "https://random-d.uk/api/random",
      },

さて、次のようになります.

module.exports = () => {
  const rewrites = () => {
    return [
      {
        source: "/cats",
        destination: "https://meowfacts.herokuapp.com",
      },
      {
        source: "/ducks",
        destination: "https://random-d.uk/api/random",
      },
    ];
  };
  return {
    rewrites,
  };
};

これで、我々は行く/ducks あなたの次に.JSアプリケーション、データを取得https://random-d.uk/api/random これまでのURLを明らかにすることなく.例として次の画像を見てください.

結論

おめでとう!このチュートリアルの最後に到達しました.プロキシが何であるか、プロキシの効用を見てみました.それは、それがもたらす匿名性に提供されます.
次にプロキシを実装しました.これを行うには、ボックスの方法を提供します.書き換えを行うと、着信先のパスを別の行先パスにマッピングし、外部のAPIでテストを行い、ローカルマシン上のフィードを修正することができます.

ログオン：次の生産への完全な可視性。JSアプリ

次のアプリケーションのデバッグは、特にユーザーが再現するのが難しい問題を経験することが困難になることができます.あなたがRedux状態をモニターして、追跡することに興味があるならば、自動的にJavaScript誤りを表面化して、遅いネットワーク要求と部品負荷時間を追跡してくださいLogRocket .

LogRocket ウェブやモバイルアプリケーションのDVRのように、あなたの次のアプリで起こる文字通りのすべてを記録します.問題が発生した理由を推測する代わりに、問題が発生したときにアプリケーションがどのような状態になったかを集計およびレポートできます.また、クライアントのCPU負荷、クライアントのメモリ使用量などのメトリクスを報告し、あなたのアプリケーションのパフォーマンスを監視します.
LogRoot Reduxのミドルウェアのパッケージは、ユーザーセッションに可視性の余分な層を追加します.LogLogelはあなたのredux店からすべてのアクションと状態を記録します.
あなたの次のデバッグ方法を近代化します.jsアプリstart monitoring for free .