← Cloudflare Pages / pages / how-to

Použití Direct Upload s průběžnou integrací

Cloudflare Pages umožňuje přímo nahrát předem sestavené soubory, takže pro aplikace můžete použít vlastní kroky sestavení a nasadit je do Pages pomocí Wrangler. Tento návod vás naučí, jak nasadit aplikaci do Pages pomocí kontinuální integrace.

V adresáři projektu nainstalujte Wrangler takže složku s předem sestavenými aktivy můžete nasadit spuštěním následujícího příkazu:

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

Chcete-li vygenerovat token API:

1. V dashboardu Cloudflare přejděte na API Tokens stránce.

   Přejděte na API tokeny účtu ↗

2. Vyberte Create Token.

3. V části Custom Token, vyberte Začínáme.

4. Pojmenujte svůj API token v Název tokenu .

5. V části Oprávnění, vyberte Účet, Cloudflare Pages a Úprava:

6. Vyberte Pokračovat k souhrnu > Create Token.

Nyní, když máte vytvořený API token, ho můžete použít k odesílání svého projektu z platforem pro kontinuální integraci.

Chcete-li zjistit ID svého účtu, přejděte do Zone Overview stránku v Cloudflare dashboardu.

Své ID účtu najdete v API sekci v nabídce na pravé straně.

Pokud jste zatím nepřidali zónu, přidejte ji výběrem Přidat > Připojení domény. Doménu si můžete zakoupit na Registrátor Cloudflare.

GitHub Actions ↗ je platforma pro kontinuální integraci a kontinuální doručování (CI/CD), která umožňuje automatizovat proces sestavení, testování a nasazení při použití GitHubu. Můžete vytvářet workflow, které sestaví a otestuje každý pull request do vašeho repozitáře, nebo nasadí sloučené pull requesty do produkce.

Po nastavení projektu můžete nastavit GitHub Action, která pomocí Wrangler automatizuje vaše další nasazení.

Ve vámi nastavené GitHub Action jsou pro nahrání projektu do Cloudflare Pages potřeba proměnné prostředí. Chcete-li přidat hodnoty těchto proměnných prostředí do repozitáře GitHub vašeho projektu:

1. Přejděte do repozitáře svého projektu na GitHubu.
2. Pod názvem repozitáře vyberte Nastavení.
3. Vyberte Tajné klíče > Akce > New repository secret.
4. Vytvořte jeden secret a vložte do něj CLOUDFLARE_ACCOUNT_ID jako název, jehož hodnotou je vaše Cloudflare Account ID.
5. Vytvořte další tajný klíč a vložte do něj CLOUDFLARE_API_TOKEN jako název, jehož hodnotou je váš Cloudflare API token.

Hodnotu svého Cloudflare account ID a Cloudflare API tokenu přidejte jako CLOUDFLARE_ACCOUNT_ID a CLOUDFLARE_API_TOKEN, v uvedeném pořadí. Tím zajistíte, že tyto tajné klíče zůstanou v bezpečí a při každém spuštění vaší Action k nim bude mít přístup.

Vytvořte .github/workflows/pages-deployment.yaml soubor v kořenovém adresáři vašeho projektu. .github/workflows/pages-deployment.yaml soubor bude obsahovat úlohy, které zadáte v požadavku, konkrétně: on: [push] v tomto případě. Může být také u pull requestu. Podrobné vysvětlení syntaxe GitHub Actions najdete v oficiální dokumentace ↗.

Ve vašem pages-deployment.yaml soubor a zkopírujte do něj následující obsah:

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 }}

Ve výše uvedeném bloku kódu jste nastavili Action, která se spustí při odeslání kódu do repozitáře. Nahraďte YOUR_PROJECT_NAME s názvem vašeho projektu Cloudflare Pages a YOUR_DIRECTORY_OF_STATIC_ASSETS s výstupním adresářem vašeho projektu, v uvedeném pořadí.

${{ secrets.GITHUB_TOKEN }} automaticky poskytne GitHub Actions spolu s contents: read a deployments: write oprávnění. Díky tomu bude moct naše akce Cloudflare Pages vytvářet nasazení vaším jménem.

CircleCI ↗ je další platforma pro průběžnou integraci a průběžné doručování (CI/CD), která umožňuje automatizovat sestavení, testování a nasazení aplikace. Dokáže efektivně spouštět i složité pipeline s využitím cachování, docker layer caching a resource classes.

Podobně jako GitHub Actions může i CircleCI použít Wrangler k průběžnému nasazování vašich projektů při každém odeslání kódu.

Jakmile vygenerujete Cloudflare API token a na dashboardu zjistíte své account ID, budete je muset přidat na dashboard CircleCI, abyste je mohli v projektu použít jako proměnné prostředí.

Přidání proměnných prostředí ve webové aplikaci CircleCI:

1. Přejděte do svého projektu Pages > Nastavení.
2. Vyberte Projekty v postranní nabídce.
3. V řádku projektu vyberte tlačítko se třemi tečkami (...). Zobrazí se možnost přidat proměnné prostředí.
4. Vyberte Proměnné prostředí > Add Environment Variable.
5. Zadejte název a hodnotu nové proměnné prostředí, což jsou vaše přihlašovací údaje Cloudflare (CLOUDFLARE_ACCOUNT_ID a CLOUDFLARE_API_TOKEN).

Vytvořte .circleci/config.yml soubor v kořenovém adresáři vašeho projektu. Tento soubor obsahuje úlohy, které se spustí podle pořadí ve vašem workflow. Ve svém config.yml soubor a zkopírujte do něj následující obsah:

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

Při použití CircleCI se váš workflow průběžné integrace dělí na jednotlivé joby. Z výše uvedeného bloku kódu je vidět, že nejprve definujete seznam jobů, které se spouští při každém commitu. Váš repozitář například poběží na předpřipraveném docker image cimg/node:18.7.0. Nejprve provede checkout repozitáře s verzí Node uvedenou v image.

Příkaz Wrangler můžete upravit libovolným wrangler pages deploy možnosti.

Po provedení všech uvedených kroků definujte workflow na konec souboru. Více o vytváření vlastního procesu pomocí CircleCI se dozvíte z oficiální dokumentace ↗.

Travis CI je open source nástroj pro průběžnou integraci, který se stará o konkrétní úkoly ve workflow projektu, například pull requesty a odesílání kódu. Travis CI lze propojit s vašimi projekty na GitHubu, databázemi a dalšími předinstalovanými službami povolenými v konfiguraci sestavení. Chcete-li Travis CI používat, musíte mít účet služby GitHub, Bitbucket, GitLab nebo Assembla.

Do projektu Travis přidejte přihlašovací údaje Cloudflare, které jste vygenerovali v Cloudflare dashboardu, abyste k nim měli přístup ve svém travis.yml soubor. Přejděte na dashboard Travis CI, vyberte aktuální projekt > Další možnosti > Nastavení > Proměnné prostředí.

Nastavte název a hodnotu proměnné prostředí a větev, ke které má být připojena. Můžete také nastavit, zda je hodnota veřejná, nebo soukromá.

Přejděte na Travis-ci.com ↗ a povolte svůj repozitář přihlášením u preferovaného poskytovatele. Tento průvodce používá GitHub. Dále vytvořte .travis.yml soubor a zkopírujte do něj následující:

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 }

Tím se nastaví verze Node.js na 18. Zároveň jste nastavili větve, na kterých se má spouštět kontinuální integrace. Nakonec zadejte PROJECT NAME v sekci script a váš proces CI by měl fungovat podle očekávání.

Příkaz Wrangler můžete také upravit pomocí libovolných wrangler pages deploy možnosti.