Windows에서 Kubernetes로 Azure AKS에 Nginx + React 배포하기

이번 포스팅은, Windows PC에서 Kubernetes를 활용하여 Nginx와 React 애플리케이션을 Azure AKS(Azure Kubernetes Service)에 배포하는 전체 과정을 단계별로 설명합니다.

1. 개발 환경 구성

1.1 Docker Desktop 설치 및 Kubernetes 활성화

Docker Desktop 설치

  1. Docker Desktop for Windows 다운로드
  2. 설치 시 “Use WSL 2 instead of Hyper-V” 옵션 선택
  3. 설치 완료 후 재부팅

Kubernetes 활성화

  1. Docker Desktop 실행
  2. 설정(Settings) → Kubernetes 탭 이동
  3. “Enable Kubernetes” 체크박스 선택
  4. “Apply & Restart” 클릭하여 적용

1.2 필수 도구 설치

kubectl 설치

# PowerShell에서 실행
curl -LO "https://dl.k8s.io/release/v1.28.0/bin/windows/amd64/kubectl.exe"
# kubectl.exe를 PATH에 추가 (C:\Windows\System32 등)

Azure CLI 설치

# Chocolatey 사용 (권장)
choco install azure-cli

# 또는 MSI 인스톨러 다운로드
# https://docs.microsoft.com/en-us/cli/azure/install-azure-cli-windows

2. 애플리케이션 준비

2.1 React 애플리케이션 생성

# Node.js 프로젝트 생성
npx create-react-app my-react-app
cd my-react-app

# 프로덕션 빌드
npm run build

2.2 Dockerfile 작성

React용 Dockerfile (frontend/Dockerfile)

FROM node:18-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Nginx 설정 파일 (nginx.conf)

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    
    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;
        
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

3. 로컬 Docker 테스트

3.1 Docker 이미지 빌드 및 테스트

# React 앱 이미지 빌드
docker build -t my-react-app:latest .

# 로컬 테스트 실행
docker run -p 3000:80 my-react-app:latest

# 브라우저에서 http://localhost:3000 접속 확인

3.2 Docker Compose로 통합 테스트

docker-compose.yml 작성

version: '3.8'

services:
  frontend:
    build: 
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "3000:80"
    container_name: react-frontend
    
  nginx-proxy:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./nginx-proxy.conf:/etc/nginx/nginx.conf
    depends_on:
      - frontend
    container_name: nginx-proxy
# Docker Compose 실행
docker-compose up -d

# 상태 확인
docker-compose ps

# 로그 확인
docker-compose logs -f

4. Azure 환경 구성

4.1 Azure 계정 설정

# Azure CLI 로그인
az login

# 구독 확인
az account list --output table

# 특정 구독 선택
az account set --subscription "your-subscription-id"

4.2 리소스 그룹 및 ACR 생성

# 리소스 그룹 생성
az group create --name myResourceGroup --location koreacentral

# Azure Container Registry 생성
az acr create --resource-group myResourceGroup --name myacrregistry --sku Basic

# ACR 로그인 활성화
az acr update -n myacrregistry --admin-enabled true

4.3 AKS 클러스터 생성

# AKS 클러스터 생성
az aks create \
    --resource-group myResourceGroup \
    --name myAKSCluster \
    --node-count 2 \
    --enable-addons monitoring \
    --generate-ssh-keys \
    --attach-acr myacrregistry

# AKS 자격 증명 가져오기
az aks get-credentials --resource-group myResourceGroup --name myAKSCluster

5. 이미지 빌드 및 레지스트리 업로드

5.1 ACR에 이미지 푸시

# ACR 로그인
az acr login --name myacrregistry

# 이미지 태그 지정
docker tag my-react-app:latest myacrregistry.azurecr.io/my-react-app:v1

# ACR로 푸시
docker push myacrregistry.azurecr.io/my-react-app:v1

# 업로드된 이미지 확인
az acr repository list --name myacrregistry --output table

6. Kubernetes 매니페스트 파일 작성

6.1 Deployment 및 Service 매니페스트

react-deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-frontend
  labels:
    app: react-frontend
