8 ücretsiz React uygulama barındırma hizmeti12 min read

Yani bir React uygulaması geliştirdiniz ancak onu nasıl ve nerede barındıracağınızdan emin değilsiniz. Bu makalede size 8 ücretsiz React barındırma hizmetini anlatacağız, nasıl dağıttığımızı göstereceğiz bu React uygulaması her birini kullanıyoruz ve bu süreçte neler öğrendiğimizi size anlatıyoruz.

Uygulamamızı Figma’te şunu kullanarak oluşturduk: Anima işlevsellik, duyarlı davranış ve zengin medya eklememize olanak tanıyan eklenti Kullanıcı arayüzünün tamamı için geliştirmeye hazır React kodunu dışa aktarın. Tasarımı ve dağıtımı bir günümüzü aldı.

React uygulamanızı ücretsiz olarak nerede barındırabilirsiniz?

React gibi bileşen tabanlı çerçevelerin yükselişi sayesinde giderek artan sayıda sunucusuz barındırma çözümü var. Amazon AWS, Microsoft Azure ve Google Cloud şu anda baskın platformlardır. Ancak, daha az çaba gerektiren ve kısa sürede çalışır hale gelmenizi sağlayabilecek özel ön uç barındırma hizmetlerine doğru giderek artan bir geçiş var ve çoğu CI/CD’yi içeriyor. Test ettiğimiz 8 ücretsiz React uygulama barındırma hizmeti:

1. Netlify

2. Vercel

3. AWS’yi Güçlendirin

4. Firebase

5. GitHub Sayfaları

6. GitLab Sayfaları

7. İşleme

8. Dalgalanma

Bu ücretsiz React uygulama barındırma hizmetlerini daha ayrıntılı olarak ele alalım ve her birini kullanarak bir React uygulamasını nasıl dağıttığımızı gösterelim. 

Netlify

Arka plan

Netlify 2014 yılında kuruldu ve başından beri statik web sitelerini barındırmaya odaklandı. Cömert ücretsiz katmanı nedeniyle birçok geliştiricinin ilgisini çekti. Birkaç yıl sonra Netlify, en popüler JAMstack ve statik web sitesi barındırıcılarından biri haline geldi.

Nasıl kullanılır

1. İdeal olarak GitHub’e kaydolacak veya oturum açacaksınız. Bu, profilinizdeki depolara erişebilmenizi ve bunları hızlı bir şekilde dağıtabilmenizi sağlar.
2. Oturum açtıktan sonra “Yeni site ekle”yi tıklayın ve “Mevcut bir projeyi içe aktar”ı seçin.
3. Ardından sağlayıcınız olarak GitHub’e tıklayın.
4. “Banka web sitesini” veya projenizin adı ne olursa olsun seçin.
5. Dağıtım ayarlarına ince ayar yapın (web sitemiz söz konusu olduğunda, varsayılanlar mükemmel çalışır), ardından “Siteyi dağıt”ı tıklayın.
6. Dağıtıldıktan sonra bunu dünyayla paylaşabileceğiniz genel bir URL’te görüntüleyebilirsiniz. Yay!

İşte Netlify’da dağıtılan canlı uygulama.

Artıları ve eksileri

Netlify’ın kurulumu ve dağıtımı kolaydır; burada test ettiğimiz en hızlı hizmetlerden biri olduğundan bahsetmiyorum bile. Bir dezavantajı, ortak çalışanlara ve/veya bir ekibe ihtiyacınız varsa ücretli bir plana yükseltme yapmanız gerektiğidir.

Vercel

Arka plan

Vercel (başlangıçta Zeit olarak biliniyordu) 2015 yılında kuruldu ve kısa sürede üne kavuştu. Onlar, web siteleri oluşturmaya yönelik popüler bir React çerçevesi olan Next.js’nin koruyucularıdır. Ticari olmayan web sitelerine ücretsiz bir katmanın yanı sıra Edge ağlarını sunucusuz işlevler için kullanmanın yollarını sunarlar.

Nasıl kullanılır

1. GitHub’te oturum açın veya kaydolun.
2. “Yeni Ekle…” açılır menüsüne tıklayın ve “Proje”yi seçin.                                                             
3. “Banka web sitesini” veya favori React projenizi seçin.
4. Dağıtım ayarları için varsayılanları seçtik ve ardından “Dağıt”a tıkladık.
5. Bir süre sonra web sitemizi kullanıma açtık.

İşte canlı URL.

Artıları ve eksileri

