Nginx에 배포 된 후 페이지를 새로 고칠 때 다음 .js 정적 내보내기가 실패하는 이유는 무엇입니까?

다음에 라우팅 고장 문제에 대한 자세한 설명이 다음.js 정적 사이트가 nginx에 배포되었습니다.

Next.js 정적 내보내기를 사용하여 Nginx 서버에 배포 된 후 페이지를 새로 고칠 때 경로가 실패하고 홈페이지로 다시 점프합니다. 이는 많은 개발자가 발생하는 일반적인 문제입니다. 이 기사는이 문제에 대한 원인과 해결책을 심층적으로 탐구합니다.

문제 설명

A /test Route를 포함한 Next.js 프로젝트를 작성하고 정적 내보내기로 구성되었다고 가정합니다.

 {
  "출력": "내보내기"
}

로컬 개발 환경 (실행 npm run dev ) 액세스 localhost:3000/test 표시는 정상적으로 표시됩니다. 그러나 Nginx에 배포 된 후 액세스 /test 홈페이지로 점프합니다. Nginx가 404로 구성 되더라도 홈페이지로 이동하십시오.

 위치 / {
    try_files $ uri $ uri / / index.html;
}

이는 일반적으로 유사한 구성에서 제대로 작동하는 vue.js의 히스토리 모드와 다릅니다.

문제 분석

nginx의 try_files 지시문이 정적 디렉토리에서 해당 라우팅 된 파일을 찾을 수 없으면 index.html 로 다시 떨어집니다. 정적 내보내기가 해당 경로에 대한 정적 파일을 생성하지 않을 수 있기 때문에 이것은 예상대로 보인다. 그러나 근본 원인은 Next.js의 정적 내보내기 메커니즘과 클라이언트 라우팅 처리 방법의 차이입니다.

해결책

이 문제를 해결하려면 Next.js 및 Nginx의 구성에서 시작해야합니다.

1. sext.js basePath configuration : subpath (예 : /my-app ) basePath next.config.js .

 module.exports = {
  Basepath : '/my-app',
}

2. nginx 구성 최적화 : Nginx의 try_files 명령어를 조정하여보다 정확하게 라우팅을 처리하도록합니다.

 위치 / {
    try_files $ uri $ uri//my-app/index.html; # /my-App에서 배포 된 경우}

이렇게하면 지정된 라우팅 파일을 찾을 수없는 경우 Nginx가 배포 디렉토리의 index.html 파일을 올바르게 가리 킵니다.

3. JS : Nginx 서비스 정적 파일을 직접 사용하지 마십시오. Next.js와 함께 제공되는 서버를 사용하고 Nginx를 리버스 프록시로 사용하는 것이 좋습니다. 이러한 방식으로 라우팅 처리는 다음.js 서버에서 수행하여 정적 파일 일치 문제를 피합니다.

4. 생성 된 정적 파일을 확인하십시오. Next.js의 정적 내보내기가 필요한 모든 라우팅 파일을 올바르게 생성했는지 확인하십시오. next export 명령을 사용하여 다시 수출하고 생성 된 디렉토리 구조를 확인할 수 있습니다.

위의 방법을 통해 Next.js 정적 내보내기 경로 실패의 문제를 효과적으로 해결하여 정적 웹 사이트가 모든 라우팅 요청을 올바르게 처리 할 수 ​​있도록 할 수 있습니다. 선택할 방법은 특정 배포 환경 및 요구 사항에 따라 다릅니다. 가능하면 Next.js의 자체 서버 및 리버스 프록시 사용의 우선 순위를 정하는 것이 좋습니다. 이는보다 안정적인 라우팅 처리를 제공 할 수 있습니다.

위 내용은 Nginx에 배포 된 후 페이지를 새로 고칠 때 다음 .js 정적 내보내기가 실패하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!