Ağrısız yerel hata ayıklama: Cloudflare Tunnel ile HTTPS ve özel ana bilgisayar adının elde edilmesi

Günlük geliştirmemizde, uygulamalarımıza erişmek ve hata ayıklamak için çoğunlukla http://localhost kullanırız, bu da çoğu durumda yeterlidir. Ancak, aşağıdaki gibi durumlarda, uygulamalarımızda HTTPS ve özel bir ana bilgisayar adı kullanmamız gerekebilir:

• Uygulamanızın HTTPS gerektiren bir API kullandığı durumlarda (örneğin, Web Crypto API veya HTTPS gerektiren diğer üçüncü taraf kütüphaneler)
• Entegre etmek istediğiniz üçüncü taraf bir hizmet sizden küresel olarak erişilebilir HTTPS tabanlı bir API arayüzü sağlamanızı istediğinde ve bu arayüzde hata ayıklamanız gerektiğinde

Piyasada bu problemlere yönelik birçok çözüm bulunmaktadır, ancak çoğu karmaşık ve hatalara eğilimlidir. Burada, yerel gelişim için HTTPS ve özel ana bilgisayar adını hızlı bir şekilde kullanmak için Cloudflare Tunnel nasıl kullanılacağını tanıtmak istiyorum.

Cloudflare Tunnel Nedir#

Cloudflare Tunnel, Cloudflare tarafından sağlanan ve altyapınızı Cloudflare ağına güvenli bir şekilde bağlamanızı sağlayan bir hizmettir. Esasen, sunucularınız ile Cloudflare'ın küresel ağı arasında güvenli ve verimli bir bağlantı oluşturarak web trafiğinizin korunmasını ve optimize edilmesini sağlar.

Cloudflare Tunnel kullanarak, yerel geliştirme makinenizi Cloudflare'ın küresel ağına kolayca bağlayabilirsiniz. Daha sonra Cloudflare üzerinde alan adınızı barındırabilir ve Cloudflare Tunnel üzerinden bu alan adına gelen istekleri yerel makinenize yönlendirebilirsiniz.

Gereklilikler#

Başlamadan önce, aşağıdakilere sahip olduğunuzdan emin olun:

• Zaten bir alan adına sahip olun ve alan adını satın aldığınız kayıt kuruluşunda DNSSEC devre dışı bırakılmıştır.
• Daha önce bir Cloudflare hesabı oluşturmuş olun.

Not: Bu öğreticide, gösterim amacıyla demo.com alan adını kullandığımızı varsayıyoruz.

Bir web sitesi ekleyin Cloudflare'a#

Öncelikle, Cloudflare hesabınızı kullanarak Cloudflare kontrol paneline giriş yapmalı ve sol menüden "Web Sitesi" seçeneğini seçmelisiniz. Ardından, sayfadaki "Başlayın" düğmesine tıklayın (zaten bir kayıt varsa "Web sitesi ekle" seçeneğine tıklayın). Kendi alan adınızı kullanarak web sitesini eklemeyi tamamlamak için talimatları takip edin. Web sitesini başarıyla ekledikten sonra aşağıdaki içerikleri göreceksiniz:

Gösterildiği gibi, eklenen web sitesi henüz etkinleştirilmemiştir. Sayfadaki rehberi takip ederek alan adı kayıt kuruluşunuza giriş yapın ve alan adının nameserver'larını güncelleyerek web sitenizi etkinleştirin.

Godaddy üzerindeki bir alan adını örnek alarak:

Alan adı ayarları sayfasına girin, DNS Sekmesi altındaki "Nameservers" seçeneğine erişin ve nameserver'ları rehberde belirtilen değerlere değiştirin:

Değişiklik yaptıktan kısa bir süre sonra, Cloudflare üzerindeki ilgili web sitesi etkin hale gelecektir:

Bu içerikleri yapılandırdıktan sonra alan adınız Cloudflare üzerinde barındırılacak ve Cloudflare alan adı için otomatik olarak HTTPS'yi etkinleştirecektir.

Tünel oluşturma#

Cloudflare Kontrol Paneli ana sayfasına geri dönün, sol menüden "Sıfır Güven" seçeneğine tıklayın ve "Erişim" dizini altındaki "Tüneller" seçeneğini seçin. Ardından sayfada "Bir tünel ekle" seçeneğine tıklayın, ve herhangi bir tünel adı girin (örneğin, my-dev-tunnel). Sayfada verilen talimatlara göre yerel geliştirme makinenizi Cloudflare tüneline bağlayın.

MacOS'u örnek alarak, bir terminal açın ve sayfada gösterilen komutu çalıştırın:

Makineniz zaten "cloudflared" yüklü ise, brew install cloudflare/cloudflare/cloudflared komutunu çalıştırmanıza gerek yoktur.

Ardından, terminalinizde cloudflared tunnel list komutunu çalıştırın, ve makinenizin zaten tünele bağlı olduğunu göreceksiniz:

Oluşturulan tünele trafiği yönlendirin#

Tüneli oluşturduktan sonra, Tünel için rota kurallarını yapılandıracağız.

Yerel uygulamamızın http://localhost:3000 portunda çalıştığını ve https://dev.demo.com için tüm istekleri yerel uygulamanın çalıştığı porta yönlendirmek istediğimizi varsayalım.

Öncelikle tünel sayfamıza geri dönelim, yeni oluşturduğumuz tüneli bulalım, sağdaki üç noktalı butona tıklayalım ve "Yapılandırma" seçeneğini seçelim.

Gereksinimlerimize göre ilgili yapılandırmayı doldurun:

Bu yapılandırma, adresi dev.demo.com adresini makinemizde http://localhost:3000'a yönlendirir. Ardından "Ana bilgisayar adını kaydet" seçeneğine tıklayın.

Kısa bir bekleyişin ardından, https://dev.demo.com adresine erişin, ve yerel makinelerimizde çalışan uygulamayı göreceksiniz:

Özet#

Bu öğretici aracılığıyla, karmaşık yapılandırmalar ve hatalardan endişelenmeden yerel geliştirme ortamınızda kolayca HTTPS ve özel ana bilgisayar adını uygulayabilmeniz gerekir. Umarım bu öğreticiden faydalanabilirsiniz！