← Cloudflare Pages / pages / how-to

Использование Direct Upload с непрерывной интеграцией

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

В каталоге проекта установите Wrangler чтобы вы могли развернуть папку с предварительно собранными ресурсами, выполнив следующую команду:

# Publish created project
$ CLOUDFLARE_ACCOUNT_ID=<ACCOUNT_ID> npx wrangler pages deploy <DIRECTORY> --project-name=<PROJECT_NAME>

Чтобы создать API-токен:

1. На панели управления Cloudflare перейдите к разделу API-токены страницу.

   Перейдите в Токены API аккаунта ↗

2. Выберите Create Token.

3. В разделе Custom Token, выберите Начало работы.

4. Укажите имя API-токена в поле Имя токена поле.

5. В разделе Разрешения, выберите Аккаунт, Cloudflare Pages и Изменить:

6. Выберите Continue to summary > Create Token.

Теперь, когда вы создали API-токен, вы можете использовать его для отправки проекта с платформ непрерывной интеграции.

Чтобы найти свой ID учётной записи, перейдите в Zone Overview странице панели управления Cloudflare.

Найдите идентификатор своей учётной записи (Account ID) в API раздел в меню справа.

Если у вас еще не добавлена зона, добавьте ее, выбрав Add > Подключение домена. Вы можете приобрести домен на Регистратор Cloudflare.

GitHub Actions ↗ это платформа непрерывной интеграции и непрерывной доставки (CI/CD), позволяющая автоматизировать сборку, тестирование и развёртывание при работе с GitHub. Вы можете создавать workflow, которые собирают и тестируют каждый pull request в вашем репозитории или разворачивают объединённые pull request в продакшен.

После настройки проекта вы можете настроить GitHub Action, который с помощью Wrangler будет автоматизировать последующие деплои.

В настроенном вами GitHub Action для отправки проекта в Cloudflare Pages требуются переменные окружения. Чтобы добавить значения этих переменных окружения в репозиторий проекта на GitHub:

1. Перейдите в репозиторий своего проекта в GitHub.
2. Под названием репозитория выберите Настройки.
3. Выберите Секреты > Действия > Новый секрет репозитория.
4. Создайте один секрет и поместите CLOUDFLARE_ACCOUNT_ID в качестве имени со значением, равным идентификатору вашей учётной записи Cloudflare (Account ID).
5. Создайте ещё один секрет и поместите CLOUDFLARE_API_TOKEN в качестве имени со значением, равным вашему API-токену Cloudflare.

Значение вашего идентификатора аккаунта Cloudflare и API-токена Cloudflare добавьте в качестве CLOUDFLARE_ACCOUNT_ID и CLOUDFLARE_API_TOKEN, соответственно. Это обеспечит безопасность секретов, и при каждом запуске вашего Action он будет обращаться к этим секретам.

Создайте .github/workflows/pages-deployment.yaml файл в корне проекта. Файл .github/workflows/pages-deployment.yaml файл будет содержать задания, которые вы укажете в запросе, а именно: on: [push] в этом случае. Это также может быть pull request. Подробное объяснение синтаксиса GitHub Actions приведено в официальная документация ↗.

В вашем pages-deployment.yaml файл, скопируйте туда следующее содержимое:

on: [push]
jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
    name: Deploy to Cloudflare Pages
    steps:
      - name: Checkout
        uses: actions/checkout@v6
      # Run your project's build step
      # - name: Build
      #   run: npm install && npm run build
      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy YOUR_DIRECTORY_OF_STATIC_ASSETS --project-name=YOUR_PROJECT_NAME
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

В приведённом выше блоке кода вы настроили Action, который запускается при push кода в репозиторий. Замените YOUR_PROJECT_NAME с именем вашего проекта Cloudflare Pages и YOUR_DIRECTORY_OF_STATIC_ASSETS с выходной директорией вашего проекта соответственно.

${{ secrets.GITHUB_TOKEN }} будет автоматически предоставлен GitHub Actions с contents: read и deployments: write разрешение. Это позволит нашему Cloudflare Pages action создавать Deployment от вашего имени.

