Asp.net Core + React + PostgreSql + Nginx Dockerize etme

Bugün Docker teknolojisini kullanarak full bir stack oluşturacağız.Öncelikle örnek senaryomuzda backend de Asp.net core web api, front da ReactJs, database olarak Postgresql ve bunları yayına almak için nginx kullanacağız.

Bu işleme başlamadan önce bilgisayarınızda docker ve docker-compose kurulu olduğundan emin olunuz. Ek olarak sisteminize nginx kurmanıza gerek yok docker image kullanılacak.

Öncelikle klasör yapımızı oluşturalım

-db
— db.sql

-backend
— asp.net core web api projesi
— Dockerfile

-frontend
— react projesi
— Dockerfile

-nginx
— default.conf

-docker-compose.yml

NOT : docker-compose.yml dosyasının ana dizinde olduğuna dikkat ediniz.

db kasörü altında postgreSql de başlangıç tablolarını yüklemek için sql dosyası barındırıyoruz ve bu klasörü docker-compose da volume olarak ekleyeceğiz.
backend ve front altında zaten projelerin türlerini belirttim. Asp.net core projesi için canlı modda ki Dockerfile otomatik geliyor, biz development mod için bir Dockerfile yazalım ki her değişiklikte projeyi sıfırdan tekrar ayağa kaldırmayalım. backend klasörü içerisine Dockerfile isimli bir dosya açıp içerisine aşağıdakileri yapıştırın.

React tarafı içinde bir Dockerfile yazalım. front klasörü altına Dockerfile isimli bir dosya açıp içerisine aşağıdakileri yapıştırın.

Dockerfile dosyalarımızda hazır olduğuna göre artık nginx kısmına geçebiliriz.

Burada en önemli kısım ise nginx altındaki default.conf dosyası, daha önce tek conf dosyasında birden fazla domain barındırmamış olan arkadaşların kafa karışıklığını gidermek için tek dosyada yapmak istedim. Bildiğiniz gibi .net core, php, nodejs, react … uygulamaların ihtiyaçları farklıdır yayın esnasında bu sebeple conf dosyalarının içerisinde farklı configure edilmeleri gerekiyor. Bizim projemizde front tarafının domaini için front.localhost , backend tarafafının domaini için de api.localhost kullanacağım, burada ki asıl mesela bir react ve bir asp.net core projesi nasıl nginx configuresi edilmeli. Şimdi default.conf dosyasının içerisine bakalım.

server {
  server_name  api.localhost;
  listen 80;
  listen [::]:80;
root /var/www/myapp;
location / {
    proxy_pass http://backend:5005;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
  }
}
server {
  listen 80;
  server_name front.localhost;
  
  location / {
    proxy_pass http://frontend:3000;
    client_max_body_size 200M;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

Burada api.localhost un 5005, front.localhost un ise 3000 portunu dinlemesi istedim. Eğer react projesinde;

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection ‘upgrade’;
proxy_cache_bypass $http_upgrade;

proxy ayarlarını eklemezsek nginx tarafında hata verecektir, çünkü react projeyi development aşamasında watch modda olur ve nginx bu ayarlar sayesinde onu bekler.

docker-compose.yml dosyası içerisine aşağıdaki yapıştıralım.

Tüm dosyalarımız hazırsa artık ana dizinde docker-compose up — build diyerek çalışmaya başlayabilirsiniz. :)