Nginx 404エラーの解決方法-Nginx-php.cn

Nginx 404エラーの解決方法

PHPz

リリース： 2023-05-17 18:23:18

転載

16068 人が閲覧しました

最近、図に示すように、プロジェクトのデプロイ時にいくつかの問題が発生しました。

Nginx 404エラーの解決方法

通常のログインインターフェイスにはアクセスできますが、ログイン後、アクセス後のアドレスが表示されます。 404 エラーが報告されるため、設定エラーがないか確認しましたが、確認したところ、2 つの設定ファイル nginx.conf と config.js# の IP とポートが間違っていることがわかりました。 ## は正しかったです

このプロジェクトは何度もデプロイされていますが、そのようなエラーは発生していません。

これは、

nginx.conf のオリジナルの解凍されたソースファイルです。

Nginx 404エラーの解決方法

丸で囲まれた場所は、対応するプロジェクト構成に従っている必要があります。

ip とリスニングポート

listen はポートに対応し、server_name は Accessedip に対応します

#しかし、これでは問題は解決しません。次の文を追加する必要があります。

try_files $uri $uri/ /index.html;

ログイン後にコピー

追加された場所はここであるはずです

Nginx 404エラーの解決方法 #これを

server

の location セクションに追加し、restart nginx次のディレクトリに追加します。

nginx.exe

があるので、アドレスバーをクリックして cmd と入力します。cmd を開いてジャンプすることなく、ディレクトリ内で直接コマンドラインを開始できます。 #これまでに nginx サービスを閉じていない場合は、まずサービスを停止してから開きます。閉じている場合は、コマンドを直接入力してサービスを開始できます

nginx サービスコマンドの停止:

nginx -s stop

ログイン後にコピー

nginx サービスコマンドの開始:

start nginx

ログイン後にコピー

ホットデプロイメント nigx サービスコマンド:

(ただし、このコマンドの使用はお勧めしません。時々このコマンドが機能しないことがあります。停止して直接起動することをお勧めします)

nginx -s reload

ログイン後にコピー

nginx を再起動した後ブラウザのキャッシュをクリアするのが最善です

もう一度テストしてください

Ctrl Shift Del

を直接押してください。ブラウザウィンドウでキャッシュクリアダイアログボックスを直接開きます。

再テストすると、通常どおりアクセスできます。

補足: Nginx のデプロイ後、通常のクリックでは問題ありません。ページを更新すると 404 問題が発生します。

Nginx 404エラーの解決方法プロジェクトをサーバーにデプロイした後は、ルートパス (http:10.10.10.10) へのアクセスには問題ありませんが、

http:10.10.10.10/test /test/test など、他の関数を入力してページを更新すると、404 が表示されます。ページを更新すると、nginx にリダイレクトジャンプを追加していないため、404 が表示されます。構成。解決策として、次の構成を追加するだけです:

try_files $uri $uri/ /index.html;

server {
    listen 80;
    server_name 127.0.0.1;
	
	location / {
		root /data/htdocs/FactoryModel/micro-front-end/industrial-internet-platform-main-vue;
		index index.php index.html index.htm;
		# add_header Cache-Control;
		add_header Access-Control-Allow-Origin *;
		if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
		  add_header Cache-Control max-age=7776000;
		  add_header Access-Control-Allow-Origin *;
		}
		try_files $uri $uri/ /index.html;
	}
}

ログイン後にコピー

この構成は、対応する静的リソースが見つからない場合にすべての一致を意味しますURL パスで、変調して、index.html ファイルにジャンプします。

示されているように、ここに追加できます。

次の内容では、ルータールーティングの動作原理とその原理を少し理解する必要があります。 nginx の

これが発生する理由の分析 (履歴モードでのルーティングの場合):

最初に質問してください:

1. を更新するときにこの問題が発生するのはなぜですかページ (設定なし、ホームページのルートディレクトリの更新ではありません)

2. クリックしてジャンプすると (時々) 問題が発生するのはなぜですか

次に、問題を解決しましょう:

1ブラウザ上の URL が 172.1.2.3:7000/test であると仮定します。ページを更新すると、ブラウザ上の URL に従って、対応する静的リソースがサーバー (nginx) に要求されます。nginx は、対応する静的リソースを見つけられませんでした。場所/ファイル「test」の一致ルールに従って、dist フォルダー内の静的リソースが返されるため、404 が返されますが、これは妥当です。
この時点で、index.html ファイルにリダイレクトして戻るように try_files を設定します。つまり、ホームページ「/」に戻ります。この時点でページが更新されていることに注意してください。 vue-router は routing. 動作すると、現在の URL アドレスに基づいてコンポーネントが照合されるので、この時点で URL が対応するコンポーネントとなり、ページがリロードされて完了です。

2. 2 番目の質問は、クリックしてジャンプする場合とそうでない場合があるのはなぜですか? ジャンプには 2 つの状況があることを知っておく必要があります: 1 つはページの更新 (最初の質問に属する)、もう 1 つはページの更新です。ジャンプではなくリフレッシュしてください。これはコードの記述方法によって異なります。覚えておいてください:

1. プッシュではページは更新されませんが、react-router であっても vue であっても、ブラウザー上の URL ルーティングの変更のみが変更されます。 -router。これらはすべて、pushState() という HTML API を使用して実装されています。

2. 渡すと、タグに相当するページが更新されます。

ブラウザで試すことができます。自分自身

そのため、クリックしてジャンプするときに、コードでプッシュ (更新ではなく) が使用されることもあれば、タグまたはリンク (更新) が使用されることもあり、この問題が発生します。

以上がNginx 404エラーの解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。