Ön Uç Uygulamaları Cloudflare Sayfalarına Nasıl Dağıtılır?

Ön uç uygulamaları dağıtmak, bir zaman önce en büyük sorunlardan biridir. Ama bugün, çocuk oyuncağı. Daha yeni biri bile süper barındırma hizmetlerinin yardımıyla uygulamaları dağıtabilir.

Birçok barındırma platformu, ön uç uygulamalarını dakikalar içinde dağıtmamızı sağlar. Sitemiz birkaç dakika içinde herkese açık hale gelecektir.

harika değil mi?

Evet o.

Cloudflare Sayfalarında ön uç uygulamalarının nasıl dağıtılacağını öğrenelim.

Ön Uç Uygulamaları

Uygulamanın dağıtım kısmına geçmeden önce bir ön uç uygulaması oluşturmamız gerekiyor.

Nasıl yapılır?

Sen bile biliyorsun. O yüzden şimdi burada tartışmayacağız.

Ön uç uygulamaları oluşturmamız için birçok kütüphane, çerçeve olduğunu biliyoruz. Ancak bu kitaplıkların veya çerçevelerin temel kısmı JavaScript'tir. Ön uç uygulamanızı dağıtmanın bir yolunu aradığınız için tüm bunları biliyorsunuz. Yalnızca dağıtım bölümünü arıyorsanız, bu bölümü atlayabilir ve dağıtıma geçebilirsiniz.

React, Vue, Angular, JavaScript ve daha pek çok şey var. Gereksinimlerine göre uygulamalar oluşturulabilir.

Gördüğümüz gibi, ön uç uygulamaları oluşturmak için bir sürü seçenek var. Dağıtım ne olacak? Tüm ön uç uygulamaları için aynı süreç mi?

Evet, dağıtım süreci tüm ön uç uygulamaları için aynıdır. Ancak ön uç uygulamalarını dağıtıma hazır hale getiren süreç, kütüphanelere ve çerçevelere göre değişebilir.

Kitaplıklar ve çerçevelerle oluşturulmuş ön uç uygulamaların çoğu için bir derleme komutu olacaktır. Bunu zaten biliyor olabilirsiniz. Ne olduğunu bilmiyorsanız, ön uç kitaplığınıza veya çerçevenize göre araştırmanız gerekebilir.

Dağıtmak için bir uygulamaya ihtiyacımız var. Basit bir uygulama kuralım. Dağıtmak için zaten bir ön uç uygulamanız varsa bu bölümü atlayabilirsiniz.

Kurmak

Kurulumdan önce, bir şeyin farkında olmamız gerekir. Ön uç uygulamamızın Cloudflare sayfalarına dağıtabilmesi için giriş noktası index.html olmalıdır. İndex.html dosyasını (yer, kitaplık ve çerçeveye göre değişebilir) derleme işleminden sonra bulabilirsiniz.

Demo için basit bir React ve Plain JavaScript uygulaması oluşturacağız. Aşina olduğunuz başka bir kitaplık veya çerçeve seçebilirsiniz. İlk önce React uygulamasını ayarlayalım.

React uygulamasını oluşturmak için aşağıdaki komutu çalıştırın.

 npx create-react-app demo

Uygulamayı yaratıcılığınızla güncelleyin veya olduğu gibi bırakın. Sonunda doğru bir şekilde konuşlandırıldığından emin olmak için bir şeyi değiştireceğim.

Şimdi sade bir JavaScript uygulaması oluşturalım.

index.html'ye sahip olmak bizim için zorunludur. O halde index.html isimli dosyayı oluşturalım. Şimdi, şık görünmesi için style.css, script.js, resimler vb. gibi daha fazla dosya ekleyebilirsiniz. Ama yine de zorunlu değil :).

Dağıtım için basit kurulumumuz artık tamamlandı. Sıradaki ne? Dağıtım zamanı. İçine dal.

dağıtım

