NGINX Nedir? NGINX ile Bir Web Sayfası Nasıl Sunulur?
Merhaba bu yazıda web projelerimizi servis edebileceğimiz bir ‘web server’ teknolojisinden, aşağıdaki başlıklar altında bahsedeceğim:
1- Nginx Nedir?
2- Bir Web Uygulamasını Nginx ile Nasıl Servis Edebiliriz?
Sıkıcı olmayacak şekilde tanım yaparak başlayalım.
1- Nginx Nedir?
Nginx en kısa şekli ile açık kaynak olarak tasarlanmış bir ‘web server’yazılımıdır. Odaklandığı noktalar ise en yüksek performans ve stabil davranışı, en basit ve küçük boyutlu bir şekilde kullanıcılara sunmasıdır. Basit bir web server olmasının yanı sıra ‘reverse proxy’ ve ‘load balancing’ işlemleri için gerekli fonksiyonlara sahiptir.
Nginx Unix tabanlı işletim sistemlerinde çalışmaktadır, yani malesef Windows makinelerde desteği bulunmamaktadır yada kısıtlı desteği bulunmaktadır dersek daha doğru olacaktır.
2- Bir Web Uygulamasını Nginx ile Nasıl Servis Edebiliriz?
Şimdi pratiğe dökelim ve basit bir react uygulamasını Nginx Web Server kullanarak servis edelim. Nginx’in windows makinelere desteği bulunmadığı için herkese hitaben Nginx’i bir docker container olarak kullanacağım. Bunun için öncelikle ‘base’ imaj olarak bir nginx imajı kullanmamız gerekecektir. Daha sonra web projemizi bu imaj içerisinde çalıştırmak için bir Dockerfile oluşturup ayarlarını yapacağız.
Aşağıdaki komut ile kullanacağımız nginx imajını indirelim:
docker pull nginx:stable-alpine
Ben Nginx’in hafifletilmiş olarak çıkarılmış alpine sürümünü kullandım. Buradan Nginx’in diğer imajlarına ulaşabilirsiniz. Bu işlemden sonra Docker Desktop uygulamasında imajı şu şekilde göreceğiz:
Şimdi React projemizin dizinini açalım ve nginx konfigürasyonları için nginx.conf isimli bir dosya oluşturalım. Ben VSCode ile devam edeceğim:
Peki bir nginx.conf dosyasında neler bulunmalıdır?
Nginx resmi sitesinde bulunan örnek bir conf dosyasına buradan göz atabilirsiniz.
Bu projede aşağıdaki conf dosyası ile devam edeceğiz, birinci adımda şu basit ayarlar ile devam edelim:
server {
listen 80;
include etc/nginx/mime.types;
location /{
root /usr/share/nginx/html/;
}
}listen → Server’in hangi port üzerinden yayın yapacağını belirten config. Bizim durumumuzda container içerisinde hangi port üzerinden ulaşılacağını belirtiyor.
include → Web servisimizin istemcilere sunabileceği tüm tipleri belirttiğimiz mime.types dosyasını dahil ediyoruz. Bu dosya hali hazırda kullandığımız Nginx imajında belirtilen dizinde mevcut olduğunu için kendimiz oluşturmadık. Örnek bir içeriğe buradan ulaşabilirsiniz. Yada benzer formatta kendiniz oluşturabilirsiniz.
location → Server çalıştığında hangi konumu referans alacağını burada belirtiyoruz. Burada location ibaresinden sonra bir endpoint belirleyebiliriz. Örneğin:
location /test {
root /usr/share/nginx/html/test/;
}Yukarıdaki şekilde birden fazla location tanımı yapabiliriz.
root → Web sayfasının kaynak kodlarının bulunduğu dosya yolunu belirtiyoruz. Nginx container içerisinde bu konum /usr/share/nginx/html olarak belirlenmiş. Fakat biz farklı bir konumu da belirtip kaynak dosyalarını oraya kopyalayabiliriz.
Evet, nginx.conf dosyamızı oluşturduk. Sırada react uygulamamızı derleyip nginx imajı içerisinde servis etmek kaldı. Bunun için ilk olarak react projemizi build etmemiz gerekli. Aşağıdaki komutla bu işlemi gerçekleştirelim:
npm run build
Şimdi indirdiğimiz Nginx imajı ile bir container çalıştıralım. Bu container içerisine yukarıda oluşturduğumuz config dosyasını ve build sonucu oluşan react dosyalarımızı kopyalayalım. Bu işlemler için React projemiz içerisine bir Dockerfile oluşturacağız. Oluşturduktan sonra içerisinde aşağıdaki komutları ekleyelim:
FROM nginx:stable-alpine
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
COPY /build /usr/share/nginx/html
EXPOSE 3000
CMD ["nginx", "-g", "daemon off;"]Aşağıdaki komut ile build edelim:
docker build -t nginx_react_image .
Build işlemi tamamlandıktan sonra aşağıdaki komut ile container’ı ayağa kaldıralım:
docker run -p 3000:80 -d nginx_react_image
-p ile portları map ledik, yani container içerisinde 80 portundan hizmet veren web servisimizi 3000 portu ile dış dünyaya açtık. Şimdi browser açarak localhost:3000adresinden nginx ile sunduğumuz react uygulamamıza erişebiliriz.
Bu yazıda çok fazla detaya girmeden bir web uygulamasını nginx kullanarak nasıl servis edebiliriz ona değindik. Örnek olarak bir react uygulaması kullandık, fakat dilediğiniz her hangi bir uygulamayı bu yöntem ile nginx web server’i üzerinden servis edebilirsiniz. Aynı şekilde nginx’i bir docker container üzerinde çalıştırmayıp kendi local makinenizde de ayaklandırabilir veya uzak bir sunucuda çalıştırabilirsiniz. Sonraki yazılarımda web üzerinde bir sunucuya nasıl kurulum yaparız sorusunu da cevaplıyor olacağım.
Peki Load Balancing işlemini nginx ile nasıl yaparız? Bu sorunun cevabı için buradan ilgili yazıma ulaşabilirsiniz.
Çalışmanın kaynak kodlarına ise buradan ulaşabilirsiniz.
İyi Çalışmalar.