Настроить Nginx для страницы ошибки GATSBY 404

Во время разработки страницы GATSBY, когда вы попадаете на страницу, которая не существует, вы столкнулись с экраном, аналогичным ниже.

Если вы создали пользовательскую страницу 404, например, в SRC/Pages/404.js Вы можете нажать на Предпросмотр пользовательских 404 страница отображать его. Ввод ./404 Маршрут сделает работу также.

Однако в производстве страница 404 не рассматривается сама по себе, если вы не используете специальный хостинг-сервис для страниц GATSBY. Это потому, что сервер развития GATSBY больше не присутствует. Производственный пакет — это просто куча статических файлов. Использование веб-сервера (например nginx ) для обслуживания страницы производства заставляет вас настроить страницы ошибок самостоятельно.

Отказ от ответственности: следующее nginx Конфигурация довольно базовая, не используйте ее в производстве.

Давайте предположим, что ваш блог размещен на 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; линия делает nginx перенаправить на /404 Маршрут в случае ошибки 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 Раздел Docs Чтобы исследовать остальные варианты конфигурации.

Оригинал: «https://dev.to/bgord/configure-nginx-for-gatsby-404-error-page-5ecf»