Обслуживание несгенерированных файлов на сайте stati c

Question

Я развертываю статически сгенерированный сайт, используя Nuxt на работниках Cloudflare. Пока он прекрасно работает.

Я генерирую большинство моих файлов stati c при генерации, однако есть сценарий ios, где я не могу сгенерировать файл, например, когда был сделан заказ, Я не могу сгенерировать маршрут /order/82781. Как я могу использовать .htaccess для обслуживания, я думаю, файла index. html ?, если он не существует, поэтому vue / nuxt возьмет на себя управление и отправит запрос на поиск заказа?

Расположение: / my-account / orders / {some_id}

Я пытался использовать этот htaccess в каталоге / my-account / orders:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Но это не работает. Если я посещаю URL-адрес напрямую, я получаю эту ошибку:

could not find my-account/orders/wc_order_sp8DykeTNqMMO/index.html in your content namespace

Answer 1

Похоже, что есть части вашего сайта, которые не полностью устарели c. Файл "htaccess" содержит указания для Apache веб-сервера динамически обрабатывать запросы, но вы не используете Apache, вы используете Workers. В Workers мы «настраиваем» веб-сервер, записывая JavaScript. Хорошей новостью является то, что в отличие от htaccess - который ограничен узким набором функций - в JavaScript вы можете делать практически все!

Когда вы генерировали свой проект рабочих сайтов с wrangler generate, он создал файл с именем workers-site/index.js. Этот файл был скопирован из шаблона , но вы можете редактировать его, чтобы добавить на свой сайт динамические c функции.

Похоже, что вы хотите сделать, это убедиться /my-account/orders/* всегда обслуживает один и тот же файл HTML. Давайте запрограммируем это в JavaScript.

В вашем index.js вы увидите такой комментарий:

  /**
   * You can add custom logic to how we fetch your assets
   * by configuring the function `mapRequestToAsset`
   */
  // options.mapRequestToAsset = handlePrefix(/^\/docs/)

Эта handlePrefix функция определена в нижняя часть файла . Это на самом деле там в качестве примера. Пример кода изменяет имена путей, удаляя префикс.

Вы хотите сделать что-то похожее, но не совсем то же самое: вы хотите сопоставить пути, начинающиеся с /my-account/orders/, а затем хотите удалить остальные. Таким образом, вы можете написать функцию, подобную этой:

function stripOrderNumber(prefix) {
  return request => {
    let url = new URL(request.url)
    if (url.pathname.startsWith("/my-account/orders/")) {
      // Treat as if the order number weren't given.
      url.pathname = "/my-account/orders/"

      // Update the Request object with the modified URL.
      request = new Request(url, request)
    }

    // Invoke default handling from here.
    // (`mapRequestToAsset` is imported from '@cloudflare/kv-asset-handler'
    // at the top of this file.)
    return mapRequestToAsset(request)
  }
}

Теперь go вернитесь к закомментированной строке и измените ее на:

  /**
   * You can add custom logic to how we fetch your assets
   * by configuring the function `mapRequestToAsset`
   */
  options.mapRequestToAsset = stripOrderNumber

Разверните обновленного работника, а теперь /my-account/orders/* должно быть сопоставлено с /my-account/orders/index.html!