React, dinamik web uygulamalarında işlevsel kullanıcı arayüzleri oluşturmak için kullanılan popüler bir JavaScript kitaplığıdır. Belki bir sonraki Instagram veya Airbnb'yi oluşturmak için React kodunda hata ayıklayarak uzun bir saat harcadınız.
Ne inşa ediyor olursanız olun, nihai hedef her zaman işinizi dünyaya sergilemektir. Netlify gibi barındırma platformlarının kullanışlı olduğu yer burasıdır. Dağıtım sürecini kolaylaştıran bir araç paketi sağlarlar.
Netlify'ın kullanımı kolay dağıtım araçlarını kullanarak React uygulamalarınızı nasıl dağıtacağınızı öğrenmek için takip edin.
Netlify Nedir?
Netlify, web üzerinde uygulama barındırmayı ve dağıtmayı çok daha kolay hale getiren özelliklere sahip bulut tabanlı bir geliştirme platformudur. Basitçe söylemek gerekirse, bir web uygulamasını saniyeler içinde dağıtmanıza ve barındırmanıza olanak tanıyan süreci kolaylaştıran ve basitleştiren bir dizi araç ve hizmet sağlar.
Netlify'ın Ana Özellikleri
Netlify, dağıtım sürecini basitleştiren bir dizi özelliğe sahiptir.
- Geliştirme ekiplerinin projeler üzerinde verimli ve etkili bir şekilde işbirliği yapmasını sağlamak için temel erişim ve sürüm kontrolü özellikleri sağlar.
- İhtiyaçlarınıza göre ayarlayabileceğiniz güvenli barındırma hizmetleri sunar. Ayrıca, veri kaybı durumunda otomatik yedekleme sağlar.
- GitHub, GitLab ve Bitbucket gibi popüler bulut geliştirme hizmetleriyle sorunsuz bir şekilde bütünleşir.
- Uygulamanız için özel bir etki alanı URL'si ve bir SSL sertifikası kurmayı ve yapılandırmayı kolaylaştıran özellikler sağlar.
Bir Demo React Uygulaması Oluşturun
- Başlamak için önce yapmanız gerekenler bir demo React uygulaması oluşturun sonunda Netlify'da konuşlandıracağınız. Bir React uygulaması oluşturmak için terminalinizde aşağıdaki komutu çalıştırın:
npx create-react-app demo-tepki-netlify-app - Ardından, geliştirme sunucusunu döndürmek için bu terminal komutunu çalıştırın:
Devam edin ve sonuçları şu adreste tarayıcınızda görüntüleyin: http://localhost: 3000.Npm başlangıç - Son olarak, uygulamanızın üretime hazır bir sürümünü oluşturmak için bu komutu çalıştırın:
Bu komut, gerekli üretim dosyalarını ve varlıkları, kök dizindeki build adlı yeni bir klasörde oluşturur. Derleme klasörü, uygulamayı dağıtmak için gereken her şeyi içeren tüm uygulamanın küçültülmüş bir sürümünü yakalar.npm derlemeyi çalıştır
React Uygulamasını Netlify'da Dağıtın
Netlify, React uygulamanızı dağıtmak için kullanabileceğiniz üç yöntem sağlar. Yapabilirsiniz:
- Projenizi GitHub gibi bir Git deposu ana bilgisayarından içe aktarın.
- Sürükle ve Bırak Özelliğini kullanın.
- Netlify'ın CLI'si olan komut satırı aracını kullanın.
GitHub İçe Aktarma Özelliğini Kullanarak Dağıtma
- La başlamak GitHub'da depo oluşturma React uygulama proje dosyalarınızı barındırmak için. Alternatif olarak, proje dosyalarınızı GitLab, Bitbucket veya Azure DevOps gibi desteklenen diğer herhangi bir Git sağlayıcısında da barındırabilirsiniz.
- Ardından, şu adreste bir hesap için kaydolun: Netleştir. Kaydolduktan sonra, hesap kontrol panelinize gidin ve Siteler sekme.
- Tıkla Git'ten içe aktar düğme.
- Tercih Edilen Git sağlayıcı platformunuzu seçin. Netlify, hesabınıza ve depolarınıza erişim izni vermek için Git sağlayıcınızla kimlik doğrulamanızı isteyecektir.
- Bunu yaptıktan sonra Netlify, Git sağlayıcınızda bir havuz listesi görüntüler. Başlangıçta Git sağlayıcınıza gönderdiğiniz React proje havuzunu seçin.
- Depoyu seçtikten sonra, Netlify'ın dağıtım sürecini nasıl işlemesi gerektiğini belirtmeniz gerekir. Genellikle statik web siteleri için herhangi bir değişiklik yapmanız gerekmez, ancak React uygulamaları gibi dinamik web siteleri için derleme ayarlarını yapmanız gerekir. Şans eseri, Netlify varsayılan olarak uygulamayı oluşturmak için kullanılan çerçeveyi otomatik olarak algılar ve alanları gerekli derleme ayarlarıyla doldurur.
- Son olarak tıklayın Siteyi dağıt süreci bitirmek için.
Uygulamayı tarayıcınızda görüntülemek için sağlanan URL'ye tıklayın. Özel bir etki alanı URL'niz varsa, sitenin ayarlarından URL'yi güncelleyerek Netlify'a bunu sitenizle kullanması talimatını verebilirsiniz.
Sürükle ve Bırak Özelliğini Kullanarak Dağıtın
Bu, React uygulamanızı Netlify'a dağıtmanın en basit yöntemidir. Derleme klasörünü Netlify'ın sürükle ve bırak kullanıcı arayüzüne sürükleyip bırakmanız yeterlidir.
- Netlify'ın kontrol panelinde, Alan sekme. Sonra, tıklayın yeni site ekle ve sonra seçin Manuel olarak dağıtın açılır menü seçeneklerinden.
- Sürükle ve bırak özelliği sayfasında, React yapı dosyalarını içeren klasörü seçin ve bu kullanıcı arayüzüne bırakın. Proje anında Netlify üzerinde konuşlandırılacaktır. Alternatif olarak, üzerine tıklayabilirsiniz. yüklemek için göz atın dosya sisteminden derleme klasörünüzü seçmek için.
Netlify'ın Komut Satırı Arayüzünü Kullanarak Dağıtın
Netlify'ın komut satırı arayüzünü (CLI) kullanarak, React uygulamanızı doğrudan bir terminalden dağıtabilirsiniz. Ek olarak, Netlify'ın CLI'si, sürekli dağıtımı yapılandırabilmenizi sağlar, böylece Git deponuza yeni güncellemeler gönderip gönderdiğinizde otomatik olarak dağıtılırlar.
- Netlify'ın CLI'sini kurmak için terminalinizde aşağıdaki komutu çalıştırın:
npm düzenlemek netlify-cli -g - Şimdi, uygulamanızı dağıtmak için aşağıdaki komutu çalıştırın. Dağıtmadan önce projenin çalışma dizininde olduğunuzdan emin olun.
Netlify'ın CLI'si, hesabınızda değişiklik yapmasına izin vermenizi isteyecektir. İzni verdikten sonra, kaydolurken verdiğiniz ekip hesabının adını verin, ardından uygulamanın dizinini mevcut bir web sitesine bağlamayı veya yeni bir web sitesi oluşturup yapılandırmayı seçin. bir. Özel bir web sitesi adı ve derleme klasörünüzün adını sağlayarak bitirin.netleştir konuşlandır - CLI, uygulamanızın taslak sürümünü dağıtacaktır. Her şeyin beklendiği gibi çalıştığını kontrol edin.
- Son olarak, uygulamanızı üretime dağıtmak için aşağıdaki komutu çalıştırın.
netleştir konuşlandır --ürün
Üç Dağıtım Yöntemini Karşılaştırma
GitHub içe aktarma yöntemi, bağlantı kurmanıza olanak tanıdığı için üretim uygulamalarını dağıtmak için en verimli yöntemdir. Git deponuzu doğrudan Netlify'a aktarın ve kodunuzu canlı web siteleri veya uygulamalarıyla senkronize halde tutun. Git deponuzdaki değişiklikleri taahhüt ettiğinizde ve gönderdiğinizde, Netlify web sitesini otomatik olarak güncelleyecektir.
Sürükle ve bırak yöntemi, kodlama veya kurulum gerektirmediğinden, statik siteleri dağıtmak için daha basittir. Ancak, havuzunuzda değişiklik yaptığınızda otomatik güncellemelere izin vermez.
CLI yöntemi, size dağıtım süreci üzerinde tam denetim sağladığı ve özel yapılandırmalara izin verdiği için en kapsamlı yöntemdir. Bu yöntem, Netlify hakkında zaten güçlü bir anlayışa sahipseniz ve komut satırıyla rahatça çalışıyorsanız en uygunudur.
Her üç yöntem de uygulamaları Netlify'a dağıtmak için kullanışlıdır. Sonuçta, hangisinin kullanılacağı seçimi, her bir projenin ihtiyaçlarına bağlı olacaktır.
Diğer Uygulamaları Dağıtmak için Netlify'ı Kullanma
Netlify, yalnızca React dışındaki uygulamaları dağıtmak için kullanabileceğiniz güçlü ve çok yönlü bir araçtır. Angular gibi farklı çerçevelerle oluşturulmuş statik web sitelerini ve dinamik uygulamaları dağıtmak ve barındırmak için kullanabilirsiniz.
Kullanıcı dostu arayüz, API'lerinizi yapılandırmayı, yönetmeyi ve dağıtmayı kolaylaştırır.
