Angular Uygulaması Docker & Nginx İle Nasıl Kaldırılır ?

Eski usül deployment işlemlerinden bunalıp her şeyi dockerize etmeye karar verdiyseniz doğru yerdesiniz. Bu yazımızda bir angular uygulamasını node ve nginx image kullanarak yazdığımız dockerfile ile nasıl docker üzerinden kaldıracağımızı anlatacağız.

CI/CD süreci geliştirme ortamında artık bir standart haline gelmeye başladı. Bununla birlikte kariyer hedefleri olan bir geliştirici olarak docker teknolojisini öğrenmek gittikçe bir zorunluluk haline geliyor. Bu nedenle aşağıda sadece örnek bir Dockerfile paylaşım kapatmayacağım. Bütün adımları tek tek açıklayıcı bir şekilde anlatıp örnek bir docker file nasıl yazılmalı bu konuya da değineceğiz. Tabi ki bu basamakların hemen altında detaylı bir biçimde tamamlanmış dockerfile örneğini de paylaşacağız.

1. Build Image Oluşturulması ve Uygulamanın Build Edilmesi

Bu bölümde uygulamamızı içerisinde nodejs içeren container kullanarak build alacağız.

FROM node:14.19-alpine as build
WORKDIR /app
COPY package.json package-lock.json .
RUN npm install
COPY . .
RUN npm run build

1.1 Birinci adımda dockerhub üzerinde bulunan node:v-alpine adlı image’yi kullanarak container oluşturuyoruz. Bu containeri build olarak isimlendiriyoruz. Bir diğer not ise versiyon seçiminde kullandığınız angular versiyonunu göz önünde bulundurmanız gerekiyor. Burada yer alan linkte yayınlamak istediğiniz angular için tercih etmeniz gereken nodejs versiyonunu bulabilirsiniz.

1.2 İkinci adımda işlemlerimizi gerçekleştireceğimiz dizini oluşturuyoruz. Bu dizin container içerisinde oluşturuluyor.

1.3 Üçüncü adımda package ve package json dosyalarımızı az önce oluşturduğumuz app dizinine taşıyoruz.

1.4 Dördüncü adımda ise kopyalamış olduğumuz package.json içerisinde yer alan bağımlılıklarımızı (dependencies) indiriyoruz.

1.5 Beşinci adımda uygulama içerisinde yer alan bütün kodları tekrar app dizinine taşıyoruz.

1.6 Birinci bölümün son adımında ise npm run build komutunu kullanarak build alıyoruz.

2. NGINX Üzerinden Servis Edilmesi.

Bu bölümde ise az önce build aldığımız angular uygulamasını nginx kullanarak servis edeceğiz (yayına alacağız).

FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /app/dist/application /usr/share/nginx/html
EXPOSE 80

1.1 Birinci adımda dockerhub üzerinde bulunan nginx adlı image’yi kullanacağız.

1.2 Bu adım için aşağıda paylaştığım nginx.conf dosyasını uygulamanın bulunduğu ana dizine eklemeniz gerekiyor. Bu yazıda nginx üzerinde fazla durmayacağız ancak merak ediyorsa blog içerisinde nginx hakkında yazdığım yazılara göz atabilirsiniz.

Varsayılan nginx ayarları ile minik bir oynama yapıyoruz ve index.html dosyasının belleğe alınmasını önlüyoruz. Bu sayede ileride çıkacağımız versiyonlarda önbellek sorunları yaşamaktan kurtulmuş oluyoruz.

events {}

http {
    include /etc/nginx/mime.types;
    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;
        location / {
            if ( $uri = '/index.html' ) {
              add_header Cache-Control no-store always;
            }

            try_files $uri $uri/ /index.html;
        }
    }
}

1.3 Üçüncü adımda ise birinci bölümde oluşturduğumuz build içerisinde yer alan dosyaları nginx.conf içerisinde belirlediğimiz /usr/share/nginx/html dizinine taşıyoruz

1.4 80 portunu http isteklerinin erişilebilir olması için dışarı açıyoruz.

Ve Dockerfile dosyamız kullanıma hazır. Aşağıda tam halini paylaşıyorum. Ancak tavsiyem yukarıda yazılanları okursanız sizin için daha iyi olabilir 🙂 Yetkin bir yazılımcı olarak docker bilmeniz gerekenler listesinin başlarında yer alıyor. Kariyer yolculuğunuzda docker konusunda tecrübeli olmanız bir noktada sizden istenecektir. O yüzden aşağıda yer alan dosyayı kopyala yapıştır yapıp geçmemenizi tavsiye ederim 🙂

FROM node:14.19-alpine as build
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build:prod

FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /app/dist/application /usr/share/nginx/html
EXPOSE 80

Söyleyeceklerim bu kadar ancak eğer merak ettiğiniz başka hususlar varsa sormaktan çekinmeyin. İyi çalışmalar dilerim 🙂