Netlify için Ön Uç Uygulaması Nasıl Dağıtılır?

Ön uç uygulamaları dağıtmak bugün büyük bir şey değil. Modern teknolojiler ve barındırma platformları ile bir siteyi dakikalar içinde dağıtabiliriz. Orada birçok barındırma platformu var. Ancak bu makale için Netlify ile ilgileniyoruz.

Ön uç uygulamamızı Netlify'a dağıtalım .

Ön Uç Uygulamaları

React, Vue, Angular, vb. gibi farklı türde ön uç kitaplıkları ve çerçeveleri vardır ve iyi haber şu ki, bunların hepsi aynı paket paketleyiciyi kullanıyor. Farklı kitaplıklar ve çerçevelerle oluşturulan tüm ön uç uygulamalarının dağıtımı benzerdir. Bu nedenle, bu kütüphanelerden ve çerçevelerden herhangi biriyle gitmekte fayda var.

Ayrıca herhangi bir kitaplık veya çerçeve olmadan ön uç uygulamaları oluşturabiliriz. Bu, bir zamanlar ön uç uygulamaları oluşturmanın geleneksel yoludur. Ancak artık çok değişiyor. Böylece ön uç uygulamaları farklı şekillerde oluşturabiliriz. Bununla birlikte, dağıtım süreci tüm bu farklı ön uç uygulamaları için aynıdır.

Bir kitaplık ile oluşturulmuş bir ön uç uygulamasının ve herhangi bir kitaplık veya çerçeve olmadan bir diğerinin dağıtıldığını göreceğiz. React ve Plain JavaScript kullanarak dağıtım için minimal ön uç uygulamaları oluşturalım.

Kurmak

Dağıtım gösterimi için basit React ve JavaScript uygulamaları oluşturacağız. Onları takip etmek için de yaratırsınız. Veya zaten ön uç uygulamalarınız varsa, dağıtım bölümüne atlayın.

Netlify'a dağıtırken herhangi bir ön uç uygulamasının giriş noktasının index.html olması gerektiğini hatırlamamız gerekiyor.

Herhangi bir kütüphane veya çerçeve kullanarak uygulamalar oluşturduysak, bunun için endişelenmemize gerek yok. Varsayılan olarak, kitaplıklar ve çerçeveler bizim için derleme sürecinde index.html dosyası oluşturur. Ancak, elimizde sade JavaScript uygulamalarımız olduğunda, uygulamamız için girdi olarak bir index.html dosyası oluşturmamız gerekiyor.

Tepki Uygulaması

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

 npx create-react-app demo

Dağıtımdan önce uygulamayı dilediğiniz gibi güncelleyebilirsiniz. Ana sayfadaki bir metin satırını yeni güncelledim. Yine de önemli değil :).

Düz JavaScript Uygulaması

Basit bir JavaScript uygulaması oluşturmak için aşağıdaki adımları izleyin.

• Demo adlı bir klasör oluşturun.
• index.html , style.css ve script adında üç dosya oluşturun . js .
• Burada index.html , uygulamamızın giriş noktasıdır.

Yaratıcılığınızı ortaya çıkarın ve uygulamayı güncelleyin. Sadece uygulamaya basit şeyler ekliyorum.

dağıtma

Netlify'a ön uç uygulamalarının dağıtımına gelince, iki seçeneğimiz var. Uygulamaları GitHub, GitLab, BitBucket, vb.'den Netlify'a doğrudan dağıtabiliriz. Veya Netlify CLI'yi (komut satırı arayüzü) kullanarak konuşlandırabiliriz. Uygulamalarımızı dağıtmak için her birini bilmek zorunlu değildir. Ancak, dağıtım için sahip olduğumuz farklı seçenekler iyi.

Her birini tek tek inceleyelim.

GitHub

Kodumuzu barındırmak için GitHub kullanıyoruz. Zorunlu olmadığı için kullanmanıza gerek yoktur. Diğer platformları dilediğiniz gibi kullanabilirsiniz.

Dağıtabileceğimiz iki tür uygulama vardır. Ancak süreç her ikisi için de benzer görünüyor. Gerçi ikisini de sana göstereceğim. İçinde esas olarak iki adım vardır. Onlar

• Kodu GitHub'a gönderin.
• Netlify kullanarak uygulamayı GitHub'dan dağıtın.

İlk kısım hem React hem de JavaScript uygulamaları için ortaktır. İlk adımla dağıtım işlemine başlayalım.

GitHub'da kodunuzun olmadığını varsayıyoruz. GitHub'da kodunuz varsa, kod gönderme bölümünü atlayabilirsiniz. git aracına ihtiyacınız var. Eğer makinenizde git kurulu değilse, devam etmeden önce onu kurmalısınız.

#1. Kodu GitHub'a Göndermek

• GitHub hesabınıza gidin ve demo adlı bir repo oluşturun.

• Repo oluşturulduktan sonra aşağıdaki gibi görebilirsiniz.

