Как подключить Cloudflare

Объявление об откатах и ​​доступе через API для страниц

Пару месяцев назад мы объявили об общедоступности Cloudflare Pages: простейшего способа размещения и совместной разработки веб-сайтов в глобальной сети Cloudflare. Было потрясающе видеть более 20000 невероятных сайтов, созданных пользователями, и слышать ваши отзывы. С тех пор мы выпустили запрошенные пользователями функции, такие как перенаправление URL-адресов, веб-аналитика и интеграция Access.

Мы прислушиваемся к вашим отзывам и сегодня анонсируем две новые функции: откаты и API страниц. Откаты развертывания позволяют размещать код производственного уровня на Pages, не беспокоясь о сбоях в сборках, приводящих к простою веб-сайта. API дает вам возможность создавать настраиваемые функции и лучше интегрировать Pages с вашими рабочими процессами разработки. Теперь использовать Pages для производственного хостинга стало еще проще.

Откаты

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

Чтобы вернуться к предыдущей сборке, просто нажмите кнопку «Откатить к этому развертыванию» в меню списка развертываний или на определенной странице развертывания.

Объявление об откатах и ​​доступе через API для страниц

Доступ к API

Pages API предоставляет вам конечные точки, чтобы вы могли легко создавать автоматизацию и интегрировать Pages в ваш рабочий процесс разработки. Обратитесь к документации API для полной разбивки типов объектов и конечных точек. Для начала перейдите на страницу токенов API Cloudflare и скопируйте свой «Глобальный ключ API». Теперь вы можете аутентифицироваться и делать запросы к API, используя свой адрес электронной почты и ключ аутентификации в заголовках запросов.

Например, вот запрос API для получения всех проектов в учетной записи.

Запрос (пример)

curl -X GET "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects" 
     -H "X-Auth-Email: {email}" 
     -H "X-Auth-Key: {auth_key}"

Ответ (пример)

