ReactJS Proejct Docker 이미지 생성 & 배포 하기

ReactJS 프로젝트를 docker 이미지를 생성하는 방법을 정리 합니다.

기본적으로 node 12.x 의 이미지에 nginx 이미지를 활용하여서 생성하였습니다.

자세한 내용은 Dockerfile 파일을 참고 하시면 됩니다.

ReactJS 파일은 기본 명령어를 이용해서 생성하였습니다.

$ npx create-react-app mycode

1. 우선 ReacJS 프로젝트에서 다음 파일을 생성합니다.

• Dockerfile
• default.conf
• expires.conf

2. 이미지 생성하기

다음 명령어를 이용해서 이미지를 생성 합니다.

# docker build -t ${image-name}:${version} .

$ docker build -t react-dockerfile:1.0 .

3. 이미지 테스트 하기

생성된 이미지를 docker run으로 테스트 합니다.

아래 명령어는 이미지를 띄우고 Ctrl + C를 이용해서 종료 하면 바로 컨테이너를 삭제 합니다.

# docker run -p 8888:80 --rm ${image-name}:${version}

$ docker run -p 8888:80 --rm react-dockerfile:1.0

로컬 PC의 8888 포트와 컨테이너 80 포트를 연결 하여서 띄우기 때문에 http://localhost:8888 을 브라우저에서 입력하시고 결과를 확인해세요.

4. 이미지를 docker repository에 올리기

마지막으로 만든 이미지에 문제가 없다면, 해당 이미지를 docker repository에 올립니다.

4.1 docker login 을 하세요.

저장하려는 repository에 로그인 하세요 기본으로 로그인시 docker hub에 저장하게 됩니다.

$ docker login
Login with your Docker ID to push and pull images from Docker Hub. If you don't have a Docker ID, head over to https://hub.docker.com to create one.
Username: lahuman
Password:
Login Succeeded

4.2 우선 이미지 태그를 다시 생성하셔요.

docker 이미지 태그는 docker hub 계정 정보가 함께 들어 갑니다.

# docker tag ${image-name}:${version} ${account}/${image-name}:${version}

$ docker tag react-dockerfile:1.0 lahuman/react-dockerfile:1.0

4.3 push를 하세요

마지막으로 이미지를 docker hub에 push 하세요.

$ docker push ${account}/${image-name}:${version}
$ docker push lahuman/react-dockerfile:1.0

[오류] denied: requested access to the resource is denied

1. 로그인 정보를 확인하세요.
2. tag에 계정 정보가 알맞게 저장 되었는지 확인하세요.

harbor 설치 부터 kubernetes 연동까지!

Harbor 설치

0. 설치 전에 필수 설치 사항
   • docker-compose

$ sudo curl -L "https://github.com/docker/compose/releases/download/1.25.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose
# version 확인
$ docker-compose -v

1. Harbor를 다운받기

기본적으로 Online(harbor-online-installer-vx.x.x.tgz)으로 받아서 설치를 시작하면 된다.

2020년 1월 11일 최신 버젼인 harbor-online-installer-v1.9.4.tgz을 기준으로 진행하였다.

$ wget https://github.com/goharbor/harbor/releases/download/v1.9.4/harbor-online-installer-v1.9.4.tgz
$ tar xvfz harbor-online-installer-v1.9.4.tgz
$ cd harbor
# 특정 설정을 변경해야 한다.
# hostname과 https 설정 필수 수정
# 작동하는 PORT를 변경할 경우 다음 파일에서 수정
$ vi harbor.yml
# 설치는 ROOT 계정으로 진행하는 것을 추천한다.
$ ./install.sh

2. 동작 확인

브라우저를 통해서 확인한다. HTTPS를 활성화 했다면 https로 확인이 가능하다.
로그인 기본 ID 는 admin이며 password는 harbor.yml에 표기되어 있다.

# 파일 내 기본 비밀번호 
harbor_admin_password: Harbor12345

3. harbor.xml 수정시 반영 방법

harbor.xml을 수정후 무언가 반영할때는 다음과 같이 진행한다.

# 변경내역 반영
$ ./prepare
# docker-compose 재실행
$ docker-compose down -v
$ docker-compose up -d

harbor에 이미지 올리고 받기

1. docker login

먼저 docker에서 이미지를 push 하기 위해서 login을 해야 한다.

$ docker login 10.52.181.240:8443
Username: admin
Password:
WARNING! Your password will be stored unencrypted in /home/service/.docker/config.json.
Configure a credential helper to remove this warning. See
https://docs.docker.com/engine/reference/commandline/login/#credentials-store

Login Succeeded

2. docker tag 생성

$ docker tag lahuman/react-app:0.1 10.52.181.240:8443/51scrum/test-react-app:0.1

