e
sv

React uygulamalarını GitHub Pages'a dağıtma

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

GitHub Pages ile statik bir web sitesi kurmanın basitliği, React uygulamalarına kolayca aktarılabilen bir süreçtir. Sadece birkaç adımda, bir React uygulamasını GitHub Pages'de ücretsiz olarak barındırmak veya kendi özel alan adınıza veya alt alan adınıza dağıtmak için oluşturmak kolaydır.

Bu makalede, React uygulamalarının GitHub Sayfalarında nasıl dağıtılacağını keşfedeceğiz. Ayrıca, statik web sitemiz için GitHub Sayfalarında nasıl özel bir alan oluşturulacağını da göstereceğiz.

Başlayalım!

İleri atla:

Önkoşullar

GitHub Sayfaları nedir?

GitHub Pages, bir depoya HTML, JavaScript ve CSS dosyaları eklemenize ve barındırılan bir statik web sitesi oluşturmanıza olanak tanıyan bir GitHub hizmetidir.

Web sitesi github.io etki alanında (örneğin, https://username.github.io/repositoryname ) veya kendi özel etki alanınızda barındırılabilir. Bir React uygulaması GitHub Sayfalarında benzer şekilde barındırılabilir.

GitHub Pages'e bir React uygulaması nasıl dağıtılır

React uygulamanızı GitHub Pages'e dağıtmak için şu adımları izleyin:

  1. React uygulamanızı kurun
  2. Projeniz için bir GitHub deposu oluşturun
  3. React uygulamanızı GitHub deponuza gönderin

React uygulamasını ayarlama

Yeni bir React uygulaması oluşturarak başlayalım. Bu eğitim için create-react-app kullanacağız, ancak projeyi istediğiniz gibi ayarlayabilirsiniz.

Bilgisayarınızdaki terminali açın ve tercih ettiğiniz dizine gidin. Bu eğitim için, projeyi masaüstü dizininde şu şekilde kuracağız:

 cd masaüstü 

create-react-app kullanarak bir React uygulaması oluşturun:

 npx create-tepki uygulaması "proje-adınız"

Sadece birkaç dakika içinde create-react-app yeni bir React uygulamasının kurulumunu tamamlamış olacak!

Şimdi yeni oluşturulan React uygulaması proje dizinine gidelim, şöyle:

 cd "proje-adınız"

Bu öğretici, bir React uygulamasının GitHub Pages'e nasıl dağıtılacağını göstermekle sınırlıdır, bu nedenle herhangi bir ek değişiklik yapmadan mevcut kurulumu olduğu gibi bırakacağız.

GitHub deposu oluşturma

Bir sonraki adım, projemizin dosyalarını ve revizyonlarını depolamak için bir GitHub deposu oluşturmaktır.

GitHub hesabınızda, sağ üstteki + simgesine tıklayın ve yeni bir depo kurmak için talimatları izleyin.

Artı Simgesi

Deponuz başarıyla oluşturulduktan sonra şuna benzeyen bir sayfa görmelisiniz:

Hızlı Kurulum Sayfası

Mükemmel! Bir sonraki adıma geçelim.

React uygulamasını GitHub deposuna gönderme

GitHub uzak deposu kurulduğuna göre, bir sonraki adım, değişiklikleri izleyebilmemiz ve yerel geliştirme ortamımızı uzak depoyla senkronize tutabilmemiz için projede Git'i başlatmaktır.

Değişiklikleri izleme ve senkronize etme

Git'i aşağıdaki komutla başlatın:

 git init

Kodu GitHub deposuna gönderme

Şimdi kodumuzu taahhüt edip GitHub'daki şubemize göndereceğiz. Bunu yapmak için, yeni bir depo oluşturduğunuzda aldığınız kodu kopyalayıp yapıştırmanız yeterlidir (yukarıdaki depo ekran görüntüsüne bakın).

 git commit -m "ilk taahhüt"
git şubesi -M ana
git uzaktan kaynak ekle https://github.com/nelsonmic/testxx.git
git push -u kökenli ana

GitHub Pages bağımlılık paketini ekleme

Ardından, projemize gh-pages paketini kuracağız. Paket, derleme dosyalarını GitHub'da barındırılabilecekleri bir gh-pages dalında yayınlamamıza olanak tanır.

gh-pages npm aracılığıyla geliştirici bağımlılığı olarak yükleyin:

 npm gh sayfaları yükleyin --save-dev

Dağıtım komut dosyalarını ekleme

Şimdi, GitHub depomuzu React uygulamamızın konuşlandırılacağı konuma yönlendirebilmemiz için package.json dosyasını yapılandıralım.

Ayrıca package.json dosyasına predeploy eklememiz ve komut dosyalarını deploy gerekecek. predeploy komut dosyası, React uygulamasını paketlemek için kullanılır; deploy komut dosyası, paketlenmiş dosyayı dağıtır.

package.json dosyasına şu yapıyı izleyen bir homepage özelliği ekleyin: http:// {github-username}.github.io/{repo-name}

Şimdi scriptleri ekleyelim.

package.json dosyasında, scripts özelliğine gidin ve aşağıdaki komutları ekleyin:

 "predeploy" : "npm run build",
"deploy" : "gh-pages-d build",

İşte görsel bir referans:

Komutlar

Bu kadar! package.json dosyasını yapılandırmayı bitirdik.

Değişiklikleri taahhüt etme ve kod güncellemelerini GitHub deposuna gönderme

Şimdi değişikliklerimizi uygulayalım ve kodu şu şekilde uzak depomuza gönderelim:

 git ekle.
git commit -m "gh-sayfalarını ayarla"
git itme

React uygulamamızı basitçe şu komutu çalıştırarak konuşlandırabiliriz: npm run deploy . Bu, React uygulamamızın paketlenmiş bir sürümünü oluşturacak ve onu GitHub'daki uzak depomuzdaki bir gh-pages şubesine gönderecektir.

Dağıtılan React uygulamamızı görüntülemek için Ayarlar sekmesine gidin ve Sayfalar menüsüne tıklayın. Dağıtılan React uygulamasına bir bağlantı görmelisiniz.

Sayfalar Menüsü

Özel alan ekleme

React uygulamamızı GitHub'ın etki alanına ücretsiz olarak dağıtabiliriz, ancak Github Pages ayrıca özel alt etki alanlarını Apex etki alanlarını da destekler. Aşağıda, her bir alt alan adının nasıl göründüğünü gösteren örnekler verilmiştir:

Desteklenen özel alan Örnek
www alt etki alanı http://www.logdeploy.com
Özel alt alan app.logdeploy.com
apeks alanı logdeploy.com

Şu anda https://nelsonmic.github.io/logdeploy/ adresine gidersek en son yayınlanan web sitemizi göreceğiz. Ancak bunun yerine özel bir alt alan adı veya bir Apex alanı da kullanabiliriz.

Bunları ayarlama adımları şunlardır:

GitHub özel alt etki alanına dağıtma

  1. Seçtiğiniz bir alan hizmet sağlayıcısından bir alan adı satın alın (örn. Namecheap veya GoDaddy )
  2. Özel etki alanını GitHub Sayfalarına bağlayın. Bunu yapmak için Ayarlar sekmesindeki Sayfalar menüsüne tıklayın. Ardından, Özel alan alanına gidin ve yeni satın alınan alan adını girin. Bu, deponuzun kökünde bir CNAME dosyasıyla otomatik olarak bir taahhüt oluşturacaktır.
    Sayfalar Menü Sekmesi
  3. Etki alanı hizmet sağlayıcınızdaki CNAME kaydının, dağıtılan web sitesinin GitHub URL'sini gösterdiğinden emin olun (bu örnekte, nelsonmic.github.io/logdeploy/). Bunu yapmak için, etki alanı hizmet sağlayıcısının DNS yönetimi sayfasına gidin ve username.github.io işaret eden bir CNAME kaydı ekleyin; burada username GitHub kullanıcı adınızdır.

GitHub Apex etki alanına dağıtma

Bir Apex etki alanına dağıtmak için, özel bir alt etki alanına dağıtmak için ilk iki adımı izleyin, ancak üçüncü adım için aşağıdakini değiştirin:

  1. Etki alanı hizmet sağlayıcısının DNS yönetim sayfasına gidin ve gösterildiği gibi Apex etki alanınızı GitHub Sayfaları IP adreslerinize yönlendiren bir ALIAS kaydı veya ANAME kaydı ekleyin:
  • 185.199.108.153
  • 185.199.109.153
  • 185.199.110.153
  • 185.199.111.153

Çözüm

GitHub Pages'i kullanmaya başlamanın kolay ve ücretsiz olması, onu tüm beceri seviyelerindeki geliştiriciler için çok çekici bir seçenek haline getiriyor.

Bu makalede, bir React uygulamasını statik bir web sitesine dönüştürmek için GitHub Sayfalarının nasıl kullanılacağını gösterdik. React uygulamasının GitHub'ın etki alanına ve özel bir alt etki alanına nasıl dağıtılacağını gösterdik. Kodunuzu dünyayla paylaşmanın kolay bir yolunu arıyorsanız GitHub Pages harika bir seçenektir.

React uygulamalarını GitHub Sayfalarına Dağıtma yazısı ilk olarak LogRocket Blog'da göründü.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

React uygulamalarını GitHub Pages'a dağıtma