React.js cPanel'e Nasıl Kurulur: Kılavuz 2024

Yayınlanan: 2024-09-01
İçindekiler
  • Önkoşullar
  • 1. Adım: React.js Uygulamanızı Hazırlayın
  • Adım 2: cPanel Ortamınızı Kurun
  • 3. Adım: Sunucu Ayarlarını Yapılandırın
  • 4. Adım: Sonlandırma ve Test Etme
  • Sorun giderme
  • Çözüm

React.js, dinamik, etkileşimli kullanıcı arayüzleri oluşturmak için en popüler JavaScript kitaplıklarından biri haline geldi. Yaygın olarak Node.js gibi arka uç çerçeveleriyle kullanılsa da birçok geliştirici, React.js uygulamalarını web barındırma hesaplarını yönetmek için popüler bir kontrol paneli olan cPanel kullanan paylaşılan barındırma ortamlarına dağıtmaya çalışır.

Bu makale, barındırma sağlayıcınız özel olarak JavaScript çerçevelerini desteklemese bile, cPanel kullanarak bir React.js uygulamasını yükleme ve dağıtma sürecinde size rehberlik edecektir.

Ayrıca şunu da okuyabilirsiniz: React Apps 2024 için En İyi 7 Hosting (Karşılaştırmalı)

Önkoşullar

Kurulum sürecine geçmeden önce yerine getirmeniz gereken birkaç önkoşul vardır:

  1. Dağıtıma Hazır Bir React.js Uygulaması : React uygulamanızın eksiksiz ve üretime hazır olduğundan emin olun. Bu, tüm geliştirme çalışmalarının tamamlandığı ve uygulamanın kullanıcılara sunulabilecek bir sürümünü oluşturmaya hazır olduğunuz anlamına gelir.
  2. cPanel Erişimi : Web barındırma hizmetiniz tarafından sağlanan cPanel'e erişmeniz gerekir. Çoğu paylaşımlı barındırma sağlayıcısı, hizmetlerinin bir parçası olarak cPanel'i sunar.(Hostinger'ı “ Kodsuz ” kupon kodunu kullanan özel teklifimizle öneriyoruz)
  3. Alan Adı : React uygulamanızı dağıtacağınız kayıtlı bir alan adı veya alt alan adı. Henüz bunu ayarlamadıysanız mevcut bir alan adını kullanabilir veya cPanel aracılığıyla bir alt alan adı oluşturabilirsiniz.

1. Adım: React.js Uygulamanızı Hazırlayın

Üretim Yapısı Oluşturun

React.js uygulamanızı cPanel'e dağıtmanın ilk adımı, uygulamanızın üretim yapısını oluşturmaktır. Bu yapı performans açısından optimize edilmiş olup web üzerinde verimli bir şekilde çalışmasını sağlar. Bu adımları yerel bilgisayarınızda yapmanız gerekir.

  1. Terminali Açın : Terminalinizi veya komut isteminizi kullanarak React proje dizininize gidin.
  2. Derleme Komutunu çalıştırın : npm run build Paket yöneticiniz olarak Yarn kullanıyorsanız şunu kullanırsınız: yarn build Bu komut, proje dizininizde bir build klasörü oluşturur. build klasörü, HTML, CSS ve JavaScript dosyaları da dahil olmak üzere uygulamanızı çalıştırmak için gerekli tüm statik dosyaları içerir.

Derlemeyi önizleyin (İsteğe bağlı)

Dağıtımdan önce, her şeyin doğru şekilde çalıştığından emin olmak için üretim yapısını yerel olarak önizlemek iyi bir fikirdir. Bunu basit bir sunucu aracı kullanarak yapabilirsiniz:

  1. Serve'i Global Olarak Kurun : npm install -g serve
  2. Build'ı servis edin : serve -s build Bu komut, yerel bir sunucuyu başlatır ve uygulamanızı build dizininden sunarak tarayıcınızda önizlemenizi sağlar.

Adım 2: cPanel Ortamınızı Kurun

React uygulamanız dağıtıma hazır olduğunda cPanel ortamınızı yapılandırmanız gerekir.

Alt Alan Adı Oluşturun (İsteğe bağlı)

React uygulamanıza bir alt alan adı (örneğin, react.yourdomain.com ) aracılığıyla erişilmesini istiyorsanız cPanel'de bir tane oluşturmanız gerekir:

  1. cPanel'de oturum açın : cPanel'e erişmek için barındırma sağlayıcınızın oturum açma portalını kullanın.
  2. Alt Alan Adlarına Gidin : Alan Adları bölümünde “Alt Alan Adları”na tıklayın.
  3. Yeni Bir Alt Alan Adı Oluşturun : Alt alan adınız için istediğiniz adı girin ve belgenin kök dizinini belirtin. Varsayılan ayarları bırakırsanız cPanel, public_html altında alt alan adınızın adını taşıyan yeni bir dizin oluşturacaktır.

Derleme Dosyalarını Yükleyin

Üretim yapısı hazır olduğundan artık sunucunuza yükleyebilirsiniz.

  1. Dosya Yöneticisine Erişim : cPanel'de “Dosyalar” bölümünün altındaki “Dosya Yöneticisi”ni bulun.
  2. İstediğiniz Dizine Gidin : Bir alt alan adı oluşturduysanız, ilgili dizine gidin (örneğin, public_html/react ). Ana etki alanında dağıtım yapıyorsanız public_html dizinini kullanın.
  3. Derleme Klasörünü Yükleyin :
    • Öncelikle yerel makinenizdeki build klasörünü bir ZIP dosyasına sıkıştırın.
    • Bu ZIP dosyasını istediğiniz dizine yüklemek için Dosya Yöneticisindeki “Yükle” düğmesini kullanın.
    • Yüklendikten sonra dosyaya sağ tıklayın ve içeriği açmak için "Çıkart"ı seçin.

3. Adım: Sunucu Ayarlarını Yapılandırın

Derleme dosyalarını yükledikten sonra, özellikle React uygulamanız React Router ile istemci tarafı yönlendirmeyi kullanıyorsa, bazı sunucu ayarlarını yapılandırmanız gerekebilir.

.htaccess Kurulumu (İsteğe bağlı)

Uygulamanız HTML5 pushState geçmiş API'sine dayanan React Router kullanıyorsa sunucunuzun istekleri doğru şekilde işleyecek şekilde yapılandırılması gerekir. Kullanıcılar ana sayfa dışındaki rotalara doğrudan gidebiliyorsa bu özellikle önemlidir.

  1. .htaccess'i Bulun veya Oluşturun :
    • public_html veya alt alan adı dizininizde bir .htaccess dosyası olup olmadığını kontrol edin.
    • Değilse .htaccess adında yeni bir dosya oluşturun.
  2. Yönlendirme Kuralları Ekle :
    • .htaccess dosyasını açın ve aşağıdaki yapılandırmayı ekleyin: bashCopy code Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]
    Bu yapılandırma, tüm isteklerin React ile oluşturulanlar gibi tek sayfalı uygulamalar için gerekli olan index.html dosyası aracılığıyla yönlendirilmesini sağlar.

