Tech

Bir Nuxt Projesini Dockerize Hale Getirmek

Hali hazırda kullanılan veya yeni oluşturduğunuz Nuxt projesini nasıl dockerize hale getirebilirsiniz bunlardan bahsedeceğim.

Yusuf Ayhan

Web Developer

bitmap.png

Docker kullanımından veya Nuxtjs kullanımından bu yazıda bahsedilmeyecektir sadece hali hazırda bulunan bir projeyi nasıl docker kullanarak bağımlılıklardan kurtulabiliriz bundan bahsedeceğim.

Docker kullanmanın faydalarını internetten ufak bir google’ lamayla bulabilirsiniz biz bunları geride bırakıp asıl işe koyulalım. İlk olarak bir nuxt projesi oluşturarak başlayalım


yarn create nuxt-app <project-name>

burada nuxt size bir takım sorular sorarak seçtiğiniz durumlara göre projenizi oluşturacaktır. Proje oluştuktan sonra çalışıyor mu diye bir kontrol edelim.


yarn dev


proje default olarak localhostta 3000 portunda başlayacaktır.

deeeee.png

sorunsuz bir şekilde projeyi görmekteyiz. Şimdi proje dizinine bir tane Dockerfile adında uzantısız bir dosya ekleyeceğiz. Bu dosyada, projemiz docker’a eklendikten sonra hangi komutların çalıştırılacağı yer almaktadır.

Aşağıdaki kodları dosyaya yapıştıralım.


FROM node:16.14.2

# projemizin çalışacağı dizin oluşturuluyor ve working directory bu dizin olarak değiştiriliyor.
RUN mkdir -p /usr/src/nuxt-app
WORKDIR /usr/src/nuxt-app

# proje dizinimizdeki dosyalar ve klasörler working directory olarak belirlediğimiz path' e kopyalanıyor.
# yarn install komutu çalıştırılarak container' ımıza gerekli bağımlılıklar yükleniyor.
COPY . /usr/src/nuxt-app/
RUN yarn install

# projemizin buildi alınıyor.
RUN yarn build

# container çalıştığında hangi portu dinlemesi gerektiğini belirliyoruz.
EXPOSE 3000

# Environment' lar ekleniyor ve set ediliyor.
ENV NUXT_HOST=0.0.0.0

ENV NUXT_PORT=3000

# son olarakda projemizi dockerda ayağa kaldırmış oluyoruz.
CMD [ "yarn", "start" ]

Gereksiz dosyaları almamak için .dockerignore dosyasını oluşturuyoruz.


node_modules
npm-debug*
.nuxt

Başka dosya veya klasörlerimiz varsa bunların yollarını ignore dosyasına ekleyebiliriz.
Şimdi sıra geldi Dockerfile dosyasını çalıştırmaya.


docker build -t my_app .  

komutunu yazarsak eğer container olarak docker’a ekleniyor ancak şu an çalışır halde değil. İster Docker Desktopta container bölümünden çalıştırabiliriz veya


docker run -it -p 5000:5000 my_app

komutunu yazarak container’ımızı çalıştırabiliriz.

deeeee.png

yukarıdaki çıktıyı verecektir. Tarayıcıya http://localhost:5000/ yazarak çalışan projemizi görebiliriz.

Aradığınız partner biz miyiz?

Bize projenden bahset.