Как очистить кеш cloudflare

Обновлено: 21.11.2024

Что, если я скажу, что вы можете запускать коллекцию Postman внутри Github Actions и легко автоматизировать все, если они предоставляют API? Звучит интересно, верно? Итак, позвольте мне показать вам, как я перенес рабочий процесс публикации блога Jekyll в Github Actions и как я использовал коллекцию Postman для очистки кэша Cloudflare. Бонус: вы также можете узнать кое-что о дизайне DX и API.

Поскольку смена системы сборки прошла быстрее, чем ожидалось, я решил немного повозиться и решить проблему, которая была у меня с моей системой: чтобы обеспечить публикацию, мне пришлось перейти на панель инструментов Cloudflare и вручную очистить кеш. Если случайно Cloudflare предложит API, я подумал, что мог бы включить очистку кеша после сборки с помощью команды curl, но, как всегда, я сделал немного больше, чем это.

Рабочий процесс Jekyll по умолчанию

Начать работу с Github Actions для новичков очень просто:

Перейдите в свой репозиторий
Перейдите на вкладку Действия. Вы должны увидеть страницу «Начало работы с действиями Github».
Прокрутите вниз до раздела "Непрерывные рабочие процессы интеграции" и найдите "Jekyll".

Это должно создать следующий рабочий процесс в .github/workflows/jekyll.yml в вашем репозитории:

Рабочий процесс Jekyll по умолчанию

Согласно свойству on, этот рабочий процесс будет запускаться отправками и запросами на вытягивание в основной ветке. Он содержит одно задание (в job ) с именем build, которое состоит из 2 шагов:

Первый из них извлекает репозиторий, используя преимущества действий/[email protected] (это означает, что вы можете вызывать действия внутри рабочих процессов действий! Проверьте Market Place, их уже десятки)
На втором этапе выполняется сборка jekyll с использованием Docker (это окажется полезным), но ничего не публикуется (вы можете запускать любые команды Linux с помощью run )

Настройка рабочего процесса Jekyll

Мой рабочий процесс публикации довольно прост, каждую среду в полдень (UTC) или по требованию, я хочу:

Репозиторий Checkout в ветке по умолчанию
Запустить сборку Jekyll
Зафиксировать результат сборки в ветке gh-pages

Итак, я начал с настройки раздела on:

Чтобы запланировать сборку каждую среду в полдень, используя синтаксис cron (документация Schedule Events)
И я также активировал выполнение «по требованию» с пустым workflow_dispatch (документация по событиям вручную)

Настраиваемый рабочий процесс Jekyll

Затем я настроил (и переименовал) задание сборки в build_and_publish :

Я добавил переменные среды PUBLISH_BRANCH_FOLDER (целевая папка для сборки) и PUBLISH_BRANCH (ветвь публикации) (документация) в env . Позднее они используются с синтаксисом $>.
Я ускорил этап оформления заказа, загрузив только последнюю версию кода ( fetch-depth: 1 )
Я удалил флаг --future на этапе сборки Jekyll, чтобы избежать публикации будущей даты (на самом деле я сделал это после того, как понял, что будущая публикация была опубликована)
Я изменил целевой каталог сборки (второй -v в команде Docker) и установил для него значение $>/$> . github.workspace — это переменная контекста github, этот контекст предоставляет информацию о рабочем процессе и событии, которое его инициировало.
И, наконец, я добавил этап публикации, который заключается в отправке сборки на gh-pages. Это делается с помощью замечательного действия JamesIves/github-pages-deploy-action, которое может взять содержимое любой папки и отправить его в любую ветку репозитория (clean: true — очень удобная опция, которая удаляет то, что должно быть удалено из целевой ветки на основе исходной папки)

Настраиваемый рабочий процесс Jekyll

Теперь, когда блог опубликован, давайте посмотрим, как очистить кеш Cloudflare.

Спойлер: предлагает ли Cloudflare хороший DX (опыт разработчика)? Да, определенно, я смог сделать то, что хотел, за считанные минуты.