Cloudflare sayfaları, ön uç uygulamamızı GitHub'dan dağıtmamızı sağlar. Yani, dağıtım sürecinin iki kısmı vardır.

• Öncelikle GitHub üzerinde uygulama kodumuza sahip olmamız gerekiyor.
• İkincisi, uygulamayı Cloudflare sayfalarına dağıtmak.

Kodumuzu, projenin ilk gününden itibaren barındırma platformlarında koruduğumuz için çoğu zaman ilk bölüm için endişelenmenize gerek kalmayacak. İlk bölümü atlayabilir ve dağıtım bölümüne gidebilirsiniz.

Kodunuzu GitHub'a göndermediyseniz veya diğer kod barındırma platformlarındaysa, Cloudflare sayfalarına dağıtmak için GitHub'a kaydırmanız gerekebilir. Kodunuzu GitHub'a göndermek için aşağıdaki adımları takip edebilir veya kendi başınıza yapabilirsiniz.

1. Kodu GitHub'a Göndermek

GitHub hesabınız var mı? Evet, sanırım çoğu durumda. Eğer bir tane yoksa, burada bir tane oluşturun.

• GitHub'a gidin ve hesabınıza giriş yapın.
• Proje adınızla bir havuz oluşturun. Burada demo gibi isimlendiriyoruz.

• Yeni oluşturulan bir depo aşağıdaki gibi görünecektir. git kodla doldurmak için bazı git komutları gösterir.

Şimdi oluşturduğumuz depoya kodumuzu gönderelim. Aşağıdaki adımları takip edebilir veya zaten aşina iseniz kendiniz yapabilirsiniz. Projemizi terminal veya cmd ile açarak başlayalım.

• git'i git init komutuyla başlatın.
• git add . komutunu kullanarak tüm değişikliklerinizi yerel git add . .
• Değişiklikleri git commit -m "message" komutuyla yapın. Taahhüt için uygun bir mesajla mesaj değiştirin.
• Şimdi uzak depomuzu yerel projeye bağlamamız gerekiyor.
• Bağlanma komutu git remote add origin 'your_repo_path' . your_repo_path uzak deponuzla değiştirin. Depo yolu şu şekilde olacaktır [email protected]:username/repo_name . Demo için depo yolum [email protected]:hafeezulkareem/demo .
• Son adım, kodu uzak depomuza göndermektir. Bunu git push -u origin main komutunu kullanarak yapabiliriz.

GitHub deposundaki kodun anlık görüntülerini görelim.

Kodumuzu Github'a göndermekle işimiz bitti. Bir sonraki görevimiz onu Cloudflare Sayfalarına dağıtmak. Lafı fazla uzatmadan dağıtıma başlayalım.

2. Cloudflare Sayfalarına Dağıtım

Siteyi Cloudflare sayfalarına dağıtalım. Daha ileri gitmeden önce bir Cloudflare hesabı oluşturmamız gerekiyor. Cloudflare'de zaten bir hesabınız yoksa, buradan bir tane oluşturun. Cloudflare hesabı oluşturmayı tamamladıktan sonra sitenizi dağıtmaya hazırsınız.

• Cloudflare Sayfaları sitesine gidin.
• Hesabınıza giriş yapın. Gösterge tablosunu aşağıdaki gibi göreceksiniz.

• Cloudflare web sitesinde oturum açtıysanız , sayfalarınızın kontrol panelini göremeyebilirsiniz.
• Cloudflare kontrol panelinizin sağ tarafındaki Sayfalar düğmesine tıklayarak sayfaların kontrol paneline gidin. Aşağıdaki resme bakın.

• Sayfaların kontrol panelinden Proje oluştur düğmesine tıklayın.

• Aşağıdaki sayfaya gideceksiniz.

• GitHub'dan bizim uygulama depo almak için Bağlan GitHub hesabı tıklayın.
• Cloudflare Sayfalarını yetkilendirmek için GitHub uygulamaları sayfasına yönlendirileceksiniz.

