Nginx は履歴モードでのページ更新の 404 問題をどのように解決しますか?-Nginx-php.cn

Nginx は履歴モードでのページ更新の 404 問題をどのように解決しますか?

WBOY

リリース： 2023-05-13 14:40:11

転載

2649 人が閲覧しました

事前知識

シングルページアプリケーション (SPA - シングルページアプリケーション)
最初のページのみをロードしますtime このとき、HTML ページとそのパブリック静的リソースのみが返され、後続のページジャンプではサーバーから HTML ファイルがフェッチされません。 (ハッシュと履歴ルーティングは、ページを更新せずにブラウザ URL の変更を実装します)
ハッシュルーティング
例: www.baidu.com/#/home、元々はハッシュを結合するために使用されます。アンカーポイントはページビューの制御を実現します #以降の値が変化してもページの再リクエストは行われませんこれは主にウィンドウの onhashchange メソッドによって実現されます。
ヒストリールーティング
ハッシュルーティングと比較した場合、最も直感的な変更点は、ルーティングに # がないことです。window.history オブジェクトで一連のメソッドを呼び出すことにより、ページは更新されません。Jump(pushState, replaceState)。

履歴モードでは、URL が変更されているため、この時点でページを手動で更新すると、ブラウザは新しいページを要求している (新しい HTTP 要求を開始している) と認識します。新しいページは存在しません (バックエンドが構成されていない場合) となり、404 が発生します。

ブラウザに IP またはドメイン名を入力した後に何が起こるかを簡単に説明します (面接の質問のような感じです ????) Enter キーを押すと、ブラウザから送信された http が html をリクエストします。一連の転送とアドレス指定の解析の後、ファイルはターゲット IP が存在するサーバーのポート 80 (デフォルト) で受信されます。この時点で問題が発生します。サーバーの 80 インターフェイスが HTTP リクエストを受信した後、何かを返すには、今回は Nginx が静的リソースプロキシを実行する必要があります そしてどの静的ファイルを返すかをサーバーに指示します

Nginx

一般的なプロジェクトの場合デプロイメントでは、nginx.conf 構成ファイルを処理する必要があります。
このファイルについて知っておくべきことは次のとおりです

   ....
   # http 是指令块，针对http网络传输的一些指令配置
   http {
       #文件扩展名与文件类型映射表 
       include mime.types;
       #设置客户端与服务端请求的超时时间
       keepalive_timeout  65;
       # 开启压缩功能，目的：提高传输效率，节省带宽 
       gzip on
       server {
          #监听端口
          listen   80;
          #服务命名，最好就是用这个服务器的域名命名
          server_name localhost;
          #指令块，配置外部访问资源和实际资源的对应关系
          location /{
              root /usr/blog; #表示静态资源所在的目录
              index  index.html index.htm; #访问这个路径对应的默认静态资源文件或者网页
          }
       }
   }

ログイン後にコピー

location

Syntax

   location [=|~|~*|^~|@] uri { ... } 
   location @name { ... }

ログイン後にコピー

=: 完全一致を示します
~: 大文字と小文字を区別する正規一致を示します
~*: 大文字と小文字を区別しない正規一致を示します
^~: URI が正規の文字列で始まることを示します
!~: 大文字と小文字が区別される正規表現の不一致を示します
!~*: 大文字と小文字を区別しない通常の非一致を示します。
#/: ユニバーサル一致。あらゆるリクエストは
# に一致します。

   # 将所有请求直接转发给服务器的9090端口
    location = / {
      proxy_pass http://127.0.0.1:9090/;
    }
    # 目录匹配 
    location ^~ /static/ { 
        root /webroot/static/;
    } 
    # 后缀匹配 
    location ~* \.(gif|jpg|jpeg|png|css|js|ico)$ { 
        root /webroot/res/; 
    }
    # 将/account/开始的请求转发给Account服务器
    location /account/ {
        proxy_pass http://127.0.0.1:8080/
    }
    # 将/order/开始的请求转发给Order服务器
    location /order/ {
        proxy_pass http://127.0.0.1:9090/
    }

ログイン後にコピー

root と alias

2 つの違いは、nginx が location の後の URL を解釈する方法です

[root]

構文: root path
デフォルト値: root html
設定セクション: http、server、location、if
処理結果: root path + location path

[alias]

構文: alias path
Configurationセクション:location
処理結果:Use alias path to replace location path
   # 返回/www/root/html/t/a.html的文件
   location ^~ /t/ { 
       root /www/root/html/;
   } 
   # 返回/www/root/html/new_t/a.html的文件 
   # 把location后面配置的路径丢弃掉，把当前匹配到的目录指向到指定的目录。 
   location ^~ /t/ { 
       alias /www/root/html/new_t/; 
   }
ログイン後にコピー
リフレッシュ後の404の問題を解決
上記の知識から、更新後、ブラウザーは現在の URL で HTML ファイルを要求しますが、SPA には HTML ファイルが 1 つしかないため、nginx の対応する場所にコード行を構成する必要があることがわかります。 conf
try_files $uri $uri/ /index.html;
順番どおりかどうかを nginx に伝えるファイルが存在するかどうかを確認し、存在しない場合は、index.html ファイルにリダイレクトします。
以上がNginx は履歴モードでのページ更新の 404 問題をどのように解決しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。