Поиск документации по API

Войдите в свою учетную запись Cloudflare и прокрутите страницу до конца

Честно говоря, я мог бы просто погуглить Clouflare API и сразу бы наткнулся на документацию. Поиск по фразе «название компании API» — лучший способ найти документацию по API компании.

Хотя Cloudflare не рекламирует их на своей главной странице, они отлично поработали над своими API. Кристально чистая документация, идущая прямо к делу; Мне потребовалось несколько секунд, чтобы перейти к разделу «Начало работы -> Запросы», в котором объясняется, как выполнять вызовы API с использованием токена API. Вишенка на торте: прямая ссылка на ваш профиль пользователя для настройки токена.

Как сделать запрос API Cloudflare

Настройка токена доступа

После перехода на вкладку Токены API вашего профиля нажмите синюю кнопку Создать токен, появится следующая страница:

Создать API-токен Cloudflare

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

Настройка пользовательского токена

Настроить токен доступа очень просто:

Дайте ему имя (полезно, если вы хотите удалить токен)
Выберите зону разрешений -> Очистка кэша -> Очистка.
Выберите ресурсы для очистки. Я выбрал только домен apihandyman.io.
Нажмите "Продолжить".

Настроить API-токен Cloudflare

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

Проверка конфигурации

После завершения настройки вы получите сводку разрешений, предоставленных этим токеном.

Сводка токена Cloudflare API

Токен создан

И когда токен создан, вы можете скопировать его, чтобы использовать, но это довольно удобно, вы получаете готовую к использованию команду curl, чтобы проверить, действительно ли она работает (хотя я бы не проектировал конечную точку таким образом, но это не так). суть здесь).

Создан API-токен Cloudflare

Отсутствие интерактивной документации здесь не проблема

Хорошо, Cloudflare может предложить интерактивную документацию с использованием предварительно сгенерированных токенов. Но в этом контексте и поскольку API довольно прост, меня совсем не раздражала статическая документация. Я даже задаюсь вопросом, было бы хорошей идеей иметь такую динамическую документацию, основанную на ужасных действиях, которые вы можете инициировать с помощью их API.

Проверка токена

Вместо использования curl для проверки токена я использовал Postman.

Если вы не знакомы с Postman, выполните подробные действия, описанные в моих вызовах API пакетной службы (Github) с CSV и Postman, чтобы настроить рабочую область, коллекцию и переменные среды

В коллекции я установил тип авторизации на Bearer Token (как указано в документации Cloudflare API) и установил значение токена > . И я создал запрос Verify Token как GET >/user/tokens/verify . Прежде чем нажать кнопку Отправить, я добавил тестовый фрагмент, чтобы проверить, является ли ответ 200 OK, перейдя на вкладку запроса Тесты, а затем щелкнув «Код состояния: Код представляет собой 200-дюймовый фрагмент, как показано ниже.

Проверка токена Cloudflare в Postman

Чтение документации по очистке кеша

Теперь, когда мы готовы выполнять вызовы API Cloudflare, давайте посмотрим, как очистить кеш. Узнать, как это сделать, снова очень просто, перейдите в документацию по API Cloudflare, введите «очистить» в верхнем левом поле поиска и нажмите «Очистить все файлы». Обратите внимание, что в зависимости от ваших подписок Cloudflare вы можете получить доступ к более сложным функциям очистки кэша. Поскольку у меня есть небольшой веб-сайт, размещенный на github, я могу позволить себе провести полную очистку кеша, я могу использовать файлы очистки по URL-адресу, чтобы сделать это более эффективным.

Проверка токена Cloudflare в Postman

Поэтому для очистки кеша требуется отправить запрос POST >/zones//purge_cache, согласно примеру curl, который будет техническим идентификатором моей зоны apihandyman.io. Я думаю, что мог бы получить этот идентификатор из панели инструментов, но мне лень это делать.

