Исправьте свой хостинг за 4 простых шага.

#Обновлять

Хотя приведенное ниже решение работает для хостинга ZEIT Now, с тех пор я переместил свой интерфейсный код на Netlify, который предлагает гораздо лучшее (и бесплатное) решение для хостинга одностраничных приложений. Я никоим образом не одобрен и не спонсирован Netlify, и я все еще люблю ZEIT Now, поскольку я все еще использую его для размещения своего API, но Netlify просто делает SPA намного лучше.

Настроить Netlify для вашего SPA; сначала добавьте файл в вашу общедоступную / корневую папку с именем _redirects (например, public/_redirects). Затем добавьте в этот файл следующее содержимое:

/* /index.html 200

См. Здесь для получения дополнительной информации о настройке этого файла. Это обеспечит правильное разрешение всех ваших маршрутов. Затем разместите свой код на Netlify, и он должен заработать. Также очень легко настроить бесплатный SSL для ваших пользовательских доменов. Наслаждаться!

Я люблю Сейчас; Новый проект ZEIT по глобальному развертыванию в реальном времени. Однако, когда я развернул свое одностраничное веб-приложение, мои пользователи начали получать сообщение об ошибке 404, когда они были перенаправлены на URL-адрес типа www.myapp.com/something.

Эта проблема

Я создаю свои веб-приложения, используя шаблон Create React App, который компилирует код в симпатичный маленький статический веб-сайт. Поэтому я получил сообщение 404 потому, что пользователь не загружал файл index.html раньше и, следовательно, не кэшировал код маршрутизации.

Если бы мои пользователи загрузили URL-адрес корневого (например, www.myapp.com), тогда файл index.html был бы правильно загружен в кеш своего браузера, и они больше не получали бы сообщение об ошибке 404.

Решение

Чтобы решить проблему с сообщением об ошибке 404, мы должны убедиться, что когда пользователь переходит по любому URL-адресу, который не является корневым URL (например, www.myapp.com/something или www.myapp.com/dashboard/example), и он никогда раньше не загружал наше веб-приложение , они перенаправляются на корневой URL. Как только они загрузили корневой URL-адрес, они могут быть перенаправлены обратно на страницу, к которой они пытались получить доступ, и все счастливы! 😄

Шаг 1. Раздайте файлы

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

Служебная библиотека ZEIT спешит на помощь!

Внутри нашей общей папки, рядом с файлом index.html, мы собираемся создать еще один маленький файл package.json. ZEIT Now будет использовать этот package.json файл для запуска сервера для обслуживания наших статических файлов. Это очень просто. 😉

В приведенном выше файле вы заметите, что он имеет serve в качестве зависимости, и команда start вызывает это с некоторыми дополнительными параметрами.

  • --single сообщает серверу, что файлы статические и предназначены для одностраничного приложения.
  • --cache=60000 указывает серверу обновлять кеш каждые минуту, чтобы файлы наших пользователей были актуальными каждый раз, когда мы запускаем новое развертывание.

Шаг 2. Настройте страницу 404

Теперь, когда наши файлы обслуживаются, если человек перейдет на некорневой URL-адрес, сервер будет искать 404.html файл, чтобы вместо этого отправить их. Это наш шанс перенаправить их и перенести на страницу index.html. Поместите файл 404.html в ту же общую папку, что и индексный файл.

Как видите, файл 404 - это скелет, единственный код которого - запрос перенаправления. Чтобы убедиться, что мы можем вернуться к этому URL-адресу после перенаправления, мы прикрепили адрес к параметру?redirect в URL-адресе.

Шаг 3. Подготовка к развертыванию

Теперь, когда у нас есть код перенаправления, все, что нам нужно сделать, это добавить команду развертывания к нашему исходному myapp/package.json (это не файл, который мы создали ранее):

{
  "scripts": {
    ...    
    "deploy": "yarn run build && now ./build --name=myapp-spa",
    "start": "react-scripts start",
    "build": "react-scripts build",
    ...
  }
}

Отлично, теперь все, что нам нужно сделать, это вызвать yarn run deploy, и наше приложение должно прекратить получать страницы с ошибками 404.

Шаг 4: очистка

Чтобы вернуться на страницу, которую мы изначально запрашивали, например myapp.com/something нам нужно перенаправить страницу на ?redirect параметр, который мы установили ранее в руководстве. Для этого нам нужно установить библиотеку query-string для разбора параметра. Затем вы можете включить следующий код в свое приложение в место, которое загружается после загрузки кода маршрутизации.

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

Если вам понравилась эта статья, пожалуйста, дайте ей несколько аплодисментов (вы можете оставить до 50) или вы можете прокомментировать, если у вас есть какие-либо вопросы, я сделаю все возможное отвечать! 🙌

Подпишись на меня в Твиттере".

Спасибо!

Еще сообщения Джека Скотта.