Projemi Nasıl Deploy Ederim?

Hepimiz küçük veya büyük ölçekli projeler geliştiriyoruz. Peki geliştirmesini bitirdiğimiz projeleri bir şekilde diğer insanların da görebileceği veya kullanabileceği bir hale nasıl getiririz? Bu yazıda benim de sıklıkla kullandığım ve projelerimizi kolay ve ücretsiz bir şekilde deploy edebilmemizi sağlayan bazı araçlardan bahsedeceğim. Yazıda build komutlarında, build klasörüne giderken vb. durumlarda create-react-app ile kurulmuş bir projeyi temel alacağım. Ancak tabii ki yazıdaki tüm bilgiler genele uygun bilgiler olacaktır. Öyleyse hadi başlayalım.

heroku

Heroku için öncelikle heroku’yu bilgisayarımıza kurmamız gerekiyor. Bunun için aşağıdaki linke gidelim ve işletim sistemize göre gerekli olan kurulumu yapalım.

The Heroku CLI

Ardından deploy etmek istediğimiz proje dizinine gidip aşağıdaki komutları yazalım. Öncelikle sisteme login olup ardından yeni bir heroku uygulaması oluşturalım.

1. heroku login
2. heroku create

Create komutunun ardından heroku bize infinite-badlands-78845 adında rastgele bir app adı oluşturdu. Ben projemi isagul.herokuapp.com olarak deploy etmek istediğimden aşağıdaki komutla uygulama adını değiştireceğim.

heroku apps:rename isagul --app infinite-badlands-78845

Şimdi local repository’imizi uzaktaki heroku uygulamamızla ilişkilendirmek için aşağıdaki komutu yazalım.

heroku git:remote -a isagul

Şimdi sıra herokuya uygulamamızı deploy etmekte. Bunun için öncelikle package.json dosyamızın içerisinde node ve npm versiyonlarımızın belirtilmiş olması gerekmektedir. Bu sebeple bilgisayarımızdaki npm ve node versiyonlarını öğrenerek package.json dosyamıza aşağıdaki bilgileri ekleyelim.

Node ve npm versiyonlarımızı sırasıyla node -v ve npm -v komutlarıyla öğrenebiliriz.

Bilgileri ekledikten sonra package.json dosyasımızı commitlemeyi unutmayalım.

git add .
git commit -am "make it better"

Son olarak sıra projemizi heroku uygulamamıza deploy etmekte. Bunun için ise aşağıdaki komutu girmemiz yeterli.

git push heroku master

Eğer local repository’mizde bulunan master branchinden farklı bir branchi deploy etmek istersek komutu git push heroku testbranch:master şeklinde yazmamız gerekir.

Artık uygulamamız isagul.herokuapp.com adresinden ulaşılabilir duruma geldi. 🎉 🎉

gh-pages

Projemizi deploy etmemizin en kolay yollarından biri gh-pages diyebiliriz.

Burada bir çok uygulamamızı yayına alabiliriz. Örneğin bir portfolio sitemiz var. Bunu isagul.github.io adında yayına alabiliriz. En baştaki isagul, github kullanıcı adınızdan gelmektedir. Bir başka projemizi ise isagul.github.io/yeni-proje şeklinde bir url ile yayına alabiliriz. İkisinin farkı; projenin buildini isagul.github.io için oluşturduğumuz repository’nin master branchine, diğer projeler için gh-pages adında yeni bir branche göndereceğiz. Bunu gh-pages paketi bizim için otomatik olarak yapacak.

Ben her ikisini de ayrı ayrı anlatacağım.

Portfolio Sitesi Oluşturma

Bunun için proje dizinimize gidip gh-pages paketini projemize kuralım.

npm install gh-pages --save-dev

Öncelikle github’da isagul.github.io şeklinde yeni bir repository oluşturmalıyım. Buradaki isagul kısmı benim githubdaki kullanıcı adım.

Oluşturduğumuz repository’de aşağıdaki komutla master branchinden hariç olarak yeni bir branch oluşturalım.

git checkout -b dev

Bunu yapmamızın sebebi daha önce de anlattığım gibi portfolio sitesi için master branchi gh-pages’in serve edeceği branch olacak. Sitemizin geliştirmelerini ise yeni oluşturduğum dev branchine pushlayacağım.

Ardından package.json dosyamızda bazı değişiklikler yapmamız gerekli.

"homepage": "https://isagul.github.io"

homepage, projeyi yayınlamak istediğimiz url’yi göstermektedir.

package.json içerisindeki scripts kısmına ise projemizi deploy edebilmek için yeni bir komut ekleyeceğiz.

"deploy": "npm run build && gh-pages -b master -d build"

