React.js ve Docker
Merhaba arkadaşlar bu yazımda bir react js uygulamasının nasıl docker ile çalışabilir hale getirilmesini inceleyeceğiz.
İncelemeye başlamadan önce react ve docker hakkında bilgisi olmayan arkadaşlar aşağıdaki linklerden react.js ve docker hakkında detaylı bilgiye ulaşabilirler. Docker uygulamasının malesef türkçe dil desteğini bulamadım. O yüzden docker hakkında biraz konuşalım.
Docker nedir?
Docker geliştirdiğimiz uygulamalarımızı server bağımlılığı olmadan istediğimiz ortamda yada bilgisayarda çalıştırmamıza yarayan bir sistemdir.Dockerize edilmiş bir uygulamayı kendi local makinemizde çalıştırmak için dockerı bilgisayarımıza indirmeliyiz.
Docker Terimleri
Bu başlıkda docker da kullanılan terimleri basit bir şekilde açıklayacağız. Tüm terimlerin ingilizce karşılıklarına buradan erişebilirsiniz.
DockerFile : Bir uygulamanın docker ile çalışabilir hale getirilmesi için konfigürasyonların yapıldığı ve komutların tutulduğu text dosyasıdır.
build : Oluşturulmuş olan DockerFile ların docker sisteminde çalıştırılabilir bir image dönüştürülmesini sağlayan komuttur.
Örnek docker build komutu.
docker build -t uygulama_adı:versiyonunuz .
image : Docker ile çalışabilir hale getirilmiş uygulama, sistem vb. Sisteminizdeki docker imagelerini aşağıdaki komut ile listeleyebilirsiniz.
Bu komut dan çıktı görmek istiyorsanız bilgisayarınızda dockerın çalıştığından emin olmalısınız.
docker image ls
container: Docker imagelerinin çalıştırılması için gerekli olan birim. Docker imagelerinde run komutunu çalıştırdıkdan sonra otomatik olarak her image için bir container oluşturulur. Sisteminizdeki çalışan docker containerlarını aşağıdaki komut ile listeleyebilirsiniz.
docker container ls
Dockerize : Bir uygulamanın docker imagine dönüştürülme sürecidir. Internette bu terim ile çok karşılaşabilirsiniz.
Docker Desktop’ın kurulması
Docker desktop uygulası local bilgisayarlarımızın dockerized edilmiş uygulamaların çalıştırılmasına yardım etmektedir. Buradan indirebilirsiniz.
Docker 101’in öğrenilmesi
Docker hakkında bilgi sahibi değilseniz ve temel ingilizceniz varsa buradaki linkten docker playground uygulamasına gidip temel komutları öğrenebilirsiniz. Uygulama hem öğretirken hemde eğlendirmektedir. 😊
React Uygulamamızın dockerize edilmesi
Bir uygulamanın docker üzerinde çalışmasını sağlamak için öncelikle gereksinimlerini iyi belirlememiz gerekmektedir.
Bu yazıda biz sadece react js uygulamasının dockerize edilmesini işleyeceğimizden veritabanı vb gibi gereksinimlerimiz olmayacaktır.
Gereksinimler
- Node.js (Javascript uygulamamızın çalışması için)
Dockerin Hub’dan gereksinimlerin bulunması
Docker hub, docker imagelerinin public/private olarak tutulduğu sistemdir. Buradan docker hub daki node js versiyonlarına erişebilirsiniz.
DockerFile oluşturulması
Gereksinimlerimizi belirledikden sonra uygulamamızda DockerFile’imizi oluşturabiliriz.
Projenizin ana dosyasında(main folder) Dockerfile adında bir dosya oluşturmalıyız.
Eğer Visual Studio code kullanıyorsanız ücretsiz docker pluginini entegre edip kolaylıkla yanlış yazımları yada süresi geçmiş komutları görebilirsiniz.
Kullandığım docker plugini https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker
Node js versiyona karar verilmesi
Uygulamamızın hangi node.js versiyon üzerinde çalıştığını ögrenmek için terminal üzerinden aşağıdaki komutu çalıştırabilirsiniz.
node --version
Ardından çalisan versiyonunuza uygun LTS(latest stable version) u bulup Dockerfile’nızda ki imageinizin versiyonunu ayarlayabilirsiniz. Slim versiyon kullanırsanız docker imagenizin boyutu küçük olacaktır. Fakat içeriğinde bazı komutları bulamayabilirsiniz.
Node versiyonları ile alakalı daha çok bilgi almak için github da bu sayfayı ziyaret edebilirsiniz.
Dockerfile’ın derlenmesi ve çalıştırılması
Aşağıdaki komut ile docker file derleyebilirsiniz.
docker build -t projeAdı:versiyon -f Dockerfile .
Derleme işleminden sonra aşağıdaki komut ile uygulamanızı çalıştırabilirsiniz.
docker run -it -p 3000:3000 projeAdı:versiyon
Bu işlemden sonra localhost:3000 adresinde uygulamanızın çalıştığını kontrol edebilirsiniz.
Kolay gelsin 🤞