React Projelerinizi Nasıl ‘Dockerize’ Edebilirsiniz

Hazırlayan: Cüneyd Bölükoğlu — Yazılım Geliştirme Uzmanı— Sekom

Bu yazımızda sizlere React uygulamanız için docker container yapısında nasıl image alabileceğinizi göstereceğiz. Bu işlem için öncelikle bilgisayarınıza docker kurulumu yapmanız gerekmektedir.

Ubuntu, Mac veya Windows İşletim Sistemleriniz için Docker Kurulumu

sudo apt-get install docker
systemctl status docker
systemctl restart docker

Örnek kurulum ve komutlar detayı için tıklayabilirsiniz:

Ubuntu — Windows — Mac

1- Dockerize edilecek proje local’e çekilir:

git clone https://github.com/user/repo_name.git

2- Yeni branch açılır. Sırasıyla aşağıdaki dosyalar repo’ya ana dizine eklenir:

git checkout -f branch_name

Dockerfile

FROM nginx:alpine
MAINTAINER cuneyd
COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

Dockerignore (.dockerignore)

node_modules

nginx.conf

server {
    listen 80;
    server_tokens off;
    location / {
        alias /usr/share/nginx/html/;
        sendfile off;
        expires 0;
    }
    location ~ ^/(admin.*|api.*|_meta.*|report.*|assets.*) {
        proxy_pass http://backend:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  http;
    }
}

docker-compose.yml

version: '3'
 
services:
 
  repo_name:
    container_name: name
    image: repo_image_name:1.0.0
    environment:
      - BACKEND_PORT=8000
    external_links:
      - repo_name:backend
    ports:
      - 80:80
    networks:
      - default
 
networks:
  default:
    external:
      name: reponame_default

Üstteki işlemlerden sonra, projenin ‘build’ klasörü oluşturulur:

npm run build

Daha sonra docker build alınır:

docker build -t repo_name .​

Ve işlemlerin sonunda oluşan image’ı kontrol etmek için aşağıdaki komutu kullanabilirsiniz:

docker images


REPOSITORY    TAG            IMAGE ID      
repo_name     latest         e160c7494ac7      
nginx         1.17.1-alpine  ea1253fd5d5e

Image‘ın tag’inde değişiklik yapılmak istenirse:

docker tag repo_name:latest repo_name:1.0.0

Image’ı local de çalıştırılıp http://localhost:80 portu ile kontrol edebilirsiniz:

docker run -p 80:80 -d repo_name:1.0.0

Image’ın içerisine girmek için aşağıdaki komut kullanılabilir ve çalışan aktif container’ları pskomutu ile görebilirsiniz:

docker run -it - rm repo_name shdocker ps

Bu arada pratik bir bilgi, tag ekleyip ve build alıp ortama pushlamanın kısa yolu:

docker build -t repo_name:1.0.0 . - no-cache && docker push repo_name:1.0.0

Ayrıca Docker ile ilgileniyorsanız aşağıdaki kaynaklara göz atabilirsiniz:

Docker Nedir, Docker Kavramları ve Docker Kullanımının Avantajları

What’s Docker? And how to start with it

Build and run Angular application in a Docker container

Windows 10 Üzerine Docker Kurulumu

Install Docker Desktop on Linux

How to Install Docker on Ubuntu: A Step-By-Step Guide

Hem var olan network orkestrasyon yazılımlarımızla, hem de
kurumların ihtiyaçlarına özgü geliştirdiğimiz yazılımlarımız ve bütünleşik sistemlere entegre çözümlerimiz ile uçtan uca anahtar teslim projelerimizi incelemek için linke tıklayabilirsiniz.