GitHub Pages ve Cloudflare ile Sınırsız Ölçek ve Ücretsiz Web Barındırma

Müşterilerime tonlarca para kazandıran, web sitelerini güvende tutan ve yerleşik yedekleri olan bir sırrım var.

Sır: Web sitelerini statik hale getiriyorum. Ardından GitHub ile depolayıp barındırıyorum ve HTTPS üzerinden sunmak için Cloudflare kullanıyorum ve hızlı hale getiriyorum. Müşterilerim yalnızca alan adları için para ödüyor, ancak pazarlık ettiklerinden çok daha fazlasını alıyorlar.

Neden Statik İçerik?

Statik siteler, herhangi bir sunucu işleme süresi olmadığından harika bir şekilde hızlıdır. Ayrıca, bir git deposunda statik varlıkların bir kod tabanını taahhüt ederek, değişiklikleri geri almak basitçe bir önceki işleme geri dönme meselesi haline gelir. Yedeklemeler bir git push ötededir ve esasen tüm web sitenizi önbellekten sunarsınız, yani sunucunuz neredeyse bir daha asla bir isteği işlemek zorunda kalmaz.

Karmaşık bir kullanıcı arayüzü mü oluşturuyorsunuz?

React ve benzerleri gibi ön uç çerçevelerin gelişiyle, HTML/CSS ve JavaScript'ten başka bir şey olmadan büyülü deneyimler yaratabilirsiniz. Yine de arka uç mantığınızı ön uçtan ayırmanız gerekecek, ancak Ruby on Rails bile şimdi bir API moduyla geliyor.

Ne zaman bir web sitesi kurmak için sözleşme alsam, müşterimin ihtiyaçlarını karşılamak için statik bir sitenin yeterli olup olmadığını düşünürüm ve çoğu durumda öyledir.

Aklımda ne tür kullanım durumları olduğunu merak ediyor musunuz? Harika! Statik içeriği düşünmek isteyebileceğiniz bazı durumları tartışalım ve bu yaklaşımın hem sizin hem de müşterinizin zamanından nasıl tasarruf edebileceğini açıklayalım.

Broşür web siteleri

Broşür web siteleri, bir işletme hakkında bilgi sağlamayı amaçlar ve yaşamları boyunca önemli ölçüde değişmezler. Dinamik bir uygulama bu tür siteler için açıkça aşırıya kaçar ve bu siteler yıllarca bakımsız kaldığından, çok az güncelleme aldığından, genellikle bilgisayar korsanlarının hacklemesi için kolay hedeflerdir.

Statik HTML şablonları, CMS muadillerinden önemli ölçüde daha ucuzdur ve gelecekte ince ayar yapmak daha kolaydır. Bu tür siteleri güncellemeleri istenen geliştiriciler, belirli bir CMS hakkında özel bilgi gerektirmez. Kural olarak, broşür siteleri için her zaman statik web siteleri yaparım.

Bonus: Küçük işletmeler, yinelenen aylık barındırma ücreti ödemekten hoşlanır. Kabul, barındırma çok büyük bir maliyet değil, ancak müşterilerin alan adı dışında herhangi bir şey ödemeye zahmet etmesine gerek yok, bu harika.

Tek sayfalık uygulamalar

Modern ön uç çerçevelere dayanan harika, harika yeni bir uygulamayı mı gösteriyorsunuz?

Uygulamanız zaten çoğunlukla statik. Herhangi bir sunucu tarafı mantığını ayrı bir uygulamada yalıtmak için birkaç ekstra adım atın ve uygulamanızın tamamen Cloudflare önbelleğinden sunulmasının tüm avantajlarından yararlanın.

Başvurunuz her zaman kullanılabilir olacaktır.

Bloglar

Bu zor bir satış. İnsanları statik sitelerin bloglar için kullanılabileceğine ikna etmek zor, ama beni okuyun - derin uçtan çıkmadım.

Bloglar, şablonlarla oluşturulan içerikten başka bir şey değildir. Her isteği ayrıştıran ve yeni bir sayfa oluşturan tam gelişmiş bir uygulamaya ihtiyacınız yok. Statik bir site bu kullanım durumu için mükemmeldir.

Jekyll'ı düşünün. Ona Liquid şablonları ve Markdown içeriği verirsiniz ve o bunları statik bir web sitesinde birleştirir. Anında işlem gerekmez ve blogunuz aniden önemli ölçüde daha hızlı hale gelir.

GitHub sayfaları Jekyll derlemelerini desteklediğinden bu iş akışı özellikle yararlıdır. Aniden, blog gönderilerine çekme istekleriyle katkıda bulunulabilir ve tüm içeriğiniz sürüm kontrolü içinde saklanır. Geliştirici olmayanlar, gönderilerini Stackedit aracılığıyla yayınlayarak Markdown'daki gönderilere katkıda bulunabilirler.

