쿠버네티스에 React 올리기(2)

728x90

Docker와 Kubernetes를 다 설치해 주었으면, Docker 컨테이너를 생성해준다.

쿠버네티스에 React 앱을 배포하기 위해서는 컨테이너를 패키징을 해주어야한다.

컨테이너를 실행하기 위해서는 Docker 이미지를 먼저 만들어야한다.

그럼 컨테이너는 무엇이고 , 이미지는 무엇일까 !!!

이미지 vs 컨테이너
• 이미지: Docker 이미지는 응용 프로그램, 그리고 실행에 필요한 모든 것(코드, 라이브러리, 환경 설정 등)을 포함하는 정적인 패키지. 즉, 이미지는 컨테이너를 실행하는 데 필요한 모든 정보를 포함하고 있다.
• 컨테이너: 컨테이너는 이미지의 인스턴스로, 실제로 실행되는 프로세스. 즉, 이미지가 실제로 실행될 때 컨테이너가 생성되고 실행된다. 컨테이너는 이미지를 실행하는 동안 파일 시스템을 캡슐화하고 네트워크 및 기타 환경 설정을 제공한다.

그러면, 우선 Docker 이미지를 만들고 난 뒤 컨테이너를 실행시켜보겠다.

Dockerfile 작성

내가 만든 React앱의 루트 폴더에 Dockerfile 을 만든다.

자동으로 Docker의 이미지가 뜨는거 보니 자동으로 Docker 이미지를 만들기 위한 파일임을 인식하는 것 같다.

//Dockerfile 

//이 이미지는 ngingx웹 서버를 기반으로 한다는 의미 
FROM nginx:1.17
//React 앱의 빌드 결과물을 Nginx가 호스팅할 수 있는 위치로 복사
COPY build/ /usr/share/nginx/html

Dockerfile의 내용은 이러하다.

즉, Dockerfile은 Nginx를 기반으로 한 Docker 이미지를 생성하고, 그 이미지에는 로컬 시스템의 React 앱 빌드 결과물이 포함되어 있다. 이를 실행하면 Nginx 웹 서버가 React 앱의 정적 파일을 호스팅할 수 있다.

Docker 로그인 및 Docker 이미지 build 하기

$docker login

명령어를 이용하여 docker에 로그인을 해준다.

docker 앱을 켠 다음 $docker login 명령어를 써주면 자동으로 로그인이 된다.

$docker build -t [만들고자 하는 이미지 명] .

그 다음 build 명령어를 사용하여 이미지를 생성한다.

Docker 이미지 push 하기

<오류 발견 !>

이미지를 build 해주고 docker hub에 push를 해주니

$docker push [이미지 명]

이런 오류가 발생하였다.

이렇게 도커에 이미지가 build 되어있음에도 오류가 나서 알아본 결과

이 오류는 인증 문제로 발생한 것이고, 이미지를 푸시하려는 Docker Hub 계정에 로그인하지 않았거나 권한이 없는 경우에 발생할 수 있다.

<해결 방안>

1. login 여부 확인하기

2. 이미지 태그 설정: 로그인 후 이미지에 Docker Hub 사용자명과 함께 이미지 이름을 지정한다.

처음에 build 한 test를 그대로 push 하니 오류가 발생하였는데, tag 명령어를 사용하여 사용자 이름과 함께 지정해주니 push가 됐다 .. !

$docker tag [local-image-name] [docker hub의 사용자 ID/이미지이름]
$docker push [docker hub의 사용자 ID/이미지이름]

이렇게 명령어를 써주면 오류없이 Docker Hub에 이미지를 push하는 것 까지 했다.

deployment 와 service yaml 생성하기

나는 React 앱의 루트 폴더에 kubernetes라는 폴더를 생성하여 deployment.yaml 와 service.yaml 을 따로 만들었다.

# deployment.yaml

apiVersion: apps/v1
kind: Deployment
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: haha0888/test:latest
          ports:
            - containerPort: 80 # 앱이 노출하는 포트

Deployment 생성 : Deployment는 파드를 관리하고 업데이트하는 역할을 한다.

//service.yaml 

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

Service 생성: 그 다음, 리액트 앱에 대한 외부에서 접근할 수 있는 서비스를 생성한다. 이 서비스는 클러스터 내부의 파드로 트래픽을 라우팅한다.