3. docker push

$ docker push 10.52.181.240:8443/51scrum/test-react-app:0.1

4. docker pull

$ docker pull 10.52.181.240:8443/51scrum/test-react-app:0.1

만약 x503 에러가 발생하면서 docker login이 되지 않는다면?

인증서 문제인데 내 경우는 그냥 http 통신으로 처리하였다.

우선 http 방식의 docker login을 위해서는 /etc/docker/daemon.json 파일을 생성하고 주소 정보와 IP를 다음과 같이 추가 한다.

{
  "insecure-registries" : ["10.52.181.240:8000"]
}

이후 docker 서비스를 재기동 후 http로 로그인을 한다.

$ systemctl restart docker
# 로그인
$ docker login 10.52.181.240:8000

kubernetes에서 Private Repository 이미지 가져오기

kubernetes에서 Private Repository를 사용하기 위해서는 secret를 등록해야 한다.
lahuman이라는 이름을 가진 secret를 생성한다.

$ kubectl create secret docker-registry lahuman --docker-server=http://10.52.181.240:8000 --docker-username=admin --docker-password='비밀번호' --docker-email="이메일"

만약 http 통신으로 docker login 한다면, kubernetes worker의 docker에 insecure-registries 설정을 해야한다.

등록된 값의 상세 확인은 다음의 명령어로 한다.

$ kubectl get secret lahuman --output="jsonpath={.data.\.dockerconfigjson}" | base64 -d

이제 pod를 배포해서 정상 동작 되는지 확인해보자

우산 다음과 같은 pod.yml을 작성한다.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: hello-deployment
spec:
  replicas: 3
  selector:
    matchLabels:
      app: react
  template:
    metadata:
      labels:
        app: react
    spec:
      containers:
      - name: hello-container
        image: lahuman/test-react-app
        ports:
        - containerPort: 80
      imagePullSecrets:
      - name: lahuman

생성된 파일을 kubectl 명령어를 이용해서 반영한다.

$ kubectl apply -f pod.yml

결과를 확인한다.

$ kubectl get pod
NAME                          READY   STATUS    RESTARTS   AGE
hello-react-6968cdc94-5fxrv   1/1     Running   0          51m
hello-react-6968cdc94-5lpdg   1/1     Running   0          51m
hello-react-6968cdc94-82zh6   1/1     Running   0          51m

외부에서 접근하기 위해서 service.yml 파일을 작성한다.

apiVersion: v1
kind: Service
metadata:
  name: hello-svc
spec:
  selector:
    app: react
  ports:
    - port: 8200
      targetPort: 80
  externalIPs:
    - 10.52.181.240
    - 10.52.181.241

서비스 파일을 kubectl 명령을 이용해서 반영한다.

$ kubectl apply -f service.yml

정상적으로 동작하는지 브라우저를 통해 확인하면 된다!

참고자료

• Harbor
• Harbor 설치
• Pull an Image from a Private Registry
• Example of private Docker registry usage
• Kubernetes + private docker registry
• 쉘에서 느낌표 이스케이프하기

MATERIAL-COMPONENTS

github source 바로가기

docker repository 바로가기

docker로 빠른 실행 해보기

$ docker run -d --name react-app -p 80:80 lahuman/test-react-app

프로젝트 개요

오랜만에 진행하는 개인 프로젝트입니다.
(간간히 짧은건 몇개 진행하였습니다.) 요즘 ReactJS를 활용하고 있는데요. 몇몇 컴포넌트들은 살짝 변경해서 공통으로 쓰고 있습니다. 이런 공통 컴포넌트들을 오픈소스화 해보려고 합니다.

ReactJS + MaterialUI 기반에서 동작합니다.

기본으로 제공되는 component를 변경하였습니다.

Datepicker

기존 datepicker에서 달력에 표시되는 포멧을 한글로 변경하고 삭제 등의 기능을 추가 하였습니다.

App.js에서 포멧이나 타임존에 대한 변경을 할수 있습니다.

주의 할점은 @date-io/moment 2.X에서는 오류가 발생합니다. 1.3.x를 사용해주세요.

// for MuiPickers only
MomentUtils.prototype.getCalendarHeaderText = date => {
  return MomentUtils.prototype.format(date, 'YYYY년 M월');
};
MomentUtils.prototype.getDateTimePickerHeaderText = date => {
  return MomentUtils.prototype.format(date, "M월 D일");
};

DataTable

기본 테이블에 정렬기능을 추가 하였습니다.

복잡하지 않고 정렬만 사용할 경우 유용합니다.

정렬되고 있는 컬럼에 정렬방식을 표기하고 다시 클릭하면 반대로 정렬합니다.