Introducción

Proyecto demo: https://gitlab.com/xtec/web/cloudflare

Live: https://cloudflare.xtec.app/

Workers

Crea un nuevo proyecto React:

npm create cloudflare@latest cloudflare -- --framework=react --platform=workers

Para la configuración, seleccione las siguientes opciones:

  • Para What would you like to start with?, selecciona Framework Starter.
  • Para Which development framework do you want to use?, selecciona React.

Cambia al directorio del proyecto:

cd cloudflare

Inicia un servidor local para desarrollar el proyecto:

npm run dev

Despliega el proyecto en Cloudflare:

npm run deploy

El proyecto se desplegará en un subdominio *.workers.dev

API

Tu nuevo proyecto también contiene un Worker en ./api/index.ts, que puedes usar como API de backend para tu aplicación React. Si bien tu aplicación React no puede acceder directamente a los enlaces de Workers, sí puede interactuar con ellos a través de este Worker. Puedes realizar fetch()solicitudes desde tu aplicación React al Worker, que a su vez puede gestionar la solicitud y usar los enlaces. Aprende a configurar los enlaces de Workers .

workers/app.ts

https://github.com/tsndr/cloudflare-worker-router

npm i @tsndr/cloudflare-worker-router

Integración continua

https://developers.cloudflare.com/workers/ci-cd/external-cicd/gitlab-cicd/

Resources

CNAME flattening speeds up CNAME resolution and allows you to use a CNAME record at your zone apex (example.com).

This functionality is also what allows you to use a root custom domain with a Cloudflare Pages site.