Nginx導入vue静的プロジェクトリフレッシュ404の問題
前にnginxがvue静的プロジェクトを配置していない文章を書いた=>転送ゲートがリフレッシュを発見したとき404の問題が発生する
以前のNginx構成は次のとおりです.
ビジネスが進むとurlが変わり、ログインページなどエントリurl:http://localhost/ ログインYes url:http://localhost/login
このとき、ページnginxをリフレッシュすると404が与えられます
構成の変更
構成try_を追加files $uri $uri//index.html;
try_files
try_でfiles $uri $uri//index.html; 例として、ユーザが要求するhttp://localhost/loginの場合、ここの$uriは/loginです.try_filesはハードディスク(HDD)にこのファイルを探してみます./$root/login($rootはWordPressのインストールディレクトリ)というファイルがある場合は、このファイルの内容をユーザーに直接送信します.ディレクトリにloginというファイルがないのは明らかです.それから$uri/を見て、/$root/login/というディレクトリがあるかどうかを見ます.また見つからないとfall backからtry_filesの最後のオプション/index.htmlは、内部の「サブリクエスト」、すなわちnginxがHTTPリクエストを開始することに相当する.http://localhost/index.html.
以前のNginx構成は次のとおりです.
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root D:/police/terminal-client;
index index.html index.htm;
}
location /api/ {
proxy_pass http://localhost:8888/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
ビジネスが進むとurlが変わり、ログインページなど
このとき、ページnginxをリフレッシュすると404が与えられます
構成の変更
構成try_を追加files $uri $uri//index.html;
location / {
root D:/police/terminal-client;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
try_files
try_でfiles $uri $uri//index.html; 例として、ユーザが要求するhttp://localhost/loginの場合、ここの$uriは/loginです.try_filesはハードディスク(HDD)にこのファイルを探してみます./$root/login($rootはWordPressのインストールディレクトリ)というファイルがある場合は、このファイルの内容をユーザーに直接送信します.ディレクトリにloginというファイルがないのは明らかです.それから$uri/を見て、/$root/login/というディレクトリがあるかどうかを見ます.また見つからないとfall backからtry_filesの最後のオプション/index.htmlは、内部の「サブリクエスト」、すなわちnginxがHTTPリクエストを開始することに相当する.http://localhost/index.html.