Aslında, şu anda bu gönderiyi oluşturmak için Stackedit kullanıyorum!

Ayrıca, blog gönderilerinize yorum yapmak istiyorsanız, Disqus size bir JavaScript parçacığı ekleyerek güçlü bir yorum sistemi sunar.

Okuduğunuz bu sayfa da Disqus kullanıyor.

GitHub Sayfaları

GitHub Pages, GitHub'ın proje sayfalarına yanıtıdır ve herhangi bir statik web sitesini doğrudan deponuzdan sunmanıza olanak tanır. GitHub sayfaları özel etki alanlarını desteklediğinden, doğrudan Git'ten dağıtımlarla GitHub sayfalarında ücretsiz olarak statik bir web sitesi barındırabilirsiniz.

GitHub Pages'a dağıtma.

Yeterince konuşma, eylemde görelim!

Devam ettim ve genel bir API'den Pakistan Rupisi için geçerli döviz kurunu alıp görüntüleyen tek sayfalı bir React uygulaması yaptım. Bunu GitHub Pages'a dağıtalım.

Öncelikle yeni bir GitHub deposu oluşturalım.

GitHub sayfaları, gh-pages adlı bir daldan sunulur, bu yüzden projem için bir tane oluşturalım.

 $ git checkout -b gh-pages Switched to a new branch 'gh-pages'

Ve siteyi yukarı itelim:

 $ git remote add origin [email protected]:amingilani/price-check.git $ git push -u origin gh-pages Counting objects: 27, done. Delta compression using up to 8 threads. Compressing objects: 100% (25/25), done. Writing objects: 100% (27/27), 28.67 KiB | 0 bytes/s, done. Total 27 (delta 3), reused 0 (delta 0) remote: Resolving deltas: 100% (3/3), done. To github.com:amingilani/price-check.git * [new branch] gh-pages -> gh-pages

Ve işimiz bitti! Bu noktada web sitesi ücretsiz SSL ile https://amingilani.github.io/price-check mevcut olacaktır:

Dikkat edilmesi gereken önemli noktalar:

• GitHub sayfaları, projenizin gh-pages dalında index.html dosyasını sunar.
• Web sitesi USERNAME.github.io/REPOSITORY-NAME adresinde sunulmaktadır.

Alan adını özelleştirme.

Siteye GitHub dışında hizmet vermek iyidir, ancak herhangi bir iyi web sitesinin özel bir alan adına ihtiyacı vardır. Neyse ki GitHub, Partiye Kendi Alan Adınızı Getirmenizi sağlar!

Öncelikle özel bir CNAME dosyası oluşturalım ve alan adımızı oraya yerleştirelim. Bu, GitHub'ın depoya hangi alan adının yönlendirileceğini bilmesini sağlar.

 $ echo 'pricecheck.gilani.me' > CNAME $ git add . $ git commit -m 'Add a custom domain' ... $ git push ...

İkinci olarak, alt etki alanımız için USERNAME.github.io adresindeki GitHub'ın DNS'sine bir CNAME işaret edelim:

Dikkat: Bunu bir apeks alanı için KULLANMAYIN ! Etki alanınıza bir CNAME kaydı eklemek, MX ve TXT kayıtlarınızı devre dışı bırakır. Bunu yalnızca alt alan adınız için kullanın. Apex alanları daha sonra tartışılacaktır.

Bu noktada, web sitemiz HTTP'deki özel alanımızda çalışmalıdır:

Dikkat edilmesi gereken önemli noktalar:

• Varsayılan *.github.io etki alanı, HTTPS aracılığıyla sunulur.
• Özel alan adımız, güvenli olmayan HTTP üzerinden sunulur.
• E-postalarınızı öldürmek istemiyorsanız, apeks alanınızda bir CNAME kaydı KULLANMAYIN .

GitHub Sayfalarının Sınırlamaları:

• Repo'ların dosya boyutu 1 GB'tan küçük olmalıdır.
• Web sitelerinin dosya boyutu 1 GB'tan küçük olmalıdır.
• Aylık Bant Genişliği limiti 100 GB'dir. Bunu daha sonra atlayacağız.

Özel alan adınız olarak bir apeks alanı kullanma

Bu sınırlamayı aşmanın en kolay yolu, www alt etki alanınız olarak kullanmak ve tüm HTTP trafiğini apeksten www yönlendirmektir. Örneğimde, www.gilani.me gilani.me , ancak işleri kolay yoldan yapmayı sevmiyorum.

Gerçekten bir apeks alanı kullanmak istiyorsanız, DNS sağlayıcınızın ANAME kayıtlarını ayarlamanıza izin verip vermediğini kontrol edin. Bunlar, aynı bölgedeki diğer kayıtları geçersiz kılmadıkları için etki alanlarını ve A kayıtlarını işaret etmenize izin verdikleri için CNAME kayıtlarının ortasındadır (basitleştirilmiştir).