Şimdi kodumuzu yukarıda oluşturduğumuz depoya göndermemiz gerekiyor. Kodu basmak için repoda verilen komutları veya aşağıdaki komutları takip edebilirsiniz.

• Terminali veya cmd'yi açın.
• Proje dizininize gidin.
• git'i git init ile başlat
• Değişiklikleri yerel git git add .
• Değişiklikleri git commit -m 'Completed application' mesajıyla git commit -m 'Completed application'
• Uzak depoyu yerel depomuz git remote add origin 'your_repo_path' . your_repo_path uzak your_repo_path değiştirin. Depoda benimkine benzer şekilde [email protected]:hafeezulkareem/demo.git
• Şimdi git push -u origin main kodunu girin
• Bu kadar; kodumuzu GitHub'a aktardık.

Kodu reponuzda aşağıdaki gibi görebilirsiniz.

Kodumuzu GitHub'a göndermenin ilk adımını bitirdik. Düz bir JavaScript uygulaması dağıtıyorsanız, kodunuz aşağıdaki gibi görünebilir.

Bir sonraki adıma geçelim ve uygulamamızı Netlify'a dağıtalım.

#2. Netlify için GitHub kodunu dağıtma

Netlify'da bir hesabınız yoksa, bir tane oluşturun.

• Netlify web sitesine gidin.
• Hesabınıza giriş yapın.
• Aşağıda gösterildiği gibi Git'ten Yeni site adlı bir düğme görebilirsiniz.

• Dağıtıma başlamak için düğmeye tıklayın.
• Aşağıdaki gibi görünen dağıtım sayfasına gideceksiniz.

• Sayfada farklı kod barındırma platformları yapabilirsiniz. GitHub kullanıyoruz. Öyleyse, üzerine tıklayın.
• Aşağıdaki gibi GitHub hesabımıza giriş yapmak için yeni bir pencere açılacaktır.

• Netlify yetkilendirmesi için GitHub hesabınızda oturum açın.
• GitHub hesabınıza giriş yaptığınızda, pencere Authorized diyerek kapanacaktır.
• Şimdi, verilen arama çubuğundan depo adınızı arayın.

• Depoyu aradığınızda, depomuza Netlify erişimi vermediğimiz için görünmeyecektir. GitHub üzerinde Configure Netlify adlı bir düğme göreceksiniz.

• Düğmeye tıklayın ve erişimi onaylamak için GitHub hesap şifrenizi girin.

• Aşağıdaki gibi görünen bir Access sayfasına gideceksiniz.

• Aşağı kaydırın ve Depo Erişimi adlı bir bölüm göreceksiniz.

• İki seçenek var. Tüm depolarımıza veya ihtiyaç duyan bazılarına erişim verebiliriz. Hepsine değil, dağıttığımız depolara erişim vermek daha iyidir.
• Yalnızca depoları seç seçeneğini aşağıdaki gibi seçin .

• Aşağıdaki açılır listeye tıklayın ve dağıtmak istediğiniz depoyu arayın. Seçin.

• Kaydet düğmesine tıklayın.
• Netlify dağıtım sayfasına yönlendirilecektir. Ve yeni depoyu görebilirsiniz.

• Depoya tıklayın.
• Dağıtılacak bir dal, paketleri kurma komutu vb. gibi farklı ayrıntıları gösterecektir.

• master dışında farklı bir dalda tam kodunuz varsa, açılır menüden dalı seçerek güncelleyin.
• Son olarak, Siteyi dağıt düğmesine tıklayın. Sizi kontrol paneline yönlendirecektir.
• Siteyi dağıtmak biraz zaman alacak.

• Dağıtıldıktan sonra yayınlanan siteyi göreceksiniz.

Bu kadar.

Sitemizi Netlify'a başarıyla dağıttık. Canlı görmek için site URL'sine tıklayabilirsiniz.

Site ve domain ayarlarını istediğimiz gibi güncelleyebiliriz. Ancak, üzerinde konuşulacak başka bir konu olduğu için burada ele almayacağız. Dağıtımdan sonra düz JavaScript uygulaması aşağıdadır.

Dağıtım sürecinde hiçbir fark yoktur. Ancak uygulamanın giriş noktasını, yani index.html'yi unutmamayı unutmayın.

Şimdi, ön uç uygulamamızı dağıtmanın başka bir yöntemini öğrenmenin zamanı geldi.

#3. Netlify CLI kullanarak kod dağıtma

Netlify CLI, ön uç uygulamalarını terminalden veya komut satırından dağıtmak için bir komut satırı arabirimidir. Bazı ekstra adımlardan (yöntemin üstünde) geçmek istemediğinizde kullanışlıdır. Yukarıdaki yöntem gibi, React (herhangi bir kitaplık veya çerçeve) veya JavaScript uygulamalarını dağıtabiliriz.

Netlify CLI'nin tam belgelerine buradan ulaşabilirsiniz. Ancak, bir uygulamayı dağıtmak gerekli değildir. İleri seviyeye geçtiğinizde buna başvurabilirsiniz.

