React uygulamasına Dockerfile eklenmesi 💫

Dockerfile oluşturarak React uygulamamızı Docker ile ayağa kaldırabiliriz. Bu yazımda daha önce webpack ile sıfırdan oluşturduğum React uygulamasını kullanacağım.

• Önceki yazım 1
• Önceki yazım 2

Docker ile ilgili yazıdığım yazılara aşağıdaki linkten ulaşabilirsin.

• Docker Notlarım

Dockerfile Örnek:

FROM node:19-slim
WORKDIR /src
COPY . .
RUN npm install --force
RUN npm install -g live-server
RUN npm run build
EXPOSE 8080
CMD ["live-server","build/"]

• FROM ile node’un 19-slim versiyonu base image olarak ayarlanır.
• WORKDIR ile çalışılcak dizin söylenir.
• src klasöründeki herşey COPY ile aktarılır.
• RUN ile gerekli bağımlılıklar indirildikten sonra uygulamanın build’i alınır.
• EXPOSE ile bu image’in container olduğunda kullanıcağı port söylenir
• CMD ile projeyi çalıştırıcak komut söylenir.

Dockerfile dosyasını oluşturduktan sonra build komutu container oluşturulur.

docker build . -t react-app

Oluşan containerı run komutu ile çalıştıralım:

docker run -p 9000:8080 react-app

• Dışarı 9000 portu ile açılır.

http://127.0.0.1:9000/ adresinden uygulamaya erişebiliyoruz.

Docker Compose Ekleme

docker-compose.yml örnek:

version: "3.4"
services:
  react-app:
    container_name: react-app
    build: .
    ports:
      - 9000:8080

• versionlara göre farklı davranış gösterebiliyor.
• services altında ayrı ayrı imageler için tanımlamaları yapılır.
• react-app altında bulunan build ile bulunduğu dizindeki Dockerfile ile build al denir.
• container_name ile container adı tanımlanır.
• ports ile birden fazla port tanımı yapılabilir. Bu tanımlamada 9000 üzerinden çalışır ama docker host üzerinde 8080 portunu alır.

Docker-compose dosyasının çalıştırılması için (build alır ve çalıştırır):

docker-compose up

http://127.0.0.1:9000/ adresinden uygulamaya erişebiliyoruz.

Sadece build alması için:

docker-compose build

Container kapatmak ve silmek için:

docker-compose down

Okuduğun için teşekkürler 💐

Github Proje Link

Elif