ANAME yok mu? Son seçenek, bunu destekleyen bir DNS sağlayıcısına geçmektir: Cloudflare girin. Cloudflare, bir ANAME kaydına eşdeğer olan apeks etki alanlarında CNAME düzleştirme sağlar. Bir sonraki bölümde Cloudflare'ı ele alacağımız için geçişi hemen yapmak en iyisidir.

TLDR : Cloudflare'ın ücretsiz DNS'sine geçin ve apeks alanınızda bir CNAME ayarlayın. CNAME çalışmasını sağlayan özel bir şey yapıyorlar.

SSL ve Cloudflare

Snowden sonrası döneme hoş geldiniz. Hükümet onaylı gözetleme ve bilgisayar korsanlığıyla ilgili tüm en kötü korkularımız doğrulandı ve dünya, aktarım sırasında ve beklemedeyken verileri güvence altına almak için çabalıyor.

Modern bir web yöneticisi olarak, web sitenizde karışık içerik olmadan en azından SSL sağlamanız beklenir.

Google Chrome'un düz HTTPS web sitelerini güvensiz olarak işaretlediği bir noktaya geldi ve Google Arama, HTTPS web sitelerini sıralamalarında daha olumlu bir şekilde tercih etmeye başladı. Front-end'inizi güvenli hale getirmek için daha fazla stratejiyi daha sonra tartışacağız, ancak şimdilik sadece SSL'yi ele alacağız.

Neyse ki, artık Let's Encrypt'e sahibiz.

Kontrol ettiğiniz tüm alan adları için programlı olarak kısa vadeli 90 günlük SSL sertifikaları vermenize olanak tanıyan, kar amacı gütmeyen ve tamamen otomatik bir Sertifika Yetkilisidir (CA). Kullanmak bir esinti; açık kaynaktır; ve proje, Mozilla ve Electronic Frontier Foundation dahil olmak üzere çok sayıda şirket tarafından destekleniyor.

Cloudflare'ı İyi Kullanmak

Cloudflare bir DNS, CDN ve DDoS koruma hizmetidir.

Web sitenizi önbelleğe alır ve coğrafi olarak yakın sunuculardan kullanıcılara sunar ve web sitenizi daha hızlı hale getirir. Sizi GitHub'ın 100 GB bant genişliği sınırının altında tutma avantajına sahiptir, çünkü web siteniz delicesine popüler hale gelse bile, çoğu istek önbelleğe gelir ve asla sunucuya ulaşmaz.

Bunun da ötesinde, Cloudflare, Evrensel SSL adlı bir hizmet sunar ve burada size CA ortaklarından ücretsiz bir SSL sertifikası verir, böylece HTTPS'yi sonsuza kadar ücretsiz alırsınız.

Neden Cloudflare?

Ne düşündüğünü biliyorum: Gilani, az önce bana Let's Encrypt'in ne kadar harika olduğunu söyledin. Neden Cloudflare'den bahsediyorsun? Eh, her şey basitliğe bağlı.

Zihinsel bir alıştırma olarak, tüm dünyada birden fazla Nginx önbelleği ve ters proxy kurarak onlara tüm geçerli SSL sertifikalarını verdiğini ve kullanıcılara en yakın konumlarından web sayfalarını sunduğunu hayal edin.

Bu, kaynak sunucunun bir SSL sertifikasına sahip olmamasına rağmen web sitenizin SSL aracılığıyla sunulmasına neden olur, ancak Cloudflare size, Cloudflare sunucularına kadar olan bağlantıyı güvence altına almak için kaynak sunucunuza koyabileceğiniz özel, kendinden imzalı sertifikalar verir. Cloudflare size ücretsiz bir plan sunar ve sertifikanızı her 90 günde bir yenilemeniz bile gerekmez.

Bir serbest çalışan olarak, işleri için bir siteyi mümkün olduğunca hızlı bir şekilde çalışır hale getirmek isteyen müşteriler buluyorum. Güvenlik endişelerini, modern web'i rahatsız edenleri veya aktarım sırasında şifrelemeyi anlamıyorlar veya umursamıyorlar. Bazı müşteriler alan adları fikrini anlamakta güçlük çekiyor ve “sadece web sitemi çalışır durumda tutmak için” yıllık 15 dolarlık bir ücret ödemek zorunda kaldıklarında bunu can sıkıcı buluyorlar. Bu nedenle, ücretsiz barındırma üzerinde çalışan web sitelerini koruyan bir dizi ters proxy için neden ödeme yapmaları gerektiğini onlara açıklamaya çalışın.

Cloudflare SSL'yi kurma

Ellerimizi tekrar kirletelim. Yapılacak ilk şey, tüm trafiğinizi Cloudflare üzerinden yönlendirmeye geçin:

Ardından, Crypto altında, SSL seviyesini "Tam" olarak ayarlayın.

Karışık içerik uyarılarını kapatmak için “Otomatik HTTPS Yeniden Yazmasını” zorlayın.

Bu noktada web sitemiz hem HTTP hem de HTTPS üzerinden çalışacaktır. Etki alanımızdaki her şey için HTTPS'yi zorlayalım.

Hepsi tamam. Web sitemiz her zaman Chrome'da yeşil bir "Güvenli" derecesi ile HTTPS üzerinden yüklenmelidir.

Son Sözler ve Güvenlik Hususları

Yukarıda bahsetmediğim birkaç şey var ve birkaç noktayı açıklığa kavuşturmak için biraz zaman ayırmak istiyorum.

Aranızdaki zeki biri, bu kurulumla ilgili birkaç göze çarpan güvenlik sorunu olduğuna, yani aşağıdakiler gibi güvenli HTTP başlıkları bulunmadığına dikkat çekecektir:

• Content-Security-Policy : ana bilgisayarların beyaz listesinden komut dosyalarını ve varlıkları yükler ve satır içi js'ye izin vermeyebilir.
• X-Frame-Options : web sitenizin bir iframe içinde yüklenmesini engeller.

Ve haklısın. GitHub sayfaları ve hatta Cloudflare , HTTP başlıklarınızı özelleştirmenize izin vermez . Ancak, HTML meta etiketini kullanarak bir CSP ayarlayabilirsiniz.

Bunu web sayfanıza eklemeniz yeterlidir:

 <meta http-equiv="Content-Security-Policy" content="default-src https:">

Ancak şu anda GitHub sayfalarında X-Frame-Options başlığını ayarlamanın pratik bir yolu yok, yani bir saldırgan web sayfanızı özel hazırlanmış bir iframe yükleyebilir ve bir XSS saldırısı gerçekleştirebilir. Bununla birlikte, adanmışsanız, kullanıcılardan her hassas eylemde parolalarını veya 2FA belirtecini onaylamalarını isteyerek veya kimliği doğrulanmış her istek üzerine bir CSRF belirteci ileterek bu sorunu geçici olarak çözebilirsiniz.

Bazıları için büyük bir endişe, GitHub'daki ücretsiz halka açık depoları kullanarak, web sitenizin ve kaynak kodunuzun, onu çatallamak veya indirmek isteyen herkes tarafından kullanılabilir olmasıdır. Dolayısıyla buradaki endişenin yersiz olduğunu düşünüyorum.

Statik içerik, kullanıcıya sunulmadan önce bir komut dosyası olarak derlenmediği veya işlenmediği anlamında kaynak kod değildir. Kullanıcınız, web sitenize yönlendirilmiş bir web tarayıcısı çalıştırırsa, web sitesinin tam olarak aynı statik kopyasını alır. Kodu bir GitHub deposunda barındırmak, web sitenizin bir kopyasını indirmeyi kesinlikle kolaylaştırırken, zaten herkese açık olmayan hiçbir şeyi açığa çıkarmaz.

Ölçekleme, Sınırsız Ölçekleme

Bu makalede sunulan fikirler, küçük uygulamaların ücretsiz web barındırmasıyla sınırlı değildir.

Modern bir JavaScript çerçevesine dayalı bir ön uç katmanı oluşturabilir, bunu Firebase gibi büyük ölçekli bulut tabanlı bir Hizmet Olarak Arka Uç'a (BaaS) bağlayabilir ve sunucular, çalışma süresi, veya herhangi bir altyapı ile ilgili sorun.

Yeni ve heyecan verici bir web tabanlı oyun mu yapıyorsunuz?! GameSparks'a göz atın ve gitmeye hazırsınız.

Özet, İtiraf ve Bağlantılar

Bu yazıda, React uygulamamı gh-pages pages'e manuel olarak yayınladım gibi görünmesini sağladım. Ben öyle bir şey yapmadım. master üzerinde çalıştım ve sıra dağıtıma geldiğinde, bir yapı betiğini başlatan ve yapıyı gh-pages npm run deploy . Nasıl çalıştığını görmek için lütfen depomun master dalına bakın.

paket servisler

Artıları:

• Anında dağıtım
• Kolay işbirliği
• Güvenli barındırma ortamı

Uyarılar:

• HTTP başlıklarına erişim yok
• Web sitesinin bir kopyasını indirmek kolay
• GitHub bilgisi gerekli
• Teknoloji satıcılarına bağlıdır

Bağlantılar:

• Uygulamamın kaynak kodunu amingilani/price-check adresinde bulabilirsiniz.
• Bu uygulama, pricecheck.gilani.me adresinde yayındadır ve süresiz olarak kullanılabilir olmalıdır.