spec:
  replicas: 3
  selector:
    matchLabels:
      app: react-frontend
  template:
    metadata:
      labels:
        app: react-frontend
    spec:
      containers:
      - name: react-app
        image: myacrregistry.azurecr.io/my-react-app:v1
        ports:
        - containerPort: 80
        resources:
          requests:
            cpu: 100m
            memory: 128Mi
          limits:
            cpu: 500m
            memory: 512Mi
---
apiVersion: v1
kind: Service
metadata:
  name: react-frontend-service
spec:
  selector:
    app: react-frontend
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80
  type: ClusterIP

6.2 Ingress 설정

nginx-ingress.yaml

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: react-ingress
  annotations:
    kubernetes.io/ingress.class: azure/application-gateway
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - host: myapp.example.com
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: react-frontend-service
            port:
              number: 80

7. Kubernetes 배포 실행

7.1 클러스터 연결 확인

# 클러스터 정보 확인
kubectl cluster-info

# 노드 상태 확인
kubectl get nodes

# 네임스페이스 생성 (선택사항)
kubectl create namespace my-app
kubectl config set-context --current --namespace=my-app

7.2 애플리케이션 배포

# Deployment 및 Service 배포
kubectl apply -f react-deployment.yaml

# 배포 상태 확인
kubectl get deployments
kubectl get pods
kubectl get services

# Pod 로그 확인
kubectl logs -l app=react-frontend

7.3 Ingress 설정 (선택사항)

# Ingress Controller 설치
kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v1.8.1/deploy/static/provider/cloud/deploy.yaml

# Ingress 리소스 배포
kubectl apply -f nginx-ingress.yaml

# 외부 IP 확인
kubectl get ingress react-ingress

8. 배포 확인 및 테스트

8.1 서비스 상태 확인

# 모든 리소스 상태 확인
kubectl get all

# Pod 상세 정보
kubectl describe pod <pod-name>

# 서비스 엔드포인트 확인
kubectl get endpoints

8.2 로드 밸런서를 통한 외부 접근

# LoadBalancer 타입으로 서비스 변경
kubectl patch service react-frontend-service -p '{"spec":{"type":"LoadBalancer"}}'

# 외부 IP 할당 대기
kubectl get service react-frontend-service --watch

# 브라우저에서 외부 IP로 접근 테스트

9. 모니터링 및 관리

9.1 기본 모니터링

# 리소스 사용량 확인
kubectl top nodes
kubectl top pods

# 이벤트 확인
kubectl get events --sort-by=.metadata.creationTimestamp

# 로그 실시간 확인
kubectl logs -f deployment/react-frontend

9.2 스케일링 및 업데이트

# 수평 스케일링
kubectl scale deployment react-frontend --replicas=5

# 롤링 업데이트
kubectl set image deployment/react-frontend react-app=myacrregistry.azurecr.io/my-react-app:v2

# 업데이트 상태 확인
kubectl rollout status deployment/react-frontend

# 롤백 (필요시)
kubectl rollout undo deployment/react-frontend

10. 주요 Pod 관리 명령어

10.1 Pod 기본 조작

# Pod 목록 조회
kubectl get pods -o wide

# 특정 Pod 상세 정보
kubectl describe pod <pod-name>

# Pod 내부 접속
kubectl exec -it <pod-name> -- /bin/sh

10.2 문제 해결

powershell
# Pod 재시작
kubectl delete pod <pod-name>

# ConfigMap 및 Secret 확인
kubectl get configmaps
kubectl get secrets

# 네트워크 정책 확인
kubectl get networkpolicies

마무리

이 가이드를 통해 Windows 환경에서 Docker Desktop과 Kubernetes를 활용하여 React 애플리케이션을 Azure AKS에 성공적으로 배포할 수 있습니다.

핵심 포인트:

  1. 로컬 개발: Docker Desktop으로 Kubernetes 환경 구성
  2. 이미지 관리: Azure Container Registry를 통한 이미지 저장소
  3. 오케스트레이션: Kubernetes 매니페스트를 통한 배포 자동화
  4. 확장성: AKS의 관리형 서비스로 운영 부담 감소

정기적인 모니터링과 보안 업데이트를 통해 안정적인 운영 환경을 유지하시기 바랍니다.

Leave a Comment