{
  "success": true,
  "errors": [],
  "messages": [],
  "result": {
    "name": "NextJS Blog",
    "id": "7b162ea7-7367-4d67-bcde-1160995d5",
    "created_on": "2017-01-01T00:00:00Z",
    "subdomain": "helloworld.pages.dev",
    "domains": [
      "customdomain.com",
      "customdomain.org"
    ],
    "source": {
      "type": "github",
      "config": {
        "owner": "cloudflare",
        "repo_name": "ninjakittens",
        "production_branch": "main",
        "pr_comments_enabled": true,
        "deployments_enabled": true
      }
    },
    "build_config": {
      "build_command": "npm run build",
      "destination_dir": "build",
      "root_dir": "/",
      "web_analytics_tag": "cee1c73f6e4743d0b5e6bb1a0bcaabcc",
      "web_analytics_token": "021e1057c18547eca7b79f2516f06o7x"
    },
    "deployment_configs": {
      "preview": {
        "env_vars": {
          "BUILD_VERSION": {
            "value": "3.3"
          }
        }
      },
      "production": {
        "env_vars": {
          "BUILD_VERSION": {
            "value": "3.3"
          }
        }
      }
    },
    "latest_deployment": {
      "id": "f64788e9-fccd-4d4a-a28a-cb84f88f6",
      "short_id": "f64788e9",
      "project_id": "7b162ea7-7367-4d67-bcde-1160995d5",
      "project_name": "ninjakittens",
      "environment": "preview",
      "url": "https://f64788e9.ninjakittens.pages.dev",
      "created_on": "2021-03-09T00:55:03.923456Z",
      "modified_on": "2021-03-09T00:58:59.045655",
      "aliases": [
        "https://branchname.projectname.pages.dev"
      ],
      "latest_stage": {
        "name": "deploy",
        "started_on": "2021-03-09T00:55:03.923456Z",
        "ended_on": "2021-03-09T00:58:59.045655",
        "status": "success"
      },
      "env_vars": {
        "BUILD_VERSION": {
          "value": "3.3"
        },
        "ENV": {
          "value": "STAGING"
        }
      },
      "deployment_trigger": {
        "type": "ad_hoc",
        "metadata": {
          "branch": "main",
          "commit_hash": "ad9ccd918a81025731e10e40267e11273a263421",
          "commit_message": "Update index.html"
        }
      },
      "stages": [
        {
          "name": "queued",
          "started_on": "2021-06-03T15:38:15.608194Z",
          "ended_on": "2021-06-03T15:39:03.134378Z",
          "status": "active"
        },
        {
          "name": "initialize",
          "started_on": null,
          "ended_on": null,
          "status": "idle"
        },
        {
          "name": "clone_repo",
          "started_on": null,
          "ended_on": null,
          "status": "idle"
        },
        {
          "name": "build",
          "started_on": null,
          "ended_on": null,
          "status": "idle"
        },
        {
          "name": "deploy",
          "started_on": null,
          "ended_on": null,
          "status": "idle"
        }
      ],
      "build_config": {
        "build_command": "npm run build",
        "destination_dir": "build",
        "root_dir": "/",
        "web_analytics_tag": "cee1c73f6e4743d0b5e6bb1a0bcaabcc",
        "web_analytics_token": "021e1057c18547eca7b79f2516f06o7x"
      },
      "source": {
        "type": "github",
        "config": {
          "owner": "cloudflare",
          "repo_name": "ninjakittens",
          "production_branch": "main",
          "pr_comments_enabled": true,
          "deployments_enabled": true
        }
      }
    },
    "canonical_deployment": {
      "id": "f64788e9-fccd-4d4a-a28a-cb84f88f6",
      "short_id": "f64788e9",
      "project_id": "7b162ea7-7367-4d67-bcde-1160995d5",
      "project_name": "ninjakittens",
      "environment": "preview",
      "url": "https://f64788e9.ninjakittens.pages.dev",
      "created_on": "2021-03-09T00:55:03.923456Z",
      "modified_on": "2021-03-09T00:58:59.045655",
      "aliases": [
        "https://branchname.projectname.pages.dev"
      ],
      "latest_stage": {
        "name": "deploy",
        "started_on": "2021-03-09T00:55:03.923456Z",
        "ended_on": "2021-03-09T00:58:59.045655",
        "status": "success"
      },
      "env_vars": {
        "BUILD_VERSION": {
          "value": "3.3"
        },
        "ENV": {
          "value": "STAGING"
        }
      },
      "deployment_trigger": {
        "type": "ad_hoc",
        "metadata": {
          "branch": "main",
          "commit_hash": "ad9ccd918a81025731e10e40267e11273a263421",
          "commit_message": "Update index.html"
        }
      },
      "stages": [
        {
          "name": "queued",
          "started_on": "2021-06-03T15:38:15.608194Z",
          "ended_on": "2021-06-03T15:39:03.134378Z",
          "status": "active"
        },
        {
          "name": "initialize",
          "started_on": null,
          "ended_on": null,
          "status": "idle"
        },
        {
          "name": "clone_repo",
          "started_on": null,
          "ended_on": null,
          "status": "idle"
        },
        {
          "name": "build",
          "started_on": null,
          "ended_on": null,
          "status": "idle"
        },
        {
          "name": "deploy",
          "started_on": null,
          "ended_on": null,
          "status": "idle"
        }
      ],
      "build_config": {
        "build_command": "npm run build",
        "destination_dir": "build",
        "root_dir": "/",
        "web_analytics_tag": "cee1c73f6e4743d0b5e6bb1a0bcaabcc",
        "web_analytics_token": "021e1057c18547eca7b79f2516f06o7x"
      },
      "source": {
        "type": "github",
        "config": {
          "owner": "cloudflare",
          "repo_name": "ninjakittens",
          "production_branch": "main",
          "pr_comments_enabled": true,
          "deployments_enabled": true
        }
      }
    }
  },
  "result_info": {
    "page": 1,
    "per_page": 100,
    "count": 1,
    "total_count": 1
  }
}

