序文Nginx は、イベント駆動型の非同期非ブロッキング処理フレームワークを使用する軽量 HTTP サーバーであり、優れた IO パフォーマンスを実現します。私たちは日常の開発において、次のようなシナリオで Nginx を使用しています。
フロントエンドとして、私たちは主に最初の2つのシナリオに焦点を当てています 1.ダウンロードしてインストールするここをクリックしてダウンロードし、ダウンロード後に解凍すると、解凍されたファイルは次のようになります。 解凍します (nginx.exe をダブルクリックします。ダブルクリックすると黒いポップアップ ウィンドウが点滅します) nginx が解凍されているディレクトリを見つけて右クリックし、git bash を見つけて開き、コマンド start ./nginx.exe を入力して Enter キーを押して nginx サービスを開始します。 **起動が成功したかどうかを確認します: **ブラウザのアドレスバーにURL http://localhostを直接入力し、Enterキーを押すと、起動が成功したことを示す次のページが表示されます。 2. nginxの設定nginx の下にある conf/nginx.conf ファイルを見つけて、server{} の内容に焦点を当ててプロキシ関連の情報を設定します。 #ユーザーnobody; ワーカープロセス 1; #error_log ログ/error.log; #error_log ログ/error.log 通知; #error_log ログ/error.log 情報; #pid ログ/nginx.pid; イベント { ワーカー接続 1024; } http { mime.types を含めます。 デフォルトタイプ アプリケーション/オクテットストリーム; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log ログ/access.log メイン; ファイル送信オン; #tcp_nopush オン; #キープアライブタイムアウト 0; キープアライブタイムアウト65; #gzip オン; サーバー名ハッシュバケットサイズ 128; サーバー{ 聞く 80; server_name ローカルホスト; 位置 / { ルートhtml; インデックス index.html index.htm; } エラーページ 500 502 503 504 /50x.html; 場所 = /50x.html { ルートhtml; } } サーバー{ 聞く 80; サーバー名 test-local.juejin.com; # プロキシするテスト環境のドメイン名と -local を指定します # たとえば、プロジェクトのテスト環境が a.test.com の場合、a-local.test.com に設定できます。もちろん、場所は好きなように設定できます /{ add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'アクセス制御許可メソッド' 'GET、POST、OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT、web-token、app-token、Authorization、Accept、Origin、Keep-Alive、User-Agent、X-Mx-ReqToken、X-Data-Type、X-Auth-Token、X-Requested-With、If-Modified-Since、Cache-Control、Content-Type、Range'; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'; # ここで 8091 はローカルで実行中のプロジェクトのポート番号です。ローカル サービスのポート番号と同じに設定します。 proxy_pass http://127.0.0.1:8091/; } } } 3. ローカルDNS設定**ローカルホストファイルの構成を変更します。**ディレクトリC:\Windows\System32\drivers\etcを探し、hostsファイルを開いてファイルを変更し、127.0.0.1 a-local.test.comを追加します。 4. 操作まず、./nginx.exe -t と入力して、nginx の設定が正しいかどうかを確認します。正しい設定は次のとおりです。 引き続き nginx -s reload と入力して再起動します (nginx 設定ファイルの変更後、有効にするには nginx を再起動する必要があります) DNSを更新: ipconfig /flushdns ブラウザに http://a-local.test.com と入力すると、ローカルで実行しているコード インターフェイスが表示されます。 5. よく使われるnginxコマンド
6. クロスドメインリクエストフロントエンドとバックエンドが分離されたプロジェクトでは、フロントエンド プロジェクトとバックエンド プロジェクトがそれぞれ異なるサーバーにデプロイされるため、最初に遭遇する問題はクロスドメインです。このシナリオでは、nginx を使用すると、この問題をうまく解決できます。 #クロスドメインリクエストサーバー サーバ{ 9000を聴く; server_name 127.0.0.1; # またはローカルIPに設定 ルート /app/crossDomain/; インデックス index.html; location /douban/ { #アクセスディレクトリのプロキシ設定を追加 /api rewrite ^/api/(.*)$ /$1 break; proxy_pass http://a.test.com; } } 要約するnginx を介してローカルでリバース プロキシを構成する方法に関するこの記事はこれで終わりです。nginx を介してローカルでリバース プロキシを構成する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: XHTML CSS ページをプリンタ ページに変換する
>>: 純粋な CSS を使用して脈動するローダー効果のソースコードを作成する
今日、突然、自分のウェブページで Google や Baidu のような強力な検索エンジンを呼び出す...
序文この記事はかなり詳細で、少し面倒です。他のチュートリアル ドキュメントでは多くの手順が省略されて...
セットアップは、結合された API を記述するために使用されます。テンプレートが使用できるようにする...
目次1. 動的型付けとは何ですか? 2. データ型2.1 プリミティブ型 (6 つのプリミティブ型、...
MySQLトリガーの簡単な例文法CREATE TRIGGER <トリガー名> -- トリ...
序文場合によっては、データベースのイントラネット アドレスしか知らず、イントラネット経由で接続できな...
導入この記事は、 React + antdをベースにして、完全な全屏demoを紹介します。その理由は...
数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...
目次クラスコンポーネントのプロパティ比較浅い同等の浅い比較機能コンポーネントの簡単な比較先週面接に行...
目次1. インデックスの役割2. インデックスの作成と削除(1)ALTER TABLE文を使用して、...
表示する svg 画像を追加すると、React はファイルが見つからないというメッセージを表示します...
序文プロジェクト内のパズルゲーム(デジタル華容路とも呼ばれる)を再構築するのに 2 日かかりました。...
目次1. はじめに2. 本文2.1 モジュールとは何ですか? 2.2 解決2.3、require.r...
目次Viteを使用してvue + tsプロジェクトを作成するVue 3の3つの構文オプションAPIコ...
複数の注文を含むリストが必要です。各注文は一意にすることも、複数の注文を結合することもできます。各注...