Я знаю, что многие люди борются с проблемой, когда их веб-приложение отлично работает на локальном хосте, но на сервере Netlify после обновления страницы появляется ошибка «Страница не найдена». Почему и как это должно быть исправлено?

Ключ этой проблемы не в том, как работает Netlify. На самом деле Netlify или что-то еще не имеет значения, потому что это может быть другой сервер. Проблема в том, что ваш сервер не знает, как правильно отвечать на ваши запросы. Несмотря на то, что я буду ссылаться на Netlify, вы должны иметь в виду, что это может быть что-то другое.

Как Netlify [server] сохраняет ваши файлы? — Eсть dist каталог с похожими файлами:

dist
  index.html
  hash.js
  icon.svg
  favicon.ico
Войти в полноэкранный режим

Выйти из полноэкранного режима

У нас есть сервер Netlify и у нас нет к нему доступа, мы не можем напрямую закодировать, что если запрос приходит на конкретный адрес, сервер должен отдать этот конкретный файл. У нас просто нет такой возможности. Но все, что есть на нашем сервере Netlify, это dist каталог с кучей файлов. Итак, если есть запрос на https://netlify.app/icon.svg, наш сервер Netlify также должен ответить файлом icon.svg из dist. Но что, если мы хотим получить https://netlify.app/example/1? У нас есть этот маршрут в нашем SPA, и все работает хорошо. localhost, но мы получим ошибку «Страница не найдена». Почему? Просто потому, что нет этого файла в нашем dist каталог. Единственное, что у нас есть, это index.html поэтому мы должны настроить redirects, потому что мы хотим возложить заботу о маршрутах на SPA. Итак, наш сервер должен ответить index.html если нет файла в dist с совпадающим именем.

Существует множество способов сделать это, и, конечно же, я хочу, чтобы вы помнили, что нет ничего особенного в Netlify до следующего подхода. Но если вы используете Vite, я также рекомендую вам прочитать это Документация по общедоступным папкам.

Что ж, если мы рассматриваем Netlify, все, что мне нужно, это создать netlify.toml в каталоге проекта:

// netlify.toml
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
Войти в полноэкранный режим

Выйти из полноэкранного режима

Вот и все! Ошибка исчезла.

Честно говоря, мне не очень нравится эта идея, когда я не могу управлять сервером и создавать файлы, такие как netlify.toml это единственный способ подключить «наш» (не совсем наш) сервер, мне неудобно. Но я предполагаю, что это еще один показатель того, что нам нужно переходить на что-то более низкоуровневое, чем Netlify, хотя для pet-проектов он действительно хорош.

И спасибо за прочтение 🙂