Вот еще один быстрый пример использования API для отката к предыдущему развертыванию:

Запрос (пример)

curl -X POST "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments/{deployment_id}/rollback" 
     -H "X-Auth-Email: {email}" 
     -H "X-Auth-Key: {auth_key"

Ответ (пример)

{
  "success": true,
  "errors": [],
  "messages": [],
  "result": {
    "id": "f64788e9-fccd-4d4a-a28a-cb84f88f6",
    "short_id": "f64788e9",
    "project_id": "7b162ea7-7367-4d67-bcde-1160995d5",
    "project_name": "ninjakittens",
    "environment": "preview",
    "url": "https://f64788e9.ninjakittens.pages.dev",
    "created_on": "2021-03-09T00:55:03.923456Z",
    "modified_on": "2021-03-09T00:58:59.045655",
    "aliases": [
      "https://branchname.projectname.pages.dev"
    ],
    "latest_stage": {
      "name": "deploy",
      "started_on": "2021-03-09T00:55:03.923456Z",
      "ended_on": "2021-03-09T00:58:59.045655",
      "status": "success"
    },
    "env_vars": {
      "BUILD_VERSION": {
        "value": "3.3"
      },
      "ENV": {
        "value": "STAGING"
      }
    },
    "deployment_trigger": {
      "type": "ad_hoc",
      "metadata": {
        "branch": "main",
        "commit_hash": "ad9ccd918a81025731e10e40267e11273a263421",
        "commit_message": "Update index.html"
      }
    },
    "stages": [
      {
        "name": "queued",
        "started_on": "2021-06-03T15:38:15.608194Z",
        "ended_on": "2021-06-03T15:39:03.134378Z",
        "status": "active"
      },
      {
        "name": "initialize",
        "started_on": null,
        "ended_on": null,
        "status": "idle"
      },
      {
        "name": "clone_repo",
        "started_on": null,
        "ended_on": null,
        "status": "idle"
      },
      {
        "name": "build",
        "started_on": null,
        "ended_on": null,
        "status": "idle"
      },
      {
        "name": "deploy",
        "started_on": null,
        "ended_on": null,
        "status": "idle"
      }
    ],
    "build_config": {
      "build_command": "npm run build",
      "destination_dir": "build",
      "root_dir": "/",
      "web_analytics_tag": "cee1c73f6e4743d0b5e6bb1a0bcaabcc",
      "web_analytics_token": "021e1057c18547eca7b79f2516f06o7x"
    },
    "source": {
      "type": "github",
      "config": {
        "owner": "cloudflare",
        "repo_name": "ninjakittens",
        "production_branch": "main",
        "pr_comments_enabled": true,
        "deployments_enabled": true
      }
    }
  }
}

Попробуйте выполнить запрос API с одним из своих проектов, заменив {account_id}, {deployment_id}, {email} и {auth_key}. Вы можете найти свой account_id в адресной строке URL-адреса, перейдя на панель управления Cloudflare. (Бывший: 41643ed677c7c7gba4x463c4zdb9563c).

Обратитесь к документации API для полной разбивки типов объектов и конечных точек.

Использование Pages API на Workers

Pages API стал еще более мощным и простым в использовании с Cloudflare Workers: это самый простой способ глобального развертывания бессерверных функций. Ниже приведены три способа использования Pages API на Workers.

1. Запуск новой сборки каждый час: Предположим, у вас есть CMS, которая извлекает данные из живых источников для компиляции статического вывода. Вы можете поддерживать статический контент как можно более свежим, периодически запуская новые сборки с помощью API. Это легко сделать с Workers, использующими триггеры Cron, поэтому давайте рассмотрим пример.