Угадай, как работает Cloudflare API, благодаря его дизайну

Хотя я бы не стал разрабатывать API Cloudflare таким образом, он все же немного предсказуем.Я могу получить то, что хочу (мой идентификатор зоны apihandyman.io), не читая документацию. Во-первых, исходя из >/zones//purge_cache , я могу предположить, что выполнение GET >/zones позволит мне перечислить все мои зоны, и это предположение верно! Я получаю список зон, а свойство name содержит доменное имя, поэтому давайте попробуем GET >/zones?name=apihandyman.io, чтобы получить только нужную мне зону, это тоже работает!

Получение зоны apihandyman.io и сохранение в переменной окружения zone_id

Чтобы все это можно было использовать повторно, я установил имя веб-сайта в качестве переменной среды. И на вкладке «Тесты» я добавляю код на основе фрагментов Postman, чтобы проверить, что я получаю успешный ответ с непустым списком, а затем сохраняю идентификатор зоны в переменной среды.

Теперь, когда у меня есть идентификатор зоны, я могу легко очистить кеш, используя переменную zone_id:

Очистка кеша apihandyman.io

Я просто добавляю новый запрос >/zones/>/purge_cache с телом, содержащим для purge_everything значение true, и готово. Ну, почти готово, я также добавил тест для проверки успешности запроса с помощью сниппета «code is 200».

Очистить коллекцию кеша

Теперь у меня есть коллекция, содержащая 3 запроса:

Подтвердить токен
Получить идентификатор зоны для имени веб-сайта
Очистить кеш

Эти запросы зависят от следующих переменных

Теперь мы знаем, как очистить кеш Cloudflare, давайте посмотрим, как это сделать с помощью действия Github.

Привет,
Я использую последние версии Hummingbird и WP, и я интегрировал плагин с Cloudflare.
Я понял, что очистка кеша с помощью опции плагина из админ-бара должна также очищать кеш в CF, но этого не происходит.
Только если захожу в админку CF и на очистку кеша - работает.
В пользовательском интерфейсе плагина я вижу, что он интегрирован с CF, без каких-либо предупреждений.

Кнопка «Очистить кэш» на панели администратора применяется к кэшированию страниц, а подключение к Cloudflare относится к кэшированию браузера.
Можете ли вы попробовать перейти на страницу Hummingbird > Кэширование > Кэширование браузера, и в правом нижнем углу вы увидите еще одну кнопку «Очистить кеш», попробуйте ее и сообщите нам, очистил ли кеш CF.

Хорошо, это помогло.

Итак, прошу вас:

<р>1. Улучшите параметр панели администратора, чтобы также включить пункт меню очистки кэша браузера / CF. Я думаю, это очень поможет.

<р>2. Лучше объясните разницу между функциями страницы и кеша браузера

<р>3. В настройках кеша — что «Обнаружение изменения файла» также будет иметь параллельную опцию, поэтому изменение содержимого постов и страниц (текст, хранящийся в БД WP) также вызовет очистку локального и CF-кэша. Это будет большим преимуществом автоматизации!

<р>1. Вы не сможете очистить кеш браузера с помощью кнопки в плагине. Это можно сделать в настройках браузера. Однако очистка кеша в Cloudflare возможна. Но на самом деле это ничего не даст пользователям, потому что это действие не очистит кеш их браузера.

<р>2. Кэш браузера и кеш Cloudflare применим только к статическим активам (изображениям, css, js файлам). А контентная часть (одна в БД WP) обрабатывается кешем страницы.

<р>3. Содержание сообщения и страницы автоматически очищается при обновлении страницы/сообщения, не думаю, что есть необходимость в дополнительной опции.

<р>4. Спасибо! Это звучит как действительно хорошее предложение. Я проверю, возможно ли это.

С уважением,
Антон

Надеюсь, у вас все хорошо!

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