• Tüm depolara veya seçilenlere erişim verebiliriz. Cloudflare Sayfalarına dağıttığımız depolara erişim vermek daha iyidir. İsterseniz tüm depolara erişim verebilirsiniz.
• İki seçenekten birini seçin.
• Tüm depolar 'ı seçtiyseniz, depoların özel deposunu seçmenize gerek yoktur. Yükle ve Yetkilendir düğmesini tıklayın.
• Yalnızca depoları seç'i seçtiyseniz, açılır menüden depoları seçmeniz gerekir. Yalnızca depoları seç seçeneğini seçtikten sonra görünen Depoları seç açılır menüsüne tıklayın .

• Depo adınızı aşağıdaki gibi girin.

• Adını girdikten sonra deponuz gösterilecektir. Depoyu seçin. Seçilen depoyu aşağıdaki gibi listenin başında görebilirsiniz.

• Yükle ve Yetkilendir düğmesine tıklayın. Cloudflare Pages dağıtım sayfasına yönlendirileceksiniz.
• Sayfada tüm yetkili depoları göreceksiniz.

• Dağıtmak istediğiniz depoyu seçin.

• Dağıtılacak depoyu seçtikten sonra, Kuruluma başla düğmesine tıklayın.

• Sizi dağıtım sürecindeki sonraki adımlara, yani Derlemeleri ve dağıtımları ayarlamaya götürecektir.

• Aşağı kaydırdığınızda, Yapı ayarları adlı bir bölüm bulacaksınız. Ön uç uygulamamız için uygun derleme sürecini seçmeliyiz.
• Oluşturma sürecini kullandığımız çerçeve veya kitaplığa göre seçmeliyiz.
• Tüm seçenekleri görmek için Çerçeve ön ayarını tıklayın.

• Burada React ve Plain JavaScript uygulamalarını dağıtıyoruz.
• Bir React uygulaması dağıtıyorsanız, açılır menüden React Uygulaması Oluştur'u seçin.
• Herhangi bir paketi olmayan bir Düz JavaScript uygulaması için, Yok öğesini seçin.

• Başka bir ön uç uygulaması dağıtıyorsanız, uygun Çerçeve ön ayar oluşturma seçeneğini belirleyin.
• Yok'u seçip özel derleme komutunu da girebiliriz. Uygulamanıza göre seçin.
• Derleme yapılandırma kurulumundan sonra, dağıtım işlemimizi tamamlamak için Kaydet ve Dağıt düğmesine tıklayın.
• Kaydet ve Dağıt düğmesine tıkladığınızda, dağıtım işlemi aşağıdaki gibi başlayacaktır.

• İşlem sitemizi dağıtmak için birkaç dakika sürecektir. Bekleyin ve keyfini çıkarın.
• Dağıtım işlemi tamamlandıktan sonra size site URL'sini bir başarı mesajı ile gösterir.

• Verilen URL ile siteyi ziyaret edin.

• Proje sayfasından sitenin ayarlarını güncelleyebiliriz.

• Cloudflare sayfaları, depoya yeni kod gönderdiğimizde güncellemeleri otomatik olarak dağıtacaktır.

Bu kadar. Frontend uygulamamızı Cloudflare sayfalarına dağıtmayı bitirdik.

Çözüm

Yaşasın! ön uç uygulamamızı Cloudflare Sayfalarına yerleştirdik. Ön uç uygulamasını dağıttıktan sonra ayarları değiştirmeniz, bazı şeyleri güncellemeniz vb. gerekebilir; Cloudflare belgelerine buradan bakın. Belirli bir çerçeve kılavuzunu dağıtma adımlarını görmek istiyorsanız, belgelerdeki çerçeve kılavuzları bölümüne gidebilirsiniz.

Ardından, ön ucu Netlify'a dağıtmaya ne dersiniz?

Not: Makalede gösterilen demo siteler bir süre sonra herkese açık olmayabilir.

Mutlu Dağıtım