CircleCI ↗ является ещё одной платформой непрерывной интеграции и доставки (CI/CD), которая позволяет автоматизировать сборку, тестирование и развёртывание. Её можно настроить для эффективного выполнения сложных конвейеров с кешированием, кешированием слоёв Docker и классами ресурсов.

Как и GitHub Actions, CircleCI может использовать Wrangler для непрерывного развёртывания ваших проектов при каждом push в код.

После того как вы создадите Cloudflare API-токен и найдёте свой идентификатор аккаунта в панели управления, добавьте их в панель управления CircleCI, чтобы использовать в проекте как переменные окружения.

Чтобы добавить переменные окружения, в веб-приложении CircleCI:

1. Перейдите в свой проект Pages > Настройки.
2. Выберите Проекты в боковом меню.
3. Нажмите кнопку с многоточием (...) в строке проекта. Появится опция добавления переменных окружения.
4. Выберите Переменные окружения > Add Environment Variable.
5. Введите имя и значение новой переменной окружения, то есть ваши учётные данные Cloudflare (CLOUDFLARE_ACCOUNT_ID и CLOUDFLARE_API_TOKEN).

Создайте .circleci/config.yml файл в корне проекта. Этот файл содержит задания, которые выполняются в порядке, заданном в workflow. В вашем config.yml файл, скопируйте туда следующее содержимое:

version: 2.1
jobs:
  Publish-to-Pages:
    docker:
      - image: cimg/node:18.7.0

    steps:
      - checkout
      # Run your project's build step
      - run: npm install && npm run build
      # Publish with wrangler
      - run: npx wrangler pages deploy dist --project-name=<PROJECT NAME> # Replace dist with the name of your build folder and input your project name

workflows:
  Publish-to-Pages-workflow:
    jobs:
      - Publish-to-Pages

При использовании CircleCI рабочий процесс непрерывной интеграции разбивается на задачи (jobs). В блоке кода выше видно, что сначала определяется список задач, которые запускаются при каждом коммите. Например, репозиторий будет выполняться на предварительно собранном образе docker cimg/node:18.7.0. Сначала он извлекает репозиторий с версией Node, указанной в образе.

Команду Wrangler можно изменить с помощью любых wrangler pages deploy параметры.

После выполнения всех указанных шагов определите workflow в конце вашего файла. Подробнее о создании пользовательского процесса с CircleCI можно узнать в официальная документация ↗.

Travis CI представляет собой инструмент непрерывной интеграции с открытым исходным кодом, который выполняет отдельные задачи рабочего процесса вашего проекта, такие как обработка pull request и push кода. Travis CI можно интегрировать с проектами GitHub, базами данных и другими предустановленными сервисами, включёнными в конфигурацию сборки. Для использования Travis CI понадобится учётная запись GitHub, Bitbucket, GitLab или Assembla.

В проекте Travis добавьте учётные данные Cloudflare, сгенерированные в панели управления Cloudflare, чтобы использовать их в travis.yml файл. Перейдите в панель Travis CI и выберите свой текущий проект > Дополнительные параметры > Настройки > Переменные окружения.

Задайте имя и значение переменной окружения, а также ветку, к которой она будет привязана. Также можно настроить приватность значения.

Перейдите в Travis-ci.com ↗ и подключите репозиторий, войдя через предпочитаемого провайдера. В этом руководстве используется GitHub. Далее создайте .travis.yml файл и скопируйте в него следующее:

language: node_js
node_js:
  - "18.0.0" # You can specify more versions of Node you want your CI process to support
branches:
  only:
    - travis-ci-test # Specify what branch you want your CI process to run on
install:
  - npm install

script:
  - npm run build # Switch this out with your build command or remove it if you don't have a build step
  - npx wrangler pages deploy dist --project-name=<PROJECT NAME>

env:
  - CLOUDFLARE_ACCOUNT_ID: { $CLOUDFLARE_ACCOUNT_ID }
  - CLOUDFLARE_API_TOKEN: { $CLOUDFLARE_API_TOKEN }

Это установит версию Node.js на 18. Вы также указали ветки, для которых должна запускаться непрерывная интеграция. Наконец, введите PROJECT NAME в разделе script, и ваш CI-процесс будет работать как ожидается.

Команду Wrangler также можно изменить, добавив любые wrangler pages deploy параметры.