Bu komut oluşturduğumuz repository’de bulunan master branchine projenin build alınmış alını pushlayacaktır. dev branchi ise benim development branchim olarak kalmaya devam edecektir.

npm run deploy

Yukarıdaki komutu yazdıktan sonra artık portfolio sitem isagul.github.io sitesinde yayında. 👌 👌

Yeni Proje

Bu kısım için benim önceden geliştirmiş olduğum periyodik tablo projesini kullanacağım.

İlk iş olarak gh-pages paketini projemize kuruyoruz. Ardından önemli kısımlardan biri olan homepage fieldını eklemek. Yeni ekleyeceğimiz projeler için homepage, https://isagul.github.io/[repository_adı] olacak şekilde düzenlenmelidir. Benim repository adım periodic-table olduğundan aşağıdaki gibi bir url olacak şekilde homepage fieldını ekliyorum.

"homepage": "https://isagul.github.io/periodic-table"

Ardından yine scripts fieldına deploy komutumu ekliyorum.

"deploy": "npm run build && gh-pages -d build"

Burada portfolio sitesinden hariç olarak branch adı belirtmedim. Çünkü gh-pages benim için gh-pages adında yeni bir branch oluşturacak ve oraya buildi pushlayacak.

npm run deploy

Yukarıdaki komutla birlikte gh-pages dediğimiz adımları gerçekleştirdi. Ancak yapmamız gereken basit bir adım daha var. Repository’nin settings ayarlarından gh-pages kısmına gitmek. Burada branchler kısmında gh-pages branchinin seçili olduğundan emin olmalıyız. Çünkü gh-pages burada seçili olan branchi serve etmeye çalışacak.

Artık geliştirdiğimiz yeni projemizde isagul.github.io/periodic-table/ adresinden ulaşılabilir bir hale gelmiş oldu. 💪 💪

netlify

Netlify belki de en kolay araç olabilir. Çünkü yapacağımız tek şey sürekle bırak. Bu kısmı görsellerle anlatacağım.

Öncelikle aşağıdaki linkten netlify sitesine gidip kayıt olmalıyız.

Netlify App

Ardından sisteme login olduktan sonra bizi aşağıdaki bir ekran karşılayacak.

Projemizi canlıya almak için yapacağımız tek şey en altta görülen drag and drop area kısmına projemizi build alıp oluşan build klasörünü sürükleyip bırakmak.

Ardından netlify rastgele bir isimde oluşturduğu domaine benim build klasörümü pushlayacaktır. Ancak ben projemi isagul.netlify.com şeklinde serve etmesini istiyorum. Bunun için aşağıdaki görsellere bakalım.

Sürekleme ve bırakma işleminden sonra netlify bizi aşağıdaki ilk görseli içerisinde barındıran bir adrese yönlendirecektir.

Yukarıdaki görselden Site settings butonuna tıklayalım.

Change site name butonuna tıklayalım ve sitenin ismini değiştirelim.

Save butonuna bastıktan sonra projemiz isagul.netlify.com adresinde çalışmaya başlayacaktır. 👍 👍

surge

Projemizi terminal ekranından hiç ayrılmadan çok kolay bir şekilde deploy edebilmemizi sağlar. Bunun için öncelikle surge paketini globale aşağıdaki komutla kurmalıyız.

npm install --global surge

Eğer windows kullanıcıysak environment variables’a surge paketinin path’ini eklememiz gerekiyor. Aksi halde terminalde surge komutunu yazdığımızda hata ile karşılaşabiliriz.

Ardından deploy etmek istediğimiz projemizin dizinine gidiyoruz ve sırasıyla aşağıdaki komutları giriyoruz.

1. npm run build
2. cd build
3. cp index.html 200.html
4. surge

Surge her zaman içerisinde bulunduğumuz dizinin içerisindekileri deploy edecektir. Bu nedenle build dizininde iken surge komutunu yazdık. Surge bizden ek olarak bir 200.html dosyası da istemektedir. Bu dosya client-side routing ve single page application’lar için 404.html olarak davranır. Biz de deploy etmeden önce içerisine index.html bilgilerini kopyalayarak yeni bir 200.html dosyası oluşturduk.

Son olarak surge komutunu yazıyoruz ve surge bizden bir email adresi ve şifre bilgisi isteyecek. Aşağıdaki şekilde login olduktan sonra bize default bir domain adresi verecek. İstersek biz bu domain adını değiştirebiliriz. Ben isagul.surge.sh olacak şekilde değiştireceğim.

Ardından upload işlemleri başlayacak ve projemiz aşağıdaki resimde de görüldüğü üzere isagul.surge.sh’a deploy olacak. Artık isagul.surge.sh kullanılabilir durumda. ✌️ ✌️

Kaynaklar

The Heroku CLI

Deploying with Git

Surge

GitHub Pages