Angular ile Farklı Ortamlarda Çalışmak

0 1,626

Merhaba bu yazımda Angular projelerinde farklı ortam ayarlarının nasıl yapılacağını anlatacağım. Makalenin sonunda uygulamanın github linkini paylaşacağım

Angular’da yeni bir proje yarattığınızda “prod” ve “dev” ortam ayarları varsayılan olarak oluşturulmaktadır.

Varsayılan Dev ve Prod Ortam

 

Varsayılan ortamlara göre uygulamamızı serve/build etmek için aşağıdaki komutları çalıştırıyoruz.

Geliştirdiğimiz uygulamayı farklı ortamlarda; farklı ayarlar yaparak test etmek veya deploy etmek gerekebilir. Örneğin dev ortamında gerçek olmayan veriler(Mock Data) kullanılarak yapılan geliştirmeler, Test ortamında farklı bir endpointen gelebilir. Production ortamında ise farklı bir endpoint bilgisi veya versiyon bilgisi set edilebilir. Farklı ortamlarda bu tarz ayarlar yapabilmek için Angular CLI işimizi kolaylaştırıyor.

Ellerimizi biraz kirletelim

Angular CLI kullanarak yeni bir proje yarattıktan sonra, projemize Test Ortamı ve Remote Dev Ortamları için ayarlarımızı yapmaya başlayalım.

Bilgisayarınızda Visual Studio Code ve node.js yüklü olmalı. Eğer yüklü değilse Visual Studio Code için burayı, Node.js için burayı tıklayın

Visual Studio Codeyi açtıktan sonra terminale aşağıdaki kodu yazarak yeni projemizi yaratıyoruz

Angular CLI projemizi hazır hale getirdikten sonra environment klasörünün altına “environment.test.ts” ve “environment.dev.ts” dosyalarını ekliyoruz

Test ve Remote Dev ortam dosyaları

Daha sonra “environments” klasörünün altındaki tüm “ts” dosyalarını açıp ortam ayarlarını aşağıdaki gibi yapıyoruz.

environment.ts:

environment.test.ts:

environment.prod.ts:

environment.dev.ts:

Ortam ayarlarını yaptıktan sonra “angular.json” dosyasında oluştuğumuz ortam bilgileri için “build” ve “serve” için aşağıdaki işlemleri yapıyoruz.

Build ayarları:

angular.json dosyasını açtıktan sonra “project>architect>build>configurations” node kısmına geliyoruz. Burada proje yaratıldığında varsayılan olarak gelen “prodcution” ortamı için build ayarlarını görüyoruz.

Varsayılan olarak gelen production ortamına ait ayalar

“production” node’sinin altına yeni oluşturduğumuz “test” ve “dev” ortamlarına ilişkin ayarları ekliyoruz.

test ve dev ortamı için:

Yukarıda belirtilen ortamlardan birine “build” işlemi yapıldığında fileReplacements de yazan “environment.ts” dosyası ilgili ortamın environment dosyası ile değiştirilecek.

Serve Ayarları:

angular.json dosyasında “project>architect>serve>configurations” nodesine geliyoruz. Burada proje yaratıldığında varsayılan olarak gelen “production” ortamı için “serve” ayarlarını görüyoruz.

“production” node’sinin altına yeni oluşturduğumuz “test” ve “dev” ortamlarına ilişkin ayarları ekliyoruz.

test ve dev ortamı için:

Yukarıda belirtilen ortamlardan birine “serve” işlemi yapıldığında; Browser’a ilgili ortam bilgisi aktarılacak. Port bilgisi isteğe bağlı bir seçenektir. Uygulama serve edildiğinde o portta çalışsın diye ekledim.

Kullanıcının hangi ortamda işlem yaptığının bilgisinin sayfada gösterilmesi:

Bu kısım isteğe bağlıdır. Uygulamamız ilgili ortama “serve” edildikten sonra, kullanıcıya hangi ortamda olduğunu göstermek için “app.component.html” ve “app.component.ts” dosyasında aşağıdaki değişiklikleri yapıyoruz.

app.component.ts:

app.component.html:

Uygulamızı aşağıdaki komutları kullanarak istediğimiz ortama “serve” ve “build” yapıyoruz.

serve komutları:

build komutları:

Sonuç:

 

Her bir ortam, kendi port ve ortam ayarlarına göre serve edildi.

Konuyla ilgili detaylı bilgi için https://angular.io/guide/build#configuring-application-environments ve diğer build parametreleri için https://angular.io/cli/build adresine göz atmanızı tavsiye ederim

Uygulamanın Kodu: https://github.com/thrkrdk/ng-custom-environment

Email adresiniz yayınlanmayacaktır.