Adım 4: Sonlandırma ve Test Etme

Her şey yüklenip yapılandırıldıktan sonraki adım dağıtımınızı tamamlamak ve her şeyin beklendiği gibi çalıştığından emin olmaktır.

Dosya İzinlerini Kontrol Edin

Dosya ve dizinlerin web sunucusu tarafından erişilebilmesi için doğru izinlere sahip olduğundan emin olun. Genellikle dizinlerin izinleri 755 ve dosyaların 644 ayarlanmış olması gerekir.

Dağıtımı Test Edin

React uygulamanızın sorunsuz çalıştığını doğrulamak için alan adınızı veya alt alan adınızı (örneğin, react.yourdomain.com ) bir web tarayıcısında ziyaret edin. Her şeyin doğru çalıştığından emin olmak için tüm sayfaları ve özellikleri kontrol edin.

Herhangi bir sorunla karşılaşırsanız tarayıcının geliştirici araçları sorunların teşhisinde yardımcı olabilir. Ek olarak cPanel'in hata günlükleri sunucu tarafı sorunlarına ilişkin bilgiler sağlayabilir.

Sorun giderme

Bir React uygulamasını cPanel'e dağıtmak zaman zaman sorunlara yol açabilir. İşte bazı yaygın sorunlar ve bunların çözümleri:

  • Yönlendirme Hataları : Uygulamanızın farklı sayfalarına gitmek 404 hatasıyla sonuçlanırsa, .htaccess dosyanızın istemci tarafı yönlendirmeyi işleyecek şekilde doğru şekilde yapılandırıldığından emin olun.
  • Dosya Bulunamadı Hataları : build klasöründeki tüm dosyaların doğru şekilde yüklendiğini ve sunucunuzdaki doğru dizinde olduklarını bir kez daha kontrol edin.
  • Yanlış Dosya İzinleri : Dosyalar yüklenmiyorsa, dosya izinlerinin doğru ayarlandığını kontrol edin (dizinler için 755 ve dosyalar için 644 ).
  • Önbelleğe Alma Sorunları : Bazen önbelleğe alma nedeniyle değişiklikler hemen görünmeyebilir. Sorunun devam edip etmediğini görmek için tarayıcınızın önbelleğini temizleyin veya siteye gizli modda erişmeyi deneyin.

Çözüm

Bir React.js uygulamasını cPanel tarafından barındırılan bir sunucuya dağıtmak, özellikle Vercel veya Netlify gibi hizmetlerle daha otomatik dağıtım süreçlerine alışkınsanız veya şu makalemize göz atıyorsanız, ilk başta zor görünebilir: 2024'ün En İyi 10 Node.js Barındırma Sağlayıcısı ( Ucuz ve Ücretsiz). Ancak bu kılavuzda özetlenen adımları takip ederek React uygulamanızı cPanel'de başarıyla kurup çalıştırabilirsiniz.

Bu süreç, React uygulamanızın üretime hazırlanmasını, cPanel ortamınızın kurulmasını, gerekli sunucu ayarlarının yapılandırılmasını ve ortaya çıkan sorunların giderilmesini içerir. Tamamlandığında, React.js uygulamanız yayında olacak ve alan adınız veya alt alan adınız aracılığıyla tüm dünya tarafından erişilebilir olacaktır.

Daha fazla deneyim kazandıkça arka uç hizmetlerinin entegrasyonu, sürekli dağıtım ardışık düzenlerinin kurulması veya performansın daha da optimize edilmesi gibi daha gelişmiş konuları keşfedebilirsiniz. Şimdilik React projelerinizi dünyayla paylaşmanın tadını çıkarın!