nginx プロキシを使用して静的リソース アクセスを実現する方法

1. 目標:

nginx を通じて静的リソース (CSS、画像など) をリクエストするために、nginx プロキシを通じてページ プレビューが実行されます。

2. 実装効果:

ブラウザで nginx プロキシ アドレスを入力し、ページを開いてローカル HTML ファイルにアクセスするか、プロキシ ルーティングにアクセスしてページ プレビュー機能を実現することもできます。インターフェイスにアクセスします。
注 : ここで説明するのは、ローカルの Windows 開発環境での構成です。

3. 特定の構成

1. nginx はローカルの静的エンジニアリング エージェントを構成します

nginx 構成ファイル nginx.conf を見つけて、nginx プロキシを構成します

server{
listen       80;

#前端门户工程
location / {
    alias   D:/workspace/sc-multipl-static-web-project/;
    index  index.html;
}

手順:
D:/workspace/sc-multipl-static-web-project/ はフロントエンド プロジェクト ファイルのパスです

設定ファイルを保存して nginx を再起動し、ブラウザに localhost:80 と入力して確認します

2. Win10 はドメイン名アクセスを実現するためにローカル ドメイン名を設定します

実際のドメイン名アクセス対応する IP アドレスを介してサービスにアクセスし、その後、その IP を介してサービスにアクセスします。インターネット ドメイン名をアクティブ化していない場合は、ローカル ドメイン名マッピングを構成することでドメイン名アクセスをシミュレートできます (このマシンでのみ有効)
Open C:\Windows\System32\drivers\etc、hosts ファイルを見つけます。ない場合は、管理者として自分で追加します。ID としてエディターを開き、

127.0.0.1 www.chen123.com# と入力します。

## そして、nginx 設定ファイルを開きます

server{
    listen       80;
    server_name  www.chen123.com;
    ssi on;
    ssi_silent_errors on;
    #前端门户工程
    location / {
        alias   D:/workspace/sc-multipl-static-web-project/;
        index  index.html;
    }
    
   }

設定ファイルを保存して nginx を再起動し、ブラウザに「localhost:chen123」と入力します。 検証

3.nginx でページ プレビュー ルーティングを設定します

まず、ページ プレビュー インターフェイスを実装する必要があります。戻り形式は String 型で、コンテンツは実際には HTML のテキスト コンテンツです。

nginx 設定ファイルを再度開きます

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    #cms页面预览路由
    upstream cms_server_pool {
        server 127.0.0.1:31001 weight=10;
    }

    server{
    listen       80;
    server_name  www.xuecheng.com;
    ssi on;
    ssi_silent_errors on;
    #前端门户工程
    location / {
        alias   D:/workspace/sc-multipl-static-web-project/;
        index  index.html;
    }
    #页面预览
    location /cms/preview/ {
        proxy_pass http://cms_server_pool/cms/preview/;
    }
    
   }
}

http: //cms_server_pool/cms/preview/ は実装するページ プレビュー インターフェイスであり、ルーティングを設定することで実際のアドレスにジャンプします。

    upstream cms_server_pool {
        server 127.0.0.1:31001 weight=10;
        #如果有多个服务器,可以写在下面,例如
        #server 127.0.0.1:31002 weight=10;
    }

設定ファイルを保存して nginx を再起動し、「http://cms_server_pool/」と入力します。ブラウザで cms/preview を確認してください。

私のローカル nginx 構成は次のとおりです。

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    #gzip  on;
    #cms页面预览路由
    upstream cms_server_pool {
        server 127.0.0.1:31001 weight=10;
    }

    server{
    listen       80;
    server_name  www.xuecheng.com;
    ssi on;
    ssi_silent_errors on;
    #前端门户工程
    location / {
        alias   D:/workspace/sc-multipl-static-web-project/;
        index  index.html;
    }
    #页面预览
    location /cms/preview/ {
        proxy_pass http://cms_server_pool/cms/preview/;
    }
   }
}

以上がnginx プロキシを使用して静的リソース アクセスを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。