Kas.18

React Projelerini Heroku Üzerinde Yayınlama


Node.js üzerinden yayın yapmak isterseniz de mutlaka Node.js destekli bir sunucuda yayın yapmanız ve projeyi sunucuda ayağa kaldırmanız gerekiyor. Yaygın olarak Amazon Web Service’leri ile bir sanal sunucu üzerinden yayın yapılabiliyor. Veya ücretsiz olarak test yayını yapmak için de Heroku servisleri kullanılabilir.

Heroku üzerinde deployment yapmak için aşağıdaki adımları izleyin.

Kurulum Gereksinimleri

Heroku’yu Terminal’den kullanacağız. Bu nedenle de bir takım kurulumlar yapılması gerekiyor.
• Node.js
• Git
• Heroku CLI

Nodejs kurulumu için https://nodejs.org/en/ adresine gidin.

Git kurulumu için https://git-scm.com/downloads adresine gidin.

Heroku CLI’yi yükelmek için https://devcenter.heroku.com/articles/heroku-cli adresine girin.

Kurulumun başarılı olup olmadığını Terminal’den kontrol edelim.

heroku –version
heroku/7.29.0 win32-x64 node-v11.14.0

Heroku’da yayın yapabilmek için öncelikle bir uygulama oluşturmamız gerekiyor.

https://dashboard.heroku.com/apps adresine girin.

Create new app butonuna tıklayın.

Açılan sayfada uygulamaya bir isim verin ve sunucu bölgesini Amerika veya Avrupa olarak seçin.

Uygulamaya fotograf-arama-uygulamasi adını girdim ve uygun olduğunu belirtti. Create app butonu ile devam edin.

Sonraki gelen sayfada basit bir dokümantasyon gelecek. Yayınlama işlerimizi bu doküman referanslarına göre yapacağız.

Projenin olduğu klasörde heroku login komutunu girin.

Komutu yazıp onayladıktan sonra herhangi bir tuşa basın, tarayıcı açılacak (eğer giriş yapılmamışsa login olmanız istenecek).

Sayfada giriş yaptıktan sonra Terminal’den giriş yaptığınıza dair bilgiler gelecek.

Ardından git init komutunu girin ve bir Git projsi başlatın.

Proje klasörü içerisinde .git (gizli) isminde klasör oluşturulacak.

Ardından heroku git:remote -a fotograf-arama-uygulamasi komutunu girin. Bu komutu, referans’lardan aldık.

Komutu yazdıktan sonra herhangi bir tuşa basmanız gerekecek. Sonrasında tarayıcıda Heroku Login sayfası açılacak ve giriş yapmanız istenecek. Giriş yaptıktan sonra giriş onay bilgileriniz Terminal’de gösterilecek.

Ardından git add . komutu ile dosyalarımızı Git’e ekleyelim.

Sonrasında git commit –am “commit yorumu…” şeklinde bir açıklama ekleyin.

Son olarak git push heroku master komutunu girin ve dosyaları Heroku sunucularındaki kendi reponuza gönderin.

Karşıya yükleme işi bitince bizi bir sürpriz bekliyor. React için tanımlı olan package.json dosyası otomatik olarak açılacak ve projenin build işlemi Heroku tarafından başlatılacak.

Konsolda yazan bilgileri inceleyin. Projenin hangi URL’de yayınlanacağı da gösterilmiştir.

Heroku sayfasında uygulamanızın Settings sayfasına baktığınızda Nodejs’in Buildpack olarak eklendiğini ve otomatik olarak SSL ile çalıştırıldığını göreceksiniz. Daha sonra eğer isterseniz kendi Domain’inizi de Heroku’da deploy edilen URL’e yönlendirebilirsiniz.


Web Tasarımı ve Web Programlama 2020

Yorum bırak

Yorum