Implementeren op Cloudflare Pages

Cloudflare Pages biedt snelle, wereldwijde hosting van statische sites met onbeperkte bandbreedte.

Snel implementeren

1. Ga naar Cloudflare Pages
2. Klik op "Create a project"
3. Koppel je GitHub-repository

Buildconfiguratie

Instelling	Waarde
Framework preset	None
Build command	npm run build
Build output directory	dist
Root directory	/

Omgevingsvariabelen

Voeg deze toe onder Settings → Environment variables:

Variabele	Waarde
NODE_VERSION	18
SIMPLE_MODE	false (optioneel)
VITE_BRAND_NAME	Aangepaste merknaam (optioneel)
VITE_BRAND_LOGO	Logopad relatief aan public/ (optioneel)
VITE_FOOTER_TEXT	Aangepaste footer-/copyrighttekst (optioneel)
VITE_DEFAULT_LANGUAGE	Standaardtaal van de interface, bijv. fr (optioneel)

Configuratiebestand

Maak _headers aan in je map public:

# Required security headers for SharedArrayBuffer (used by LibreOffice WASM)
/*
  Cross-Origin-Embedder-Policy: require-corp
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Resource-Policy: cross-origin

# Pre-compressed LibreOffice WASM binary
/libreoffice-wasm/soffice.wasm.gz
  Content-Type: application/wasm
  Content-Encoding: gzip
  Cache-Control: public, max-age=31536000, immutable

# Pre-compressed LibreOffice WASM data
/libreoffice-wasm/soffice.data.gz
  Content-Type: application/octet-stream
  Content-Encoding: gzip
  Cache-Control: public, max-age=31536000, immutable

# Cache WASM files aggressively
/*.wasm
  Cache-Control: public, max-age=31536000, immutable
  Content-Type: application/wasm

# Service worker
/sw.js
  Cache-Control: no-cache

Belangrijk

De headers Cross-Origin-Embedder-Policy en Cross-Origin-Opener-Policy zijn vereist voor conversies van Word/ODT/Excel/PowerPoint naar PDF. Zonder deze headers is SharedArrayBuffer niet beschikbaar en kan de LibreOffice WASM-engine niet starten.

Maak _redirects aan voor SPA-routing:

/*    /index.html   200

Eigen domein

1. Ga naar je Pages-project
2. Klik op "Custom domains"
3. Voeg je domein toe
4. Cloudflare configureert DNS automatisch als het domein bij Cloudflare staat

Voordelen

• Gratis onbeperkte bandbreedte
• Wereldwijd CDN met 300+ edge-locaties
• Automatische HTTPS
• Previewimplementaties voor pull requests
• Snelle builds

Probleemoplossing

Uploads van grote bestanden

Cloudflare Pages ondersteunt bestanden tot 25 MB. WASM-modules zouden geen probleem moeten zijn, maar als je tegen limieten aanloopt, overweeg dan:

# Split large files during build
npm run build

Groottelimieten van Workers

Gebruik je Cloudflare Workers voor geavanceerde routing, let dan op de limiet van 1 MB voor gratis abonnementen.

CORS-proxyworker (voor digitale handtekeningen)

De tool voor digitale handtekeningen vereist een CORS-proxy om certificaatketens op te halen. Implementeer de meegeleverde worker:

cd cloudflare
npx wrangler login
npx wrangler deploy

Beveiligingsfuncties

Functie	Beschrijving
URL-beperkingen	Alleen certificaat-URL's toegestaan
Bestandsgroottelimiet	Max 10MB per verzoek
Rate limiting	60 verzoeken/IP/min (vereist KV)
Blokkering privé-IP's	Blokkeert localhost en interne IP's

Rate limiting inschakelen

# Create KV namespace
npx wrangler kv namespace create "RATE_LIMIT_KV"

# Add to wrangler.toml with returned ID:
# [[kv_namespaces]]
# binding = "RATE_LIMIT_KV"
# id = "YOUR_ID"

npx wrangler deploy

Bouwen met proxy-URL

VITE_CORS_PROXY_URL=https://your-worker.workers.dev npm run build

Of met Docker:

export VITE_CORS_PROXY_URL="https://your-worker.workers.dev"
DOCKER_BUILDKIT=1 docker build \
  --secret id=VITE_CORS_PROXY_URL,env=VITE_CORS_PROXY_URL \
  -t your-bentopdf .

Opmerking: Zie de README voor de installatie van de HMAC-handtekening.