Cloudflare ≠ CDN: Не вводите CNAMES Cloudflare на вкладке CDN, это нарушит работу вашего сайта!
Вы можете использовать стандартную CDN по запросу в дополнение к Cloudflare в зависимости от ваших потребностей. WP Rocket имеет собственный премиум-сервис CDN, RocketCDN, а также совместим с большинством провайдеров CDN, включая Amazon Cloudfront, Bunny CDN, KeyCDN и других. Если вам нужна информация о том, как использовать WP Rocket с CDN, пожалуйста: Использование WP Rocket с CDN

WP Rocket полностью совместим с Cloudflare и дополняет его.

Использование нашей надстройки Cloudflare в большинстве случаев не является обязательным требованием, это просто удобство. После того, как вы правильно настроите свою учетную запись Cloudflare, она будет активна для вашего сайта независимо от того, используете ли вы надстройку WP Rocket. Надстройка просто предоставляет удобный способ настроить некоторые параметры.

Однако, если вы используете функцию Cloudflare Cache Everything, для синхронизации очистки кеша потребуется настроить наше дополнение.

Первым шагом для их совместного использования является добавление вашего сайта в вашу учетную запись Cloudflare. Если вы еще этого не сделали, следуйте руководству Cloudflare: создайте учетную запись Cloudflare и добавьте веб-сайт. Затем измените серверы доменных имен на Cloudflare.

Cloudflare может выполнять процесс минимизации файлов CSS и JS, а также WP Rocket, но WP Rocket также имеет возможность объединять файлы, чего не делает Cloudflare.
Мы рекомендуем активировать минификацию в Cloudflare, а также в WP Rocket, чтобы получить наилучшие результаты.

Примечание. Если вы используете дополнение WP Rocket Cloudflare, вам больше не нужен официальный плагин Cloudflare.
WP Rocket предоставляет те же функции, что и предоставление исходных IP-адресов.

Дополнение Cloudflare от WP Rocket

Предпосылки

У вас должен быть прямой доступ к вашей собственной учетной записи Cloudflare, чтобы получить информацию о ключе API, необходимую для настройки надстройки. Если вы используете Cloudflare через интеграцию, предоставленную вашим хостом, вы не сможете получить эту информацию и, следовательно, вы не сможете использовать надстройку, но Cloudflare по-прежнему будет активен на вашем сайте.

На вкладке настроек Дополнения вы увидите дополнение Cloudflare. Переключите Статус надстройки на ВКЛ:

Затем нажмите кнопку Изменить параметры. Вы перейдете на вкладку Cloudflare, которая появилась на вкладке Дополнения:

Вам нужно установить следующие настройки:

Глобальный ключ API

Как найти свой глобальный ключ API:

Определить ключ API в wp-config.php

Если это подходит для вашего варианта использования, вы также можете определить свой ключ API в файле wp-config.php. Это может быть полезно, если у вас есть несколько сайтов под одной учетной записью Cloudflare. Вот как вы можете добавить его в свой файл wp-config.php (не забудьте заменить второе значение в примере своим собственным ключом API):

С помощью следующей строки кода в wp-config.php вы также можете скрыть поле ключа API в настройках WP Rocket, если предпочитаете держать его в секрете:

Электронная почта аккаунта

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

Идентификатор зоны

Введите идентификатор зоны для своего домена. Это можно найти на странице Обзор для вашего домена в вашей учетной записи Cloudflare:

Режим разработки

Это включает или выключает режим разработки Cloudflare. Режим разработки позволяет временно приостановить функции граничного кэширования и минимизации Cloudflare.

Знаете ли вы? Активация режима разработки может быть особенно полезна, когда вы вносите изменения в кешируемое содержимое (например, изображения, CSS или JavaScript) и хотите сразу же увидеть эти изменения.

Оптимальные настройки

Настоятельно рекомендуется активировать этот параметр. WP Rocket автоматически выбирает предопределенный набор параметров для Cloudflare, чтобы повысить производительность вашего сайта:

Установите уровень кэширования Cloudflare на Стандартный
Активируйте минимизацию
Деактивируйте Rocket Loader (название не имеет отношения к WP Rocket)
Установите кеш браузера Cloudflare на 1 год

Относительный протокол

Внимание! Этот параметр следует активировать только в том случае, если вы используете функцию гибкого SSL Cloudflare.
Вы НЕ должны активировать его, если ваш сайт WordPress работает на полном SSL!

Когда я должен Cизучить все файлы кеша Cloudflare?

По умолчанию нет необходимости нажимать эту кнопку каждый раз, когда вы очищаете кеш WP Rocket.

Это очистит кеш Cloudflare, и в основном это необходимо для устранения неполадок, если вы внесли изменения в свои файлы, не меняя их имен файлов, или когда вы думаете, что Cloudflare по какой-либо причине обслуживает устаревшие файлы.

Если вы включили Кэшировать все, кеш Cloudflare будет очищаться автоматически одновременно с кешем WP Rocket.

Устранение неполадок

Самой распространенной причиной проблем при использовании Cloudflare является функция Rocket Loader.Если вы видите проблемы с отображением или ошибки JavaScript во время работы Cloudflare, отключите Rocket Loader и очистите кеш, чтобы увидеть, решит ли это проблему. (Rocket Loader никак не связан с WP Rocket.)

Спасибо за отзыв. Не удалось отправить отзыв. Повторите попытку позже.

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

Что касается устранения неполадок на вашем сайте WordPress, очистка различных кешей является распространенным первым шагом. В этом руководстве вы узнаете, как очистить различные кеши на своем веб-сайте WordPress, в том числе:

История веб-браузера/кэш
Подключаемые модули кэширования WordPress
Cloudflare и другие сети доставки контента

Если вы ищете качественный виртуальный хостинг для своего веб-сайта WordPress, мы настоятельно рекомендуем хостинг A2. Они предлагают неограниченное пространство на SSD, бесплатное автоматическое резервное копирование сайта, оптимизированный для скорости хостинг и круглосуточную техническую поддержку гуру 365/7.

Оглавление

Что такое кэширование и почему оно важно?

При кэшировании обычно сохраняются статические версии контента вашего веб-сайта. Это позволяет WordPress обходить выполнение тяжелых PHP-скриптов, что помогает повысить скорость вашего сайта.

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

Плагины кэширования WordPress. Существует ряд доступных решений для кэширования, наиболее популярными из которых являются плагины кэширования WordPress, такие как W3 Total Cache, WP Super Cache и WP Rocket. Они предоставляют простой в использовании интерфейс для управления тем, какие элементы следует кэшировать, когда истекает срок действия кэшированного содержимого, а также для очистки кэша по требованию.

Управляемые веб-хостинги WordPress. Некоторые хостинговые компании используют встроенные инструменты кэширования на своих серверах, поэтому нет необходимости использовать плагин. Другие хосты имеют свои собственные подключаемые модули кэширования.

Сети доставки контента — MaxCDN и Cloudflare также используют кэширование контента вашего сайта на серверах по всему миру. Я использую бесплатную версию Cloudflare для большинства своих сайтов.

Брандмауэры веб-приложений. Если вы используете подключаемый модуль безопасности, такой как Sucuri или Wordfence Security, их брандмауэры также используют кэширование, чтобы ускорить работу вашего сайта и минимизировать время простоя.

Хотя кэширование необходимо для ускорения работы вашего сайта и значительного улучшения взаимодействия с пользователем, оно также может вызвать некоторые проблемы. Самое неприятное, что я испытал при кэшировании, — это невозможность сразу увидеть изменения, которые я внес на свой сайт. Чтобы решить эту проблему, вам просто нужно очистить все кэши и перезагрузить страницу, которую вы изменили во внешнем интерфейсе.

Теперь, когда вы немного знаете о различных инструментах кэширования, давайте рассмотрим, как удалить их все на своем веб-сайте WordPress.

Очистите кэш веб-браузера

