Nginx 404 오류를 해결하는 방법

최근 프로젝트 디플로이를 하다가 사진과 같은 문제가 발생했습니다

일반 로그인 인터페이스로는 접근이 가능하지만, 로그인 후 접속 후 주소에서 404에러가 발생한다고 해서 확인하러 갔습니다. 구성 오류가 있었지만 확인 결과 nginx.conf 및 config.js 두 구성 파일의 IP와 포트가 올바른 것으로 나타났습니다.

이 프로젝트는 여러 번 배포되었으며 이러한 오류는 없습니다. 발생했습니다.

이것은 손길이 닿지 않은 원래의 압축 해제된 nginx.conf 소스 파일입니다.

원으로 표시된 영역은 프로젝트 구성에 따라 구성되어야 하는 ip 및 청취 포트

listen에 해당합니다. 포트, server_name은 액세스한 ip

에 해당합니다. 하지만 문제가 해결되지는 않습니다. 다음 문장을 추가해야 합니다.

try_files $uri $uri/ /index.html;

추가된 위치는 여기여야 합니다

에 추가합니다. server 아래의 location 섹션에 nginx.exe가 있는 디렉터리에서 cmd

를 입력하면 바로 해당 디렉터리에 액세스할 수 있습니다. cmd를 열지 않고 명령줄을 실행한 다음 해당 디렉터리로 이동합니다.

이전에 nginx 서비스를 종료한 적이 없다면 중지한 후 다시 엽니다. 종료된 경우 직접 명령을 입력하여 서비스를 시작할 수 있습니다.

nginx 서비스 중지 명령:

nginx -s stop

nginx 서비스 시작 명령:

start nginx

핫 배포 nignx 서비스 명령:

(그러나 이 명령을 사용하는 것은 권장되지 않습니다. 때때로 이 명령이 작동하지 않을 경우 직접 중지하고 시작하는 것이 좋습니다)

nginx -s reload

nginx를 다시 시작한 후 브라우저가 가장 좋습니다

캐시를 지운 후, 다시 테스트하세요

브라우저 창에서 직접

Ctrl+Shift+Del

을 눌러 대화 상자를 열어 캐시를 지울 수 있습니다.

다시 테스트하면 정상적으로 액세스할 수 있습니다

보충: Nginx 배포 후 정상적인 클릭에는 문제가 없습니다. 프로젝트가 서버에 배포된 후 404 문제가 발생합니다. 루트 경로 액세스(http:10.10.10.10)에는 문제가 없지만,

http:10.10.10.10/test/test/test와 같은 다른 기능을 입력하고 페이지를 새로 고치면 404가 나타납니다. nginx 구성에 리디렉션 점프를 추가하지 않았기 때문에 페이지를 새로 고칩니다.

해결책은 다음 구성을 추가하는 것입니다. 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 경로와 일치할 때 해당 정적 리소스를 찾을 수 없을 때마다 변조가 Go를 점프한다는 것을 의미합니다. index.html 파일에

표시된 대로 여기에 추가하세요

다음 콘텐츠에는 라우터 라우팅의 작동 원리와 nginx 원리에 대한 약간의 지식이 필요합니다

이런 일이 발생하는 이유에 대한 분석(기록 모드에서 라우팅의 경우):

먼저 질문하세요:

1. 페이지 새로고침이 발생하는 이유(구성 없이 홈페이지 루트 디렉토리에서 새로고침되지 않음)

2. 점프를 클릭할 때 왜 발생합니까?

이제 문제를 해결해 보겠습니다. :

1. 현재 브라우저에 있다고 가정합니다. 브라우저의 URL은 172.1.2.3:7000/test입니다. 페이지가 새로 고쳐지면 서버(nginx)로 이동하여 해당 정적 리소스를 요청합니다. nginx는 위치 일치 규칙에 따라 dist 폴더에 해당 URL을 가지고 있지 않습니다. / 해당 정적 파일 "test"가 발견되었으므로 404가 반환되며 이는 합리적입니다.

이 때, index.html 파일로 다시 리디렉션되도록 try_files를 구성합니다. 즉, 홈 페이지 "/"로 돌아갑니다. 이때 페이지가 새로 고쳐졌습니다. vue-router 라우팅이 적용됩니다. 현재 URL 주소에 따라 컴포넌트가 일치하므로 이때 해당 컴포넌트는 URL이고 페이지가 다시 로드되면 완료됩니다.

2. 두 번째 질문은 클릭하면 가끔 점프하지만 가끔은 점프하지 않는 이유입니다. 점프에는 두 가지 상황이 있다는 것을 알아야 합니다. 하나는 페이지가 새로 고쳐지는 것이고(첫 번째 질문에 속함), 다른 하나는 페이지가 새로 고쳐지는 것입니다. 새로고침되지 않습니다. 이는 코드 작성 방법에 따라 다릅니다.

1. 푸시는 페이지를 새로 고치지 않고 브라우저의 URL 라우팅 변경만 변경합니다. 구현은 HTML API를 사용합니다. pushState()라고 합니다

2. 전달하면 페이지가 새로 고쳐지며 이는 a 태그와 동일합니다

브라우저에서 직접 시도해 볼 수 있습니다

클릭하여 점프할 때 코드에서 Push를 사용하는 경우가 있습니다. (새로 고침 없음), 때로는 링크(새로 고침) 태그를 사용하면 이 문제가 발생합니다.

위 내용은 Nginx 404 오류를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!