Angular Deployment -Heroku

Node.js ile yazdığımız api yi heroku üzerinde nasıl deploy ettiğimizi paylaşmıştım. O yazıma da buradan ulaşıp inceleyebilirsiniz. Bu sefer angular projelerimizi heroku üzerinde nasıl paylaşıp deploy ettiğimizi anlatacağım.

Öncelikle bir heroku hesabı oluşturuyoruz ve bilgisayarımıza https://devcenter.heroku.com/articles/heroku-cli#download-and-install adresinden veya bilgisayarınızda node.js ve npm yüklü ise komut istemcisine(cmd) windows için

npm install -g heroku

mac için

brew tap heroku/brew && brew install heroku

yazarak da indirebiliriz.

Öncelikle, projemizde package.json dosyasına geliyoruz ve burada düzenlenemeler yapıyoruz.

Scripts altındaki “start” komutunu “node server.js” yapıyoruz ve scripts içine “postinstall” komutunu ve en alt kısma “engines” bölümünü ekliyoruz. Burada npm ve node versiyonları farklılık gösterebilir. Bilgisayarınızdaki node ve npm versiyonlarını öğrenmek için

node -v
npm -v

komutlarını terminalde çalıştırabilirsiniz.

——————————————————————————————————————–

Daha sonra, uygulamamıza express kütüphanesini ekliyoruz. Bunun için

npm install --save express 

komutunu proje dizininde çalıştırabiliriz.

Daha sonra devDependencies içindeki “typescript”: “~3.7.5”,
“@angular/cli”: “~9.0.6”,
“@angular/compiler-cli”: “~9.0.6”
bölümlerini dependencies e alıyoruz.Çünkü burada devDependencies bölümü çalışmayacak.

Bir sonraki adım olarak, projemizin ana dizininde server.js dosyası oluşturuyoruz ve bunun altına şu kodları ekliyoruz.

Burada farklılık olacak nokta, dosya yollarında olacak. Burada dist altındaki kendi uygulama adınız olmalı. Orayı proje isminize göre kendiniz değiştirmeniz gerekiyor.

Artık projemiz bir node.js projesi gibi görünecek ve node.js projemizi nasıl deploy ediyorsak angular projemizi de aynı şekilde deploy edeceğiz.

Daha sonra package.json içindeki start komutunu değiştireceğiz.

"start": "node server.js"

Sıradaki adımları buradan daha ayrıntılı görebilirsiniz.

Daha sonra projemizin terminal kısmına yani terminalde projemizin dizini altında

git init
git add .
git commit -m "initial commit" 
heroku create

kodlarını sırasıyla çalıştırıyoruz. Buradaki output da mavi kısım projemizin deploy olacağı yer oluyor. Bu linkden projemizi açabileceğiz. Son olarak

git push heroku master 

kodunu çalıştırıyoruz. Artık projemize heroku üzerinden ulaşabiliriz.