Gatsby 404 오류 페이지용 nginx 구성

Gatsby 페이지 개발 중에 존재하지 않는 페이지를 누르면 아래와 같은 화면이 나타납니다.



예를 들어 src/pages/404.js에서 사용자 지정 404 페이지를 만든 경우 Preview custom 404 page를 클릭하여 표시할 수 있습니다. /404 경로를 입력해도 작업이 수행됩니다.


그러나 프로덕션에서는 Gatsby 페이지 전용 호스팅 서비스를 사용하지 않는 한 404 페이지가 자체적으로 처리되지 않습니다. Gatsby의 개발 서버가 더 이상 존재하지 않기 때문입니다. 프로덕션 번들은 정적 파일의 묶음일 뿐입니다. 웹 서버(예: nginx )를 사용하여 프로덕션 페이지를 제공하면 오류 페이지를 직접 구성해야 합니다.

Disclaimer: the following nginx configuration is pretty basic, don't use it in production.

블로그가 personalblog.com 도메인에서 호스팅되고 /var/www/blog 포트의 80 디렉토리에서 제공된다고 가정해 보겠습니다.

server {
        listen 80;
        root /var/www/blog;
        server_name personalblog.com www.personalblog.com;
        location / {
                try_files $uri $uri/ =404;
        }
}

프로덕션 Gatsby 사이트에 존재하지 않는 경로를 입력하면 nginx가 기본 404 오류 페이지를 표시합니다.


error_page 404 /404; 줄을 추가하면 404 오류가 발생할 경우 nginx가 /404 경로로 리디렉션됩니다. 사용자 지정 Gatsby 404 페이지가 표시됩니다.

server {
        listen 80;
        root /var/www/blog;
        server_name personalblog.com www.personalblog.com;
        error_page 404 /404;
        location / {
                try_files $uri $uri/ =404;
        }
}

error_page 문서 섹션을 방문하여 나머지 구성 옵션을 살펴보십시오.