Vercel’in dağıtım sürecinin kurulum kısmını önbelleğe almak için biraz zamana ihtiyacı vardır, ancak bundan sonra en hızlı hizmetlerden biridir. Gönderdiğiniz her dal için önizleme dağıtımlarını gösterir ve önbelleğe alma nedeniyle bunu hızlı bir şekilde yapar.

AWS’yi Güçlendirin

Arka plan

AWS, bulut ürünlerinden oluşan devasa bir koleksiyondur ve Amplify, bunlardan bazılarına ulaşmanın kolay bir yolu olarak tanıtılmaktadır. AWS Amplify ile, kullanım senaryoları geliştikçe AWS hizmetlerinden yararlanma esnekliğiyle AWS’de hızlı bir şekilde tam yığın uygulamalar oluşturabilir, gönderebilir ve barındırabilirsiniz.

Nasıl kullanılır

1. AWS’ye kaydolun veya oturum açın, ardından AWS Amplify’ı arayın ve “Başlayın”a tıklayın.
2. GitHub’i seçin ve yetkilendirin (buna yalnızca “banka-web sitesi” deposu için izin verdim).
3. “Son güncellenen depolar” bölümünde repoyu seçin.
   1. Derleme ayarında, şunları değiştirmemiz gerekecek: temel Dizin uygulamamızın olması için uzaklık şöyle: Daha sonra derleme ayarları şöyle görünmelidir:
4. Bir sonraki adımda “Kaydet ve dağıt”ı tıklayın.
5. Bir süre sonra web sitesi kullanıma sunulacak ve kullanıma hazır olacaktır.

Ve yayındayız! İşte URL.

Artıları ve eksileri

Düzenlemeniz gerekir temel Dizin dağıtım spesifikasyonunda — kutudan çıktığı haliyle tanınmıyor. Kullanıcı arayüzü biraz hantal görünüyor, ancak bu kişisel bir tercih. AWS Amplify için büyük bir potansiyel var çünkü diğer birçok AWS web hizmeti elinizin altında.

Firebase

Arka plan

Firebase, en çok gerçek zamanlı depolama platformu olarak bilinen bir Google hizmetidir. Ancak aynı zamanda statik web siteleri ve Express.js mikro hizmetleri veya API’ler için bir barındırma seçeneğine de sahiptir ve ekibinizin üzerinde çalıştığı şubeler için URL’lerin önizlemesini destekler. Netlify, Vercel ve diğerlerinde olduğu gibi, dağıtılan içeriği bir CDN ağı üzerinden sunar.

Nasıl kullanılır

1. Yükle Firebase araçları ile npm install -g firebase araçları.
2. Firebase’de şununla oturum açın: Firebase’e giriş. Giriş yaptıktan sonra şuna benzer bir mesaj görmelisiniz:
3. Proje dizinine gidin ve çalıştırın ateş tabanı başlangıcışöyle bir şey görmelisiniz: Firebase Barındırma için dosyaları isteğe bağlı GitHub Eylem dağıtımlarıyla yapılandırma seçeneğini seçin. Ardından, doğrudan CLI’den bir proje oluşturabilir veya bunu yapmak için Firebase kullanıcı arayüzünü kullanabilir ve daha sonra bağlayabilirsiniz. Projeyi komut satırından oluşturduk ve ortaya çıkan soruları bu şekilde yanıtladık:                                                                      Bundan sonra basit ‘firebase.json’ ve ‘.firebaserc’ dosyaları oluşturulacak.
4. Sonra koş Firebase konuşlandırması dosyaları aslında dağıtmak için uzaklıkdizin. Dizin eksikse, çalıştırdığınızdan emin olun. npm çalıştırma derlemesi ilk önce dosyaları oluşturun. Firebase konuşlandırması komut aşağıdaki örneğe benzer bir çıktı oluşturmalıdır:

Artık yapabilirsin web sitesini görüntüle sağlanan URL üzerinde. Yay! 

Artıları ve eksileri

Firebase oldukça basittir ancak projenizin içinde kurduğunuzda cevaplamanız gereken sorular biraz kafa karıştırıcıdır. Neyse ki, yukarıdaki bölümde bunları sizin için yanıtladık, ancak devam etmeden önce gerçek Firebase özelliklerinin anlaşılması gerekiyor. Bunun dışında Firebase’in dağıtımı hızlıdır ve dağıtılan dosyaları önizleyebileceğiniz bir URL oluşturabilir. Ayrıca CLI ile GitHub Action dağıtımlarıyla bunu kolayca otomatikleştirebilirsiniz ki bu da güzel bir şey.

