Next.js Projesini Environment Bağımlılıklarıyla Docker Üzerinde Çalıştırmak

Bu makalede, Next.js ile nasıl proje yapılacağından değil de, yapılmış olan bir projeyi Docker üzerinde nasıl çalıştırabileceğiniz konusuna değineceğim.

Öncelikle sisteminizde Docker’ın kurulu olduğundan ve başlatıldığından emin olun. Docker kurulumu için https://docs.docker.com/desktop/ adresindeki içerikten faydalanabilirsiniz.

IDE olarak Visual Studio Code kullanıyorsanız, Extensions’tan Docker’ı da yükleyin. Bu araç, daha kolay deployment yapabilmenizi ve imajları takip edebilmenizi kolaylaştırır.

Projenin kök dizininde, yani root’ta Dockerfile dosyası oluşturun. Aşağıda, örnek olması amacıyla bir Next.js projesi yapılandırması görülmektedir.

Dockerfile

FROM node:current-alpine AS base
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
FROM base AS build
ENV NODE_ENV=production
WORKDIR /build
COPY --from=base /app ./
RUN npm run build
FROM node:current-alpine AS production
ENV NODE_ENV=production
WORKDIR /app
COPY --from=build /build/package*.json ./
COPY --from=build /build/.next ./.next
COPY --from=build /build/public ./public
RUN npm install
EXPOSE 3000
CMD npm run start

Bu aşamada proje Docker’a deploy olacak şekilde yeterlidir. Ancak yaşadığım sorunlar sebebiyle ek ayarlamalar yapmak zorunda kaldım. Örneğin, proje deploy olduktan sonra API isteklerinde cevap alamadığımı farkettim. Proje 500 Initial Server Error hatası veriyordu. Sorunları incelediğimde, .env dosyasındaki değişkenlerin projeye dahil edilmediğini gördüm. Bu sorunu da çözmek için docker-compose.yml dosyası oluşturup ek ayarlar yaptım. Aşağıdaki yapılandırmayı inceleyin.

docker-compose.yml

version: "3"
services:
  ui:
    container_name: web
    restart: always
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./:/app
      - /app/node_modules
      - /app/.next
    env_file:
      - .env

Özellikle env_file: içinde .env dosyasını bağımlılık olarak alması gerektiği kısım önemli. Build işleminde de dockerfile için Dockerfile dosyasını gösterdik.

.env dosyasında da, projenizde kullanacağınız ortam değişkenlerini tanımlayabilirsiniz. Ek bilgi, bu bağımlıkıkları next.config.js dosyası içinde de env: { … } içine aktarmanız gerektiğini unutmayın.

Son olarak package.json’da build komutu oluşturup Docker’ı başlatıyor ve deploy ediyoruz.

"scripts": {
    "docker": "docker-compose up -d --build",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
},

Terminalde npm run docker komutu ile Docker üzerinde deployment’ı başlatıyoruz.

Sonucu Docker sekmesinde izleyebilirsiniz.

Son olarak http://localhost:3000 adresine girdiğinizde projenize erişebileceksiniz.