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

Image for post
Image for post

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.

Öncelikle ana 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

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.

Son olarak ana dizinimize docker-compose.yml dosyası ekleyelim ve içerisinde aşağıdaki yapıştıralım.

NOT: frontend container ını için environment kısmına yazdığımız CHOKIDAR_USEPOLLING=true komutu, bu komut sayesinde reactjs tarafında watch durumunda ki geçen zamanı bir nevi bekliyoruz.

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

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store