GitHub Sayfaları

Arka plan

GitHub Sayfaları bir süredir ortalıkta dolaşıyor ve doğrudan GitHub’ten dokümanları veya kişisel bir web sitesini yayınlamanın kolay bir yoludur. Statik içerik için harikadır ve birçok kişi bunu minimum yatırımla basit siteleri dağıtmak için kullanır. Projeniz herkese açıksa ve bir web sitesini barındırmanın hızlı ve ucuz bir yoluysa, kullanımı ücretsizdir.

Nasıl kullanılır

Lütfen düzenlemeniz gerektiğini unutmayın. Uygulama.jsx nereye çağıracağız Yönlendirici ve ekle temel ad repo adıyla eşleşmesi için. Yani bu nasıl Uygulama.jsx bakmalı:                                                                                        değiştirmeliyiz temel ad çünkü GitHub sayfaları, web sitesini “https://GITHUB_USERNAME.gitlab.io/REPO_NAME” biçimindeki bir URL’e dağıtacaktır. Web sitesi, temel ad ayarlanmadan düzgün çalışmayacaktır. tepki-yönlendirici-dom.

1. Kod değiştikten sonra yüklememiz gerekiyor gh-sayfaları içeren paket:
2. Ve bir ekleyin ön konuşlandırma ve bir dağıtmak komut dosyası paket.json:
3. Daha sonra sadece koşuyoruz npm çalıştır konuşlandırma. Tetikleyecek npm çalıştırma derlemesi ve kullanacak gh-sayfaları içeriğini yayınlamak uzaklık GitHub’te ayrı bir şubeye çağrıldı gh-sayfaları.
4. Son olarak, olup olmadığını kontrol edin. gh-sayfaları aşağıdaki gibi GitHub Sayfaları için kullanılır:

İşte canlı URL.

Artıları ve eksileri

Kullanıcı adınızdan farklı bir proje dağıtıyorsanız, bu proje GitHub ile ücretsiz alanımızdaki bir alt dizine dağıtılacaktır. Daha sonra bir alt dizin içerisinde olma mantığını desteklemek için ekstra kod yazmanız gerekir.

Kullanım senaryomuzda kullanıma hazır sürekli dağıtımı desteklemez, ancak bunu ayarlayabilirsiniz. Bir kez ayarlandıktan sonra değişiklikleri uygulamak hızlıdır.

GitLab Sayfaları

Arka plan

GitHub gibi GitLab’ın da kendi barındırma çözümü var ve buna GitLab Sayfaları adını veriyorlar. Bunu onlara vermem gerekiyor, GitLab Sayfalarına sürekli dağıtım ayarlamak GitHub Sayfalarına göre daha kolaydır.

Nasıl kullanılır

1. GitLab’a kaydolun veya oturum açın
2. Zaten orada yoksa GitLab’a bir repo ekleyin. Yapabilirsin oraya eklediğimi çatalla 
   GitHub Sayfalarına benzer şekilde, Uygulama.jsx nereye çağıracağız Yönlendirici ve ekle  temel ad repo adıyla eşleşmesi için. İşte son değişiklik:                                                               değiştirmeliyiz temel ad çünkü GitLab sayfaları web sitesini bu formdaki bir URL’e dağıtacaktır: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Web sitesi, temel ad ayarlanmadan düzgün çalışmayacaktır. tepki-yönlendirici-dom.
3. Projeyi düzenleyip GitLab’a aktardıktan sonra Ayarlar > Sayfalar’a gidin; repo’yu GitLab Sayfalarına dağıtmak için dört adımlı bir sihirbazla karşılaşacaksınız. 
4. Sihirbazın ilk adımı yapı görüntüsüne girmektir. Node.js LTS’yi kullanacağız.
5. Daha sonra pre-build komutunu gireceğiz. npm ci burası yeterli olacaktır.
6. Şimdi inşa adımına geçelim. geçmemiz lazım — –dist-dir genel çünkü GitLab Sayfaları web sitesinin yerleşik olmasını bekliyor kamu dizin. Başka bir dizinden kaçamazsınız, üzgünüm.
7. Yeni oluşturulanı taahhüt et .gitlab-ci.yml GitLab’a web sitenizi nasıl dağıtacağını söyleyen dosya.
8. Şimdi reponun CI/CD -> İşlem Hatları bölümüne gidin ve yeni eklenen işlem hattının performansını gözlemleyin.
9. Bir süre sonra boru hattı işi tamamlanacak ve web sitesi GitLab Sayfalarına dağıtılacak.