Во-первых, давайте создадим нового воркера, перейдя к worker.new. Если вы раньше не использовали Workers, прочтите руководство по началу работы, чтобы узнать больше. Однако вам необходимо создать проект Pages, чтобы следить за ним. Затем вы можете скопировать и вставить этот шаблон для нового работника. Затем настройте такие значения, как {account_id}, {project_name}, {auth_key} и {your_email}.

const endpoint = "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments";
const email = "{your_email}";
addEventListener("scheduled", (event) => {
  event.waitUntil(handleScheduled(event.scheduledTime));
});
async function handleScheduled(request) {
  const init = {
    method: "POST",
    headers: {
      "content-type": "application/json;charset=UTF-8",
      "X-Auth-Email": email,
      "X-Auth-Key": API_KEY,
      //We recommend you store API keys as secrets using the Workers dashboard or using Wrangler as documented here https://developers.cloudflare.com/workers/cli-wrangler/commands#secret
    },
  };
  const response = await fetch(endpoint, init);
  return new Response(200);
}

Объявление об откатах и ​​доступе через API для страниц

Чтобы завершить настройку скрипта, щелкните стрелку назад в верхнем левом углу окна и перейдите на вкладку настроек. Затем установите переменную среды «API_KEY» со значением вашего глобального ключа Cloudflare и нажмите «Зашифровать», а затем «Сохранить».

Сценарий просто отправляет POST-запрос в конечную точку развертывания, чтобы запустить новую сборку. Нажмите «Быстрое редактирование», чтобы вернуться в редактор кода и завершить тестирование скрипта. Вы можете протестировать свою конфигурацию и сделать запрос, нажав кнопку «Запускать запланированное событие» на вкладке «Расписание» рядом с вкладками «HTTP» и «Предварительный просмотр». Вы должны увидеть новую сборку в очереди на вашем проекте через панель управления Pages. Теперь вы можете нажать «Сохранить и развернуть», чтобы опубликовать свою работу. Наконец, вернитесь на страницу настроек рабочего, щелкнув стрелку назад в верхнем левом углу окна.

Все, что осталось сделать, это установить триггер cron для периодического запуска этого Worker’а на вкладке «Триггеры». Нажмите «Добавить триггер Cron».

Объявление об откатах и ​​доступе через API для страниц

Затем мы можем ввести «0 * * * *», чтобы запускать сборку каждый час.

Объявление об откатах и ​​доступе через API для страниц

Наконец, нажмите «Сохранить», и ваша автоматизация с использованием Pages API будет запускать новую сборку каждый час.

2. Удаление старых развертываний через неделю.: Pages размещает и обслуживает все развертывания проекта по ссылкам для предварительного просмотра. Предположим, вы хотите сохранить свой проект относительно приватным и предотвратить доступ к старым развертываниям. Вы можете использовать API для удаления развертываний через месяц, чтобы они больше не были общедоступными в Интернете. Это легко сделать с Workers с помощью триггеров Cron.

3. Обмен информацией о проекте: Представьте, что вы работаете в команде разработчиков, использующей Pages для создания наших веб-сайтов. Вероятно, вам нужен простой способ поделиться ссылками на предварительный просмотр развертывания и статусом сборки без необходимости делиться учетными записями Cloudflare. Используя API, вы можете легко обмениваться информацией о проекте, включая статус развертывания и ссылки для предварительного просмотра, и предоставлять этот контент в виде HTML из Cloudflare Worker.

Найдите здесь фрагменты кода для всех трех примеров.

Заключение

Мы продолжим делать API более мощным с помощью таких функций, как поддержка готовых развертываний в будущем. Мы рады видеть, что вы создаете с помощью API, и надеемся, что вам понравятся откаты. В Cloudflare мы стремимся сделать Pages максимально удобными для разработчиков и всегда ценим ваши отзывы. Приходите к нам в чат и делитесь отзывами о Workers Discord (у нас есть специальный канал # pages-help!).