Первый шаг – очистить историю/кеш браузера. Современные веб-браузеры хранят статический контент следующих типов:

таблицы стилей
JavaScript
изображения

Это делается для ускорения последующих посещений того же сайта.

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

Google Chrome. Сначала нажмите на три вертикальные точки в правом верхнем углу браузера, наведите указатель мыши на «История» и нажмите «История» во втором раскрывающемся списке.

На следующей странице нажмите ссылку "Очистить данные браузера" слева.

Во всплывающем окне выберите «Все время» в раскрывающемся списке, убедитесь, что все флажки установлены, и нажмите кнопку «Очистить данные».

Firefox. Нажмите кнопку меню (три горизонтальные линии) в правом верхнем углу окна браузера. Затем нажмите «Параметры».

На левой боковой панели выберите Конфиденциальность и безопасность. Прокрутите вниз до раздела «История» и нажмите кнопку «Очистить историю».

Затем выберите Все под временным диапазоном, чтобы очистить раскрывающийся список. Убедитесь, что все флажки в разделе «История» отмечены флажками, и нажмите кнопку «ОК».

Safari. Откройте меню Safari на верхней панели и выберите в раскрывающемся списке пункт «Очистить историю и данные веб-сайта».

Затем выберите всю историю из раскрывающегося списка во всплывающем окне. Наконец, нажмите кнопку «Очистить историю».

Совет для профессионалов: вместо очистки кеша вы можете открыть свой сайт в режиме инкогнито или в приватном окне браузера, чтобы увидеть, видны ли ваши изменения.

Очистите кеш в плагине кэширования WordPress

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

Очистить кеш в W3 Total Cache

В этом популярном плагине процесс очень прост.

Очистить кеш в WP Super Cache

Другой популярный бесплатный плагин для кэширования WordPress, WP Super Cache, также позволяет очень легко очищать кешированный контент сайта.

Очистить кеш в WP Rocket (платная опция)

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

Очистить файлы кеша с помощью WP Rocket очень просто, всего за пару кликов.

Очистить кеш в CDN Cloudflare

С помощью Cloudflare вы можете очистить кеш, войдя в свою учетную запись или из панели управления WordPress с помощью плагина.

На следующей странице нажмите ссылку Конфигурация в левом верхнем углу. Затем нажмите синюю кнопку "Очистить все".

В появившемся всплывающем окне нажмите красную кнопку "Очистить все".

Очистка кеша с помощью подключаемого модуля Cloudflare. В панели управления WordPress выберите «Настройки» > «Cloudflare».

На следующей странице нажмите синюю кнопку "Очистить кэш" и выберите "Очистить все" в раскрывающемся списке.

Во всплывающем окне нажмите кнопку "Очистить все".

Мой опыт. Я лично сталкивался с проблемами кэширования на нескольких веб-сайтах, которыми я управляю, в том числе на веб-сайте моего отца. Иногда он звонит мне и говорит что-то вроде «мои изменения не отображаются в интерфейсе». Затем я продолжаю спрашивать: «Вы очистили кеш браузера?» Если он скажет, что да, я продолжу: «Ну, попробуйте очистить кеш плагина кэширования в WordPress». Если он сделал и то, и другое, я говорю ему очистить кеш Cloudflare CDN.

Заключение

Если у вас возникают проблемы, из-за которых ваши изменения не видны во внешнем интерфейсе, это, вероятно, вызвано историей/кэшем вашего веб-браузера, подключаемым модулем/инструментом кэширования на сервере хостинга или сетью доставки контента (если вы пользуемся одним). Надеюсь, теперь, когда вы прочитали этот пост, вы поняли немного больше о кэшировании. Когда дело доходит до оптимизации сайта, ее нельзя упускать из виду.

Если вы нашли этот пост полезным, поделитесь им и распространите информацию!

Хотите еще что-нибудь подобное? Подпишитесь на мою рассылку, чтобы получать полезные руководства, советы и рекомендации по WordPress.

Читайте также: