Edge Fonksiyonları

Edge fonksiyonları, isteğinizin projenize ulaşmadan önce Kapsule'nin edge ağında çalışan küçük JavaScript işleyicileridir. Böylece yönlendirmeler, başlık enjeksiyonu, A/B yönlendirmesi ve bot filtrelemesini uygulamanıza gidiş-dönüş yapmadan yapabilirsiniz. Bu kılavuz, bir tane yazma, kabul edilen giriş noktası formları, yol eşleştirmesi, birden fazla fonksiyonun nasıl etkileştiği, dağıtım ve bir fonksiyon hata verdiğinde neler olduğunu kapsar.

Nerede Bulunurlar

Projenizi Orbit'te açın ve Edge functions sekmesine tıklayın. Her fonksiyon bir projeye aittir ve durum rozeti ile listelenir: LIVE, PAUSED, NOT DEPLOYED veya DEPLOY FAILED.

Fonksiyon Oluşturma

1. New function öğesine tıklayın.
2. Name alanını doldurun (en fazla 120 karakter).
3. Path pattern alanını doldurun, bu fonksiyonun çalışması gereken URL deseni.
4. Trigger seçin: Request (orijinden önce), Response (orijinden sonra) veya Both.
5. Environment scope seçin: All environments, Production only veya Preview only.
6. Function body alanında işleyiciyi yazın.
7. Save öğesine tıklayın, ardından Deploy to edge öğesine tıklayın.

request nesnesi her zaman kapsam içindedir ve kaynak 64 KB ile sınırlıdır.

İşleyici Yazma

Edge'deki isteğe yanıt vermek için Response döndürün. İsteği projenize değiştirilmemiş şekilde geçirmek için hiçbir şey döndürmeyin veya undefined döndürün.

export default {
  async fetch(request) {
    const url = new URL(request.url)

    // Redirect /old to /new
    if (url.pathname === '/old') {
      return new Response(null, {
        status: 301,
        headers: { Location: '/new' },
      })
    }

    // Returning nothing passes through to the origin
  },
}

Adlandırılmış fonksiyon formu da çalışır:

export default async function handler(request) {
  // Add a security header to every response
  const response = await fetch(request)
  const headers = new Headers(response.headers)
  headers.set('X-Frame-Options', 'DENY')
  return new Response(response.body, { status: response.status, headers })
}

Desteklenen Giriş Noktası Formları

Yol Desenleri

Path pattern, hangi isteklerin fonksiyonu çalıştıracağına karar verir. / ile başlamalı ve en fazla 2048 karakter olabilir. * herhangi bir karakter dizisini eşleştirir ve ? tek bir karakteri eşleştirir. Joker karakter içermeyen bir desen tam yolu ve altında her şeyi eşleştirir.

request Nesnesi

request standart bir Fetch API Request. URL, yöntemi, başlıkları ve gövdeyi okuyabilirsiniz:

export default {
  async fetch(request) {
    const url    = new URL(request.url)
    const cookie = request.headers.get('cookie') ?? ''
    const ua     = request.headers.get('user-agent') ?? ''

    if (ua.includes('BadBot')) {
      return new Response('Forbidden', { status: 403 })
    }
  },
}

Yaygın Desenler

Eski URL'leri Yönlendir

export default {
  async fetch(request) {
    const url = new URL(request.url)
    const redirects = {
      '/old-about':   '/about',
      '/old-contact': '/contact',
    }
    const dest = redirects[url.pathname]
    if (dest) return Response.redirect(url.origin + dest, 301)
  },
}

Birkaç basit yol-yol hareketi için bunun yerine yerleşik yönlendirme motorunu kullanın: kod gerekmez ve Ayarlar'da yapılandırılır. Bkz. Yönlendirmeleri ve Yeniden Yazmaları Yapılandırma.

Güvenlik Başlıkları Ekle

export default async function handler(request) {
  const response = await fetch(request)
  const headers = new Headers(response.headers)
  headers.set('X-Frame-Options', 'DENY')
  headers.set('X-Content-Type-Options', 'nosniff')
  headers.set('Referrer-Policy', 'strict-origin-when-cross-origin')
  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers,
  })
}

Statik başlık kuralları için kod da gerekmez. Settings hızlı ekle ön ayarları olan HSTS, CSP, no-embed, no-sniff, referrer policy ve CORS için yanıt başlıkları bölümüne sahiptir.

A/B Yönlendirmesi

export default {
  async fetch(request) {
    const url     = new URL(request.url)
    const variant = Math.random() < 0.5 ? 'a' : 'b'
    url.searchParams.set('variant', variant)
    return fetch(url.toString(), request)
  },
}

Ortam Kapsamı

Birden Fazla Fonksiyon Nasıl Etkileşir

Projenizin etkin olan tüm fonksiyonları oluşturuldukları sırada değerlendirilir. Her istek için edge liste boyunca yürür ve yol deseni istek yoluyla eşleşen ve kapsamı ortamı kapsayan ilk fonksiyonu çalıştırır.

• Fonksiyon Response döndürürse gönderilir ve değerlendirme durur.
• Hiçbir şey döndürürse, değerlendirme sonraki eşleşen fonksiyona devam eder.
• Bunların hiçbiri Response döndürmezse, istek normal olarak projenize gider.

Bu, erken oluşturulan geniş /* fonksiyonunun daha sonra oluşturulan daha dar bir fonksiyonu gölgeleyebileceği anlamına gelir, eğer geniş olan Response döndürürse. Spesifik olanları ilk oluşturun veya geniş olanı işlemek istemediği yollar için hiçbir şey döndürmesi için yapın.

Dağıtım

Deploy to edge öğesine tıklayın. Dağıtım, veritabanının geçerli durumundan tüm edge ağı için tek bir birleştirilmiş yönlendirici oluşturur, bu nedenle herhangi bir fonksiyonu etkinleştirme, devre dışı bırakma, düzenleme veya silme her şeyi yeniden yayımlar. Değişiklikler genellikle birkaç saniye içinde etkili olur.

Her fonksiyon satırı, son dağıtımın adımlarını gösteren bir Deploy log ve başarısız olursa hata içeren bir DEPLOY FAILED rozeti tutar.

Pause, fonksiyonu silmeden yönlendiricinin dışına çıkarır; bu, ters giden bir fonksiyonu geri çekmenin en hızlı yoludur. Resume bunu geri koyar.

Fonksiyon Hata Verdiğinde

Bir fonksiyonun içindeki bir istisna edge'de yakalanır. Hata günlüğe kaydedilir ve istek, fonksiyon hiçbir şey döndürmemiş gibi projenize düşer.

Limitler

• Proje başına en fazla 20 fonksiyon. 21. reddedilir.
• Fonksiyon başına en fazla 64 KB kaynak.
• Ad için en fazla 120 karakter ve yol deseni için 2048 karakter.

İlgili Okuma

• Yönlendirmeleri ve Yeniden Yazmaları Yapılandırma, yol kuralları için kodsuz seçenek
• Projenizi Dağıtma
• Orbit'de Dal Önizleme Dağıtımları fonksiyonu üretime ulaşmadan önce test etmek için