İşte sonuç.

Artıları ve eksileri

Paketlerin kurulumu yavaştır ve çalışmasını sağlamak için ekstra kod eklemeniz gerekir, ancak sihirbaz yalnızca dört adımla dağıtılmasıyla son derece sezgiseldir.

İşleme

Arka plan

Render, 2019’da kullanıma sunulan yeni bir çocuk. İnsanların hizmetlerini (statik web siteleri dahil) dağıtma şeklini bozmaya çalışıyor. Şu ana kadar gayet iyi gidiyorlar ve sayıları artıyor.

Nasıl kullanılır

1. Render’a kaydolun veya oturum açın.
2. “Yeni” düğmesine basarak ve “Statik Site”yi seçerek yeni bir statik web sitesi oluşturun.
3. Dağıtmak istediğiniz repoyu seçin.
4. Sakla iplik; iplik yapısı derleme ayarında derleme komutu. Ne yazık ki, ile çalışmıyor npm ci; npm çalıştırma derlemesi diğer hizmetlerin yaptığı gibi. “Yayınlama dizini”ni şu şekilde değiştirin: uzaklık ve “Statik Site Oluştur”u tıklayın.
5. Bir süre sonra Render kodu dağıtacaktır.

İşte Render’dan canlı URL.

Artıları ve eksileri

Gerçekten hızlı, ancak ‘npm ci’ ve ‘npm run build’ komutlarıyla projemiz için pek iyi çalışmıyor. Sadece ‘iplik’ işe yarıyor gibi görünüyor.

Dalgalanma

Arka plan

Surge bir süredir ortalıkta dolaşıyor. Her şeyden önce hizmetlerinin kullanımı basittir ve statik web sitenizi dağıtmak için yalnızca bir veya iki komut yeterlidir. Ücretsizdir ancak aylık 30$ tutarında ücretli bir plan sunar. Aletin metaneti onu parlatan şeydir. Karmaşık bir kuruluma gerek yoktur, sadece “surge”ü kurun ve “surge” ile çalıştırın.

Nasıl kullanılır

1. Hazırlanmak için çalıştırın npm çalıştırma derlemesi içinde statik dosyalar oluşturmak için uzaklık dizin. dalgalanma bunları dağıtım için kullanacaktır.
2. Çalıştır npm kurulumu –küresel dalgalanma
3. Sonra koş dalgalanma.

Dikkat edilmesi gereken birkaç nokta:
İlk kez çalıştırıyorsanız Surge’de bir hesap oluşturmanız gerekir. Merak etmeyin, çok kolay. Sadece e-postanızı ve istediğiniz şifreyi girin.

Ardından, “proje”yi girmeniz istenecektir; bu, projeye giden yol olmalıdır. uzaklık dizin. Sadece ekleyebilirsiniz uzaklık Dağıttığınız deponun içinde dalgalanma yaşarsanız size verilen yola.

Ardından web sitenizin gelecekteki URL değerini girin. Benzersiz bir şey deneyin çünkü ne dalgalanma teklif işime yaramadı.

URL girişinden sonra, dalgalanma içerikleri şuradan dağıtacak: uzaklık belirtilen URL’e aktarın. İşte elde ettiklerim:

Artıları ve eksileri

Hızlı ve basittir ve ayrı bir arayüz benimsemenizi gerektirmez; ancak uygulamanız için kullanılabilir bir URL öneremez.

Her barındırma hizmeti için dağıtım zamanı

En iyi 3 ücretsiz React barındırma hizmetimiz

1. Netlify
2. Vercel
3. Dalgalanma

Temel çıkarımlar

Bu ücretsiz React uygulama barındırma hizmetlerinin her birini test ettikten sonra Netlify’ın grubun en iyisi olduğunu düşünüyoruz. İhtiyacınız olabilecek birçok özellik ile hızlı dağıtımlar sağlar. Hemen ardından pek çok özelliğe sahip olan ve ilk kurulumdan sonra oldukça hızlı olan Vercel gelir. Ayrıca, yükseltmeye karar verirseniz oldukça ucuz olabilecek minimal bir dağıtım aracı olan Surge’ümüz var.

Ön uç derlemenizi otomatikleştirin ve uygulamanızı 10 kat daha hızlı gönderin. Daha fazla bilgi edin.