İçindekiler
Hiç uzun bağlantıları kısaltmak için Bitly veya TinyURL gibi araçlar kullandınız mı? Veya bu hizmetlerin nasıl çalıştığını merak ettiniz mi? Belki bir URL kısaltıcı oluşturmak istediniz, ancak bunu yapacak zamanı veya uygun araçları asla bulamadınız. Her durumda, bu konuyla ilgileniyorsanız, bu makale tam size göre.
Bu gönderide, Cloudflare Workers kullanarak temel bir URL kısaltıcı hizmetinin nasıl oluşturulacağını göstereceğiz. URL kısaltıcı hizmetlerinin nasıl çalıştığı hakkında ayrıntılı bilgi vereceğiz, Cloudflare Workers'ın çeşitli özelliklerini tanıtacağız ve Cloudflare Workers'ı kullanmaya başlama konusunda adım adım talimatlar vereceğiz.
İleri atla:
- Cloudflare Çalışanları nedir?
- Projeye genel bakış: URL kısaltıcı hizmeti
- Çevreyi kurmak
- Projeyi oluşturmak
- Cloudflare Çalışanları nasıl çalışır?
- İlk yönlendirme ekleme
- URL'yi kısaltma
- Depolama alanı ekleme
- Cloudflare Çalışanlarını Dağıtma
Başlayalım!
Cloudflare Çalışanları nedir?
Cloudflare Workers, sunucusuz kodu Cloudflare ağına dağıtmanıza olanak tanıyan bir hizmettir. Cloudflare ağı veya Edge, dünyaya yayılmış bir web sunucuları ağıdır. Cloudflare Workers ile ilgili harika bir şey, kodunuzu ölçeklendirme konusunda endişelenmenize gerek olmamasıdır. Ayrıca, kodunuzun içinde bulunduğu saat dilimleri hakkında endişelenmenize gerek yok; Workers'taki kodunuz, dağıtıldıktan saniyeler sonra tüm dünyaya yayılır.
Bunun da ötesinde, Cloudflare Workers, KV adı verilen basit bir anahtar/değer veri deposuyla birlikte gelir. Bu eğitimde, URL'mizi daha kısa oluşturmak için Cloudflare Workers ve KV depolama kombinasyonunu kullanacağız.
Projeye genel bakış: URL kısaltıcı hizmeti
Yönlendirmek istediğiniz web sitelerini sabit kodladığınız, basit, dinamik olmayan bir URL kısaltıcı oluşturarak başlayacağız. Bu, Wrangler'ın (Cloudflare'in resmi CLI aracı) nasıl kullanılacağını öğrenmek için bir giriş görevi görecek ve İşçiler alanındaki temel kavramları gösterecektir.
Ardından, işleri biraz renklendireceğiz ve dinamik URL'ler için destek ekleyeceğiz. Temel olarak, Cloudflare Workers KV mağazasıyla etkileşime geçeceğiz ve URL'nin kısa sürümlerini ve yönlendirmek istediğimiz asıl URL'yi gireceğiz. KV deposundaki veriler aşağıdaki yapıya benzer olacaktır:
'short-url': 'https://my-cool-website.com' 'gönder': 'https://my-cool-site.org/blog/ideas/submit'
Son olarak, kodumuzu üretime dağıtacağız ve dünya genelinde canlı olarak çalıştığını göreceğiz.
Şimdiden heyecanlı mısın? Harika, hadi atlayalım!
Çevreyi kurmak
Bu makaleyi takip etmek için aşağıdakilere ihtiyacınız olacak:
- Node.js ve npm
- kavgacı
- URL kısaltıcıyı test etmek için curl (veya seçtiğiniz tarayıcı)
Yerel bağımlılıklarımı yönetmek için asdf aracını kullanıyorum, ancak tercih ettiğiniz herhangi bir sürüm yöneticisini kullanabilirsiniz. Yazma sırasında, işte benim Düğüm ve npm versiyonum:
$ düğümü --versiyon v18.5.0 $ npm --sürüm 8.12.1
Wrangler, bina için bir komut satırı aracıdır ve son zamanlarda 2.0 sürümünü aldı. Bu yazının amacı doğrultusunda, Wrangler tüm ihtiyaçlarımızı karşılayacaktır. Gelecekte, Wrangler'ın daha sağlam ve zengin özelliklere sahip bir kardeşi olan Miniflare'ı kullanabiliriz. Ancak şimdilik, Wrangler'ı global olarak npm aracılığıyla kuralım:
$ npm kurulum -g [email protected]
Yazma sırasında, en son Wrangler sürümü 2.0.21'dir, bu yüzden onunla devam edeceğiz.
Serin. Artık tüm bağımlılıkları yerine getirdiğimize göre, başlatıcı Cloudflare Worker'ımızı oluşturmak için Wrangler CLI'yi kullanabiliriz.
Projeyi oluşturmak
Wrangler CLI aracı burada çok yardımcı olacaktır.
Başlamak için, projemizi düzgün bir şekilde başlatmak ve kurmak için bir komut çalıştıralım:
$ wrangler init short-it
Bu komut birkaç soru soracaktır. Şimdilik hepsine evet ( y yazarak) yanıtını vereceğiz:
$ wrangler init short-itasistan 2.0.21 -------------------- Paket yöneticisi olarak npm kullanmak.
short-it/wrangler.toml oluşturuldu Bu Worker'ı yönetmek için git'i kullanmak ister misiniz? (y/n)
Wrangler'ın tüm sorularına olumlu yanıt verdiyseniz, proje adı short-it olacak ve içinde aşağıdakiler olacak:
-
.gitdizini, yani onu Git sağlayıcınıza göndermeye hazırsınız -
package.jsondosyası - tüm TypeScript yapılandırmasına sahip
tsconfig.jsondosyası - Çalışanımızdan yanıt almak için basit bir mantıkla
src/index.tsdosyası
Mükemmel. Bakalım bu şey işe yarayacak mı!
short-it dizinine cd yazalım ve yerel geliştirme modunda Wrangler'ı başlatalım:
$ cd kısa-it $ wrangler dev --local
Bu, Çalışanımızı http://localhost:8787/ üzerinde çalıştırmalıdır. Localhost'u ziyaret edersek, basit bir “Merhaba Dünya!” görmeliyiz. İleti:
Yay! Çalıştırdık. Ama nasıl? Hadi daha yakından bakalım.
Cloudflare Çalışanları nasıl çalışır?
İlk mesajımızı yerel olarak oluşturulan Worker'dan aldık, ancak bu tam olarak nasıl çalıştı?
Orada neler olduğunu daha iyi anlamak için oluşturulan src/index.ts dosyasını inceleyelim.
// kaynak/index.ts
/**
* Cloudflare Workers'a hoş geldiniz! Bu senin ilk çalışanın.
*
* - Bir geliştirme sunucusu başlatmak için terminalinizde 'wrangler dev src/index.ts' çalıştırın
* - Çalışanınızı çalışırken görmek için http://localhost:8787/ adresinde bir tarayıcı sekmesi açın
* - Çalışanınızı yayınlamak için `wranglerPublish src/index.ts --name my-worker` komutunu çalıştırın
*
* https://developers.cloudflare.com/workers/ adresinde daha fazla bilgi edinin.
*/
dışa aktarma arayüzü Env {
// KV'ye örnek bağlama. https://developers.cloudflare.com/workers/runtime-apis/kv/ adresinde daha fazla bilgi edinin.
// MY_KV_NAMESPACE: KVNamespace;
//
// Dayanıklı Nesneye örnek bağlama. https://developers.cloudflare.com/workers/runtime-apis/durable-objects/ adresinde daha fazla bilgi edinin.
// MY_DURABLE_OBJECT: DurableObjectNamespace;
//
// R2'ye örnek bağlama. https://developers.cloudflare.com/workers/runtime-apis/r2/ adresinde daha fazla bilgi edinin.
// MY_BUCKET: R2Bucket;
}
varsayılan dışa aktarma {
zaman uyumsuz getirme(
istek: İstek,
ortam: ortam,
ctx: Yürütme Bağlamı
): Söz<Yanıt> {
yeni Response("Merhaba Dünya!");
},
};
Yukarıdaki kod, ortamımız için bir tanım ( Env arayüzü) ve ENV arayüzü ile ilgili birkaç yorum içerir.
Arayüz bu makalenin kapsamı dışında olduğundan, kodun bu kısmını görmezden geleceğiz ve yalnızca ana mantığa odaklanacağız:
// kaynak/index.ts
varsayılan dışa aktarma {
zaman uyumsuz getirme(
istek: İstek,
ortam: ortam,
ctx: Yürütme Bağlamı
): Söz<Yanıt> {
yeni Response("Merhaba Dünya!");
},
};
Burada olan, index.ts bir fetch işlevi vermesidir. Bu, Web Workers'a benzer bir arayüzdür. Aslında, “Cloudflare Workers” adı bu arayüzden kaynaklanmaktadır. Cloudflare Workers, bir tarayıcı yerine Cloudflare altyapısında çalışması dışında Web Workers'a benzer.
Yukarıdaki kodda, fetch işlevi “Merhaba Dünya!” ile yeni bir Response nesnesi döndürür. Metin. Böylece Worker'ımızı çalıştırdığımızda, bu fetch işlevi çağrılır. Ardından, çağrılan fetch işlevi “Merhaba Dünya!” yanıt ve tarayıcıda (veya Çalışanı çağırmak için kullanılan herhangi bir araç aracılığıyla) aldığımız şey budur.
Tamam, Cloudflare Workers'ın temellerini temizledik. Güvenle devam edebiliriz. TypeScript'te yeniyseniz endişelenmeyin; özelliklerini sadece hafifçe kullanacağız. Bunu TypeScript dünyasına hafif bir başlangıç olarak hayal edin.
Harika, devam edelim!
İlk yönlendirme ekleme
Nazik bir başlangıçla mantığımız üzerinde çalışmaya başlayacağız. İlk olarak, URL kısaltıcımızın bir kullanıcıyı farklı bir web sitesine yönlendirmesini sağlayacağız. Bu, sonraki değişikliklerin temeli olacaktır.
Şimdilik, kullanıcının yerel Worker'ımızı ziyaret ettiğinde https://http.cat/ web sitesindeki bir sayfaya gitmesini sağlayacağız.
https://http.cat/ ile aşina değilseniz, farklı HTTP durumları için çeşitli kedi resimleri görüntüleyen eğlenceli bir sitedir. Örneğin, bir kullanıcı Çalışanımıza http://localhost:8787/404 için bir istekte bulunursa, https://http.cat/404 adresine yönlendirilecektir.
Bu yönlendirmeyi gerçekleştirmek için src/index.ts şu şekilde düzenleyeceğiz:
// kaynak/index.ts
// ...
const basePath = "https://http.cat";
varsayılan dışa aktarma {
zaman uyumsuz getirme(
istek: İstek,
_env: Ortam,
_ctx: Yürütme Bağlamı
): Söz<Yanıt> {
const url = yeni URL(request.url);
const { yol adı } = url;
const yönlendirmeURL = basePath + yol adı;
if (yol adı === "/") {
return new Response("Harika Çalışanımızdan Merhaba Dünya!");
}
dönüş Response.redirect(redirectURL, 301);
},
};
Şimdi, http://localhost:8787 adresini ziyaret edersek, aşağıda gösterildiği gibi güncellenmiş bir mesaj alacağız: “Harika Çalışanımızdan Merhaba Dünya!”
Ancak, http://localhost:8787/404 adresine gitmeye çalışırsak, https://http.cat/404 adresine yönlendiriliriz.
Harika, ilk yönlendirmemizi başlattık. Şimdi, URL kısaltıcımızın bazı URL'leri gerçekten kısaltmasını sağlayalım.
URL'yi kısaltma
Şimdilik kısaltılmış URL'lerimizi saklamak için küçük bir veri yapısı ekleyeceğiz. Bunu şu şekilde yapabiliriz:
const shortURL'ler = {
"/blog": "https://pragmaticpineapple.com/",
"/twitter": "https://twitter.com/nikolalsvk",
"/github": "https://github.com/nikolalsvk",
} olarak Kayıt<any, string>;
varsayılan dışa aktarma {
zaman uyumsuz getirme(
istek: İstek,
_env: Ortam,
_ctx: Yürütme Bağlamı
): Söz<Yanıt> {
const url = yeni URL(request.url);
const { yol adı } = url;
const yönlendirmeURL = kısaURL'ler[yol adı];
if (!redirectURL) {
yeni Yanıt döndür(
`Yol için tanımlanmış bir URL yok: '${pathname}', üzgünüm :(`
);
}
dönüş Response.redirect(redirectURL, 301);
},
};
Burada birkaç kısaltılmış URL ekledik:
-
/blogyönlendiriyor -
/twitter, Twitter profilime - ve
/githubGitHub profilime
Çalıştığını görmek için istediğiniz gibi değiştirebilirsiniz. Şimdi, http://localhost:8787/blog adresini ziyaret ettiğimde, blogumun bulunduğu daha uzun bir URL'ye yönlendiriliyorum. İşte sonuç:
Ancak, http://localhost:8787/missing gibi bir yol istersek, aşağıdaki hata mesajını alıyoruz: “Yol için tanımlanmış bir URL yok: '/missing', üzgünüm :(“.
Harika, artık sabit kodlanmış URL'lerimizi ve bunların kısaltılmış sürümlerini bir yerde bir depoya taşımaya hazırız. Neyse ki Cloudflare Workers kullanıyoruz ve KV adında basit bir anahtar/değer depolama sunuyor.
Depolama alanı ekleme
Projemiz için KV'yi gerçekten oluşturmadan önce, Wrangler aracılığıyla Cloudflare Workers'a giriş yapmamız gerekiyor. Bu gereklidir, çünkü Wrangler'ın daha sonra bizim için bir KV örneği oluşturmak için Cloudflare ile iletişime geçmesi gerekecektir.
Cloudflare'da oturum açma
Cloudflare'de oturum açmak için aşağıdaki komutu kullanın:
$ asistan girişi
Cloudflare'da oturum açmanızı isteyen bir tarayıcı açılacaktır. Merak etme; ücretsiz plan, bu eğitim için ihtiyaç duyacağımız her şeyi kapsar ve sizden ödeme istenmez. Devam edin ve kaydolun veya zaten bir hesabınız varsa giriş yapın.
Ardından Cloudflare, Wrangler'a yetki vermek isteyip istemediğinizi soracaktır. Kabul ettikten sonra aşağıdaki ekranı görmelisiniz:
Kayıt işlemi sırasında herhangi bir hıçkırık olmamalıdır. Ancak herhangi bir noktada takılırsanız, hesap oluşturma konusunda Cloudflare'ın kılavuzunu takip edebilirsiniz.
Mükemmel! Artık kaydolduğunuza ve giriş yaptığınıza göre, her şeyin doğru şekilde bağlanıp bağlanmadığını kontrol edelim.
Aşağıdaki komutu kullanın:
$ kavgacı whoami'[email protected]' e-postasıyla ilişkili bir OAuth Simgesi ile oturum açtınız! ┌─────────────────────────────────────────── ────────┐ │ Hesap Adı │ Hesap Kimliği │ ├─────────────────────────────────────────── ────────┤ │ Nikola Đuza Kişisel │ 98a16dfefca0e2ee27e1e79ba590d973 │ └─────────────────────────────────────────── ────────┘
Harika, bir KV ad alanı oluşturmaya hazırız.
KV ad alanı oluşturma
Bir KV ad alanı, Cloudflare ağındaki bir KV örneği olarak düşünülebilir. İki KV ad alanı oluşturacağız: biri uygulamamızın yaşayacağı ve çalışacağı üretim için, diğeri ise önizleme ortamı için. URL kısaltıcımızı test edip geliştirirken önizleme ad alanını kullanacağız.
Aşağıdaki komutlarla Wrangler aracılığıyla KV ad alanlarımızı oluşturacağız:
$ wrangler kv:ad alanı SHORT_URLS oluştur"short-it-SHORT_URLS" başlıklı ad alanı oluşturma
Bu iki komut çalıştırıldıktan ve her iki ad alanı oluşturulduktan sonra, wrangler dev çalıştırdığımızda Wrangler'a bu ad alanlarını kullanmasını söylememiz gerekir.
Projemizin kökündeki wrangler.toml dosyasına KV ad alanları hakkında bilgi ekleyeceğiz. Bunun gibi bir şeye benzemeli:
isim = "kısa-it"
ana = "kaynak/index.ts"
uyumluluk_tarihi = "2022-07-15"
kv_namespaces = [
{ bağlama = "KISA_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e", önizleme_id = "99a72876e5f84cf58de722b1c2080604" }
]
wrangler.toml dosyası, wrangler projemiz hakkında belirli bilgiler veren bir yapılandırma dosyasıdır. Şimdi bağlandık ve KV'mize biraz veri eklemeye hazırız.
KV'ye veri ekleme
Bir sonraki adımımız, verileri KV'ye tohumlamak. Unutmayın, iki ad alanımız var, bu nedenle verilerin her iki yerde de olması için iki komut çalıştırmamız gerekecek. KV'ye /blog girişini ekleyelim:
$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview false
Mükemmel. Şimdi KV'de bir girişimiz var. Ardından, KV'den okuyan ve kullanıcıyı yeniden yönlendiren mantığı ekleyelim.
KV'den okuma
Eski sabit kodlanmış kısa URL'lerimizi hızla kaldıracağız ve KV'ye şu şekilde bir çağrı ekleyeceğiz:
// kaynak/index.ts
dışa aktarma arayüzü Env {
SHORT_URLS: KVNamespace;
}
varsayılan dışa aktarma {
zaman uyumsuz getirme(
istek: İstek,
ortam: ortam,
_ctx: Yürütme Bağlamı
): Söz<Yanıt> {
const url = yeni URL(request.url);
const { yol adı } = url;
const yönlendirmeURL = bekle env.SHORT_URLS.get(yol adı);
if (!redirectURL) {
yeni Yanıt döndür(
`Yol için tanımlanmış bir URL yok: '${pathname}', üzgünüm :(`
);
}
dönüş Response.redirect(redirectURL, 301);
},
};
Burada SHORT_URLS KVNamespace türü olarak ekliyoruz. Bu, uygun verileri almak için KV yöntemlerini çağırmamıza izin verecektir. URL'leri olan sabit kodlanmış nesne yerine, bu sefer await env.SHORT_URLS.get(pathname) kullanıyoruz.
env.SHORT_URLS.get(pathname) çağrısı, KV'den anahtarı almaya çalışır. Bir söz verirse, await . Ancak, verilen pathname için bir değer varsa, kullanıcı bu URL'ye yönlendirilir.
Şimdi, http://localhost:8787/blog adresini ziyaret ettiğimizde, KV'ye koyduğumuz gerçek blog URL'sine yönlendirileceğiz. Bunun gibi görünecek:
Ancak, şimdi kodladığımız diğer URL'lerden herhangi birini ziyaret etmeye çalışırsak, bu URL'lerde bir yönlendirmenin eksik olduğunu söyleyen bir mesaj alırız:
Bu komutları kullanarak Twitter kısaltılmış URL'sini KV'ye hızlıca ekleyelim:
$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview false
Şimdi, http://localhost:8787/twitter'ı yenilediğimizde, Twitter hesabına yönlendirilmemiz gerekiyor.
Harika, şimdi iki kısa URL'miz var: /blog ve /twitter . Hizmetimizi dağıtmaya çalışalım ve üretimde görelim.
Cloudflare Çalışanlarını Dağıtma
Cloudflare Workers dağıtım adımı oldukça kolaydır. wrangler publish yayınını şu şekilde kullanacağız:
$ wrangler yayınla
Artık hizmetler https://short-it.nikolalsvk.workers.dev adresinde yayında. Yay!
Bu öğreticiyi takip ediyorsanız, YOUR_SUBDOMAIN için ne seçtiğinize bağlı olarak, hizmetleriniz https://short-it.YOUR_SUBDOMAIN.workers.dev URL'si boyunca bir yerde bulunmalıdır.
Bu noktada, Worker komut dosyamız Cloudflare Edge ağında dünya genelinde dağıtılır. Bu, dünyanın dört bir yanındaki arkadaşlarımızın ve yabancıların https://short-it.nikolalsvk.workers.dev/twitter adresini ziyaret etmeleri durumunda Twitter hesabımıza çok hızlı bir şekilde yönlendirilebilecekleri anlamına gelir.
toparlamak
Cloudflare Workers'ı kullanarak basit bir URL kısaltma hizmeti oluşturma yolculuğuna devam ettiğiniz için teşekkür ederiz. Bu makalede, Cloudflare bağlamında Worker kavramlarını tanıttık. Ayrıca Cloudflare'nin KV depolama alanında verilerin nasıl oluşturulacağını ve yönetileceğini gösterdik.
Harika bir geliştirici deneyimi sağlayan Wrangler'ı kullanarak tüm bunları sorunsuz bir şekilde yürütebildik. Ancak en önemlisi, dünyanın her köşesinde hızlı çalışan küçük hizmetimizi oluşturmayı, test etmeyi ve devreye almayı başardık.
Bunu benzer bir teknoloji veya hizmette başarmak çok fazla para ve çaba gerektirebilir. Ancak Cloudflare, günde 100.000 istek içeren cömert bir ücretsiz katmanı destekler. Böylece, ücretli bir planı ihlal etmeden önce birçok URL'yi kısaltabilir ve çok sayıda ziyaret gerçekleştirebilirsiniz.
Bu makaledeki tüm kodlar GitHub deposunda mevcuttur (beğendiyseniz lütfen yıldız ekleyin). Kısaltma hizmeti https://short-it.nikolalsvk.workers.dev adresinde yayında.
Gönderiyi beğendiyseniz, lütfen arkadaşlarınız ve iş arkadaşlarınızla paylaşmayı düşünün.
Bir dahaki sefere kadar, şerefe!
Cloudflare Workers ile URL kısaltıcı oluşturun yazısı ilk olarak LogRocket Blog'da göründü.
Sohbete katıl0
Henüz yorum yok. İlk katkı senden gelsin.