Netlify CLI kullanarak nasıl dağıtılacağını görelim.

Öncelikle makinemize yüklememiz gerekiyor. Düğüm paketi olarak mevcuttur. Böylece, npm kullanarak npm . Aşağıdaki komut ile kurulumunu yapalım.

 npm install netlify-cli -g

-g bayrağı, paketi her yerden erişebilmemiz için global olarak kurmaktır. Aşağıdaki resme benzer bir şey göreceksiniz.

Netlify CLI kullanarak React ve düz JavaScript uygulamalarını dağıtma adımlarını görelim.

• React (veya başka bir kitaplık veya çerçeve) uygulamasının build komutunu çalıştırın. Düz bir JavaScript uygulaması durumunda herhangi bir komut çalıştırmamız gerekmez.

 npm run build

• Oluştur komutu, kullandığınız kitaplığa veya çerçeveye göre değişebilir.
• Aşağıdaki gibi bir derleme klasörü göreceksiniz.

• React uygulaması olması durumunda klasör oluşturmak için dizininizi veya JavaScript uygulaması olması durumunda proje klasörünü değiştirin.

• Sonraki adımlara geçmeden önce bir Netlify hesabı oluşturmamız gerekiyor. Netlify'a gidin ve bir hesap oluşturun ve sonraki adımlara geçin.
• Şimdi, CLI kullanarak giriş yapmamız gerekiyor. Giriş yapmak için aşağıdaki komutu çalıştıralım.

 netlify login

• Yukarıdaki komut, Netlify hesabına giriş yapmak için varsayılan tarayıcıda yeni bir sekme açacaktır. Sizi Netlify sitesine götürecektir.
• Kimlik bilgilerinizi girin ve oturum açın. Oturum açtıktan sonra CLI'yi Yetkilendirmenizi isteyeceksiniz.

• Kendinizi doğrulamak için Yetkilendir'e tıklayın. Bundan sonra bir başarı mesajı göreceksiniz.

• Şimdi uygulamamızı dağıtma zamanı. Aşağıdaki dağıtma komutunu çalıştırın.

 netlify deploy

• Mevcut siteyi seçmenizi veya yeni bir site oluşturmanızı isteyecektir. Yeni bir site oluştur ve yapılandır'ı seçin (yukarı ve aşağı oklarınızı kullanın) ve Enter'a basın .

• Ardından, seçilecek Takımları gösterecek, seçmek için oklarınızı kullanacak ve Enter 'a basacaktır .

• Artık sitenizin alt alan adını girebilirsiniz. Yine de zorunlu değil. Ayrılırsak Netlify bizim için rastgele bir tane seçecek. İstersek daha sonra değiştirebiliriz. Şimdilik boş bırakıyorum.

• Dağıtmak istediğimiz dizine girmemizi isteyecek. Hedef dizine zaten gittik. Enter'a basalım . Diğer dizinleri de girebilirsiniz. Ama bu basit değil. Bu nedenle, önce hedef dizine gitmek ve ardından dağıtmak daha iyidir.

• Aşağıdaki gibi bir taslak URL için sitemizi dağıtacaktır.

• Sitenizi taslak URL'de kontrol edebilir ve her şeyin doğru olduğundan emin olabilirsiniz.
• Siteyi kontrol ettikten sonra aşağıdaki komutu kullanarak üretime yerleştirebiliriz.

 netlify deploy --prod

• Sadece dizini soracaktır. Dizine girin. Aynı dizindeysek, Enter 'a basmanız yeterlidir .
• Bu kadar. Sitemizin kurulumu tamamlandı. Kontrol etmek için siteyi ziyaret edebilirsiniz.

• Ve işte sonuç.

Netlify CLI kullanarak sitemizi Netlify'a dağıtmayı bitirdik . Netlify kontrol panelinizden sitenin ayarlarını güncelleyebilirsiniz.

Çözüm

Vay! Uzun bir tane. Bunu tamamen okuduktan sonra ön uç uygulamanızı Netlify'a dağıtmak için başka bir kılavuza ihtiyacınız yoktur.

Uygulamamızı Netlify'a dağıtmanın iki yöntemi vardır. Hangisini takip etmeli? İlk yöntemi kullanmanın küçük bir avantajı vardır. Netlify, site depomuza her yeni kod gönderdiğimizde yapıyı güncelleyecektir. Ancak, CLI yöntemi söz konusu olduğunda, bunu manuel olarak yapmamız gerekiyor.

İçinde bulunduğumuz duruma göre her zaman bir yöntemi diğerine tercih ederiz. Her neyse, her iki dağıtım yöntemini de biliyorsunuz. Yani, yöntem hakkında endişelenmemize gerek yok. Size en uygun olanı seçin.

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

Netlify'a bir alternatife mi ihtiyacınız var? Bu en iyi statik site barındırma platformlarına göz atın.

Mutlu Dağıtım