Kuberentes로 React앱 배포하기(5단계)

해당 글은 블로그 포스팅 'Deploy a React application to Kubernetes in 5 easy steps' 의역 포함 참고해서 작성했습니다.

Step 1: React 생성하기

설치 조건

• node.js
• npm
• npx
• git

설치 순서

node, npm, npx 버전을 확인한다

node -v
npm -v
npx -v

• Facebook에서 제공한s create-react-app을 활용해 react앱 시작하기

npx create-react-app react-app-k8

로컬에서 npm start 명령어를 통해 http://localhost:3000 에서 설치된 앱을 확인한다.

이후 단계를 진행하기 위해, 프로덕션 용으로 최적화된 빌드를 생성한다.

npm run-script build

build/ . 폴더에 배포를 위해 생성된 파일을 확인한다.

Step 2: React 앱 Dockerize(도커라이즈) 하기

Kubernetes에 React 앱을 배포하기 위해서는 컨테이너로 패키징 해야한다. 도커 컨테이너를 생성하기 위해 Dockerfile을 React 앱 루트 폴더에 생성한다.
가장 간단한 버전으로 nginx 서버로 React 앱을 배포할 경우 다음과 같이 작성할 수 있다.

FROM nginx:1.17
COPY build/ /usr/share/nginx/html

해당 도커 컨테이너는 nginx:1.17 공식 이미지를 불러오고, 로컬에 있는 React 프로덕션 빌드 파일을 컨테이너로 올린다.
도커라이즈 속도와 용량을 생각해서 .dockerignore 파일을 작성해 node_modules 를 제외시켜준다.

커맨드에 명령어를 입력해 도커 이미지를 만들어보자.

docker build -t my-react-app .

Step 3: Kubernetes cluster 연결하기

현재 튜토리얼은 Kubernetes cluster를 설치한 상태를 가정한다.
만약 현재 준비되어 있지 않다면, 로컬 docker desktop을 이용해 kubernetes cluster를 설정할 수도 있고,
퍼블릭 클라우드에 배포하고 싶다면 다음 링크를 통해 시작해본다:

• IBM Cloud Kubernetes Service quickstart
• Google Kubernetes Engine(GKE) quickstart
• Azure Kubernetes Engine(AKS) quickstart
• AWS Kuberentes Engine (EKS) quickstart

Step 4: 컨테이너 레지스트리에 도커 이미지 올리기

Kubernetes 클러스터에서 도커 이미지를 pull하기 위해서는 우리가 만든 도커 이미지가 Docker registry에 올려져있어야 한다.

다음 명령어를 통해 로컬 도커 레지스트리를 생성한다.

docker run -d -p 5000:5000 --restart=always --name registry registry:2

앞서 만든 도커 이미지를 올리기 위해서는 레지스트리의 hostname과 포트를 태그로 달아줘야 한다.

docker tag my-react-app localhost:5000/my-react-app

태그 달아둔 도커 이미지를 레지스트리에 푸시한다.

docker push localhost:5000/my-react-app

이제 kubernetes cluster에 애플리케이션을 배포할 준비를 마쳤다.

Step 5: React 앱을 배포하기

보통 kubernetes object (service, pod, deployment, etc.)는 .yaml 파일로 작성한다.
배포를 위한 yaml 파일을 작성한다.

kind: Deployment
apiVersion: apps/v1
metadata:
  name: my-react-app
spec:
  replicas: 2
  selector:
    matchLabels:
      app: my-react-app
  template:
    metadata:
      labels:
        app: my-react-app
    spec:
      containers:
        - name: my-react-app
          image: localhost:5000/my-react-app
          imagePullPolicy: Always
          ports:
            - containerPort: 80
      restartPolicy: Always

배포만 해서는 외부에서 앱에 접근할 수 없다. 따라서 service를 만들어주어 외부에 port를 노출시켜준다.
여러 타입이 존재하지만 가장 간단한 NodePort를 사용해보자.

kind: Service
apiVersion: v1
metadata:
  name: my-react-app
spec:
  type: NodePort
  ports:
    - port: 80
      targetPort: 80
      protocol: TCP
      nodePort: 31000
  selector:
    app: my-react-app

두 내용 모두 같은 yaml 파일에 ---를 사이에 두고 함께 작성해도 괜찮다.

kind: Deployment
apiVersion: apps/v1
# 내용 ...
---
kind: Service
apiVersion: v1
# 내용 ...

작성한 파일을 이용해 kubernetes 에 앱을 배포해본다.

kubectl apply -f deployment.yaml

작성한 대로 구동 중인지 확인한다.

kubectl get pods
kubectl get deployment
kubectl get service

모두 정상 작동 중이라면, http://localhost:31000 에 접속해보면 작성한 React 앱을 확인할 수 있다.

테스트를 마무리하기 위해 Kubernetes에서 React 앱을 삭제한다.

kubectl delete service, deployment my-react-app

전체 예제 코드를 GitHub에서 확인할 수 있습니다.