Nginx는 기록 모드에서 페이지 새로 고침의 404 문제를 어떻게 해결합니까?

사전 지식

• 싱글 페이지 애플리케이션(SPA - 싱글 페이지 애플리케이션)
  페이지가 처음 로드될 때만 유일한 html 페이지와 해당 공개 정적 리소스가 반환되고 이후 페이지 점프 html 파일은 서버에서 검색되지 않습니다. (해시 및 히스토리 라우팅은 페이지를 새로 고치지 않고 브라우저 URL 변경을 구현합니다.)

• 해시 라우팅
  예: www.baidu.com/#/home, 원래 해시는 앵커 포인트와 결합하여 페이지 보기를 제어하는 ​​데 사용됩니다. 후속 값이 변경되면 페이지가 다시 요청되지 않습니다. 이는 주로 창의 onhashchange 메서드를 통해 이루어집니다.

• history 라우팅
  해시 라우팅과 비교했을 때 가장 직관적인 변화는 라우팅에 #이 없다는 점입니다. window.history 객체에 일련의 메소드를 호출하면 새로고침 없이 페이지를 리디렉션할 수 있습니다(pushState, replacementState). ).

기록 모드에서는 URL이 변경되었기 때문에 이때 수동으로 페이지를 새로 고치면 브라우저는 새 페이지를 요청한다고 생각하고(새 Http 요청 시작) 새 페이지가 존재하지 않습니다( 백엔드가 구성되지 않음) ), 404가 발생합니다.

우선 브라우저에 IP나 도메인 이름을 입력하면 어떻게 되는지 간단히 설명하겠습니다(약간 면접 질문 같은 느낌????). Enter를 누르면 브라우저에서 보낸 http가 html을 요청합니다. 파일을 전달한 후 일련의 전달 및 주소 분석을 거쳐 대상 IP가 있는 서버의 포트 80(기본값)으로 수신됩니다. 이때 서버의 80 인터페이스가 HTTP 요청을 수신한 후 문제가 발생합니다. 무엇을 반환할지 알 수 없습니다. 정적 리소스 프록시를 수행하려면 서버에 어떤 정적 파일을 반환할지 알려줘야 합니다.

Nginx

일반 프로젝트 배포의 경우 nginx.conf 구성을 처리해야 합니다. file
이 파일에 대해 알아야 할 사항은 다음과 같습니다.

   ....
   # 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

Grammar

   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

차이점은 nginx가 위치 뒤의 URL을 해석하는 방법입니다

[root]
구문: 루트 경로
기본값: 루트 html
구성 섹션: http, server, location , if
처리 결과: 루트 경로 + 위치 경로

[alias]
구문: 별칭 경로
구성 섹션: location
처리 결과: 별칭 경로를 사용하여 위치 경로 대체

   # 返回/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 파일이 하나뿐이므로 nginx.conf의 해당 위치에 코드 줄을 구성해야 합니다 try_files $uri $uri/ /index.html; 파일이 순서대로 확인되었는지 nginx에 알려줍니다. 존재하는지, 없으면 index.html 파일로 리디렉션합니다

위 내용은 Nginx는 기록 모드에서 페이지 새로 고침의 404 문제를 어떻게 해결합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!