React & Docker & Jenkins CI&CD 배포 방법

 

Step 01 - Jenkins EC2 세팅

---

Jenkins EC2 세팅

프리티어 EC2 메모리 부족 해결하기

• 현재 젠킨스 서버로 사용하는 프리티어 EC2는 젠킨스를 버틸 수 없습니다. 젠킨스를 도커로 띄우고 설정까지는 문제가 없으나 깃허브 웹훅으로 젠킨스를 이용해 spring을 빌드하는 과정에서 램을 1기가 이상(프리티어 EC2 램은 1기가) 사용하게 되면서 EC2가 먹통이 되어버립니다. 이 문제의 해결 방안으로는 리눅스의 하드디스크를 가상 메모리로 전환시켜 사용할 수 있다는 점을 이용하면 됩니다.
  AWS에서는 메모리의 양에 따라 스왑 메모리의 크기를 아래와 같이 권장하고 있습니다.

1. 스왑 파일 생성하기

• 아래 명령은 시간이 약 10~20초 정도 걸리므로 여유있게 기다리면 됩니다.

sudo dd if=/dev/zero of=/swapfile bs=128M count=16

 

2. 스왑 파일에 대한 일기 쓰기 권한 업데이트하기

sudo chmod 600 /swapfile

 

3. Linux 스왑 영역 설정하기

sudo mkswap /swapfile

 

4. 스왑 공간에 스왑 파일을 추가하여 스왑 파일을 즉시 사용할 수 있도록 하기

sudo swapon /swapfile

 

5. 절차가 성공했는지 확인하기

sudo swapon -s

 

6. /etc/fstab 파일을 편집하여 부팅 시 스왑 파일을 활성화하기

# 1.파일 열기
sudo vi /etc/fstab

# 2.파일 가장 마지막에 다음을 추가하고 :wq로 저장하고 종료
/swapfile swap swap defaults 0 0

 

7. free 명령어로 메모리 확인하기

free

 

jdk 11 설치

• 아래 순서로 jdk 11을 설치합니다.

# 업데이트 진행
sudo apt-get update

# 업그레이드 진행
sudo apt-get upgrade

# jdk 11 설치
sudo apt install openjdk-11-jdk

 

Jenkins 설치

• https://jenkins.io/ 에 접속하여 다운로드 버튼을 클릭합니다.

 

• Generic Java package의 주소를 복사합니다.

 

• 아래 명령어를 입력하여 젠킨스를 설치합니다.

# 젠킨스 설치
sudo wget https://get.jenkins.io/war-stable/2.319.3/jenkins.war

 

• 아래 명령어를 입력하여 git을 설치합니다.

# 깃 설치
sudo apt-get install git -y

# 깃 설치 후 버전 확인
git --version

// git version 2.17.1

 

• 아래 명령어를 입력하여 도커를 설치합니다.

# 도커 설치
sudo curl -s https://get.docker.com/ | sudo sh

# 도커 시작
sudo systemctl start docker

 

Jenkins, Github - SSH 키 생성 및 등록 및 커플링

Jenkins에서 Github에 접근하기 위해서는 SSH 키를 깃허브에 등록해야 합니다.

Docker에서 Jenkins를 적재할 때, -v 옵션으로 /home/jenkins/에 마운트를 해둔 상태이므로 호스트 PC에서 ssh키 생성을 대행할 수 있습니다.

sudo mkdir /home/jenkins/.ssh
sudo chmod 700 /home/jenkins/.ssh
sudo ssh-keygen -t rsa

진행하면 아래의 저장 경로와 키파일 이름을 설정하는 구간이 나옵니다. 다음과 같이 지정합니다.
Enter file in which to save the key (/root/.ssh/id_rsa): /home/jenkins/.ssh/id_rsa

 

위에서 설치한 젠킨스를 실행합니다.

# 백그라운드로 젠킨스 실행
nohup java -jar jenkins.war &

 

EC2 Jenkins 인스턴스의 인바운드 규칙에 8080을 열어줍니다.

• jenkins 인스턴스의 인바운드 규칙에 8080 포트를 여는 이유는 jenkins는 기본적으로 8080 포트를 사용합니다.

 

Jenkins 서버의 id_rsa.pub의 키를 복사하여 개발 서버에 등록합니다.

• 아까 jenkins 서버에서 /home/jenkins 디렉토리에 id_rsa 키를 생성했습니다.
• jenkins 서버에서 생성한 키를 개발 서버에 등록해줍니다.
• 개발 서버에 등록할때는 아래 위치에 등록합니다.

cd ~
cd .ssh/
vi authorized_keys 

// 맨 밑에 키를 등록합니다.

 

jenkins 페이지 접속

• 퍼블릭 IPv4 주소:8080으로 접속해서 플러그인을 설치합니다. 참고로 왼쪽에 있는 버튼을 클릭하여 플러그인을 설치합니다.

 

• 계정을 생성합니다.

 

• 계정 생성뒤 URL은 그냥 두고 파란색 버튼을 클릭합니다.

 

• 젠킨스 관리 > 플러그인 설치를 클립합니다.

• 설치 가능 버튼 클릭 후 ssh을 검색합니다. 그 후 Publish Over SSH를 다운로드 합니다.

 

• Publish Over SSH가 완료되었다면 젠킨스 > 시스템 설정에서 Publish Over SSH정보를 등록합니다.

 

• 아래의 정보를 입력하고 Test Configuration을 클릭하여 SUCCESS가 나와야합니다.
• Key는 젠킨스 서버에서 생성한 private key를 등록합니다.
• Hostname은 개발서버의 프라이빗 IPv4의 주소를 입력합니다.
• Username에는 개발 서버의 유저를 입력합니다. ex) ubuntu, ec2-user 등

 

Step 02 - React 프로젝트 연동

---

개발 서버에 3000 포트 열어주기

Dockerfile 및 .dockerignore 파일 작성

// Dockerfile
# 1. node 이미지 사용
FROM    node:16-alpine

# 2. 패키지 우선 복사
COPY    ./package* /usr/src/app/
WORKDIR /usr/src/app
RUN     npm install

# 3. 소스 복사
COPY . /usr/src/app

# 4. WEB 서버 실행 (Listen 포트 정의)
EXPOSE 3000
CMD    npm start

// .dockerignore 
node_modules

 

Github에 push

 

Jenkins에 해당 Git repository 등록

 

• 위의 과정까지 했으면 테스트 삼아 빌드를 해봅니다.

 

테스트 성공 후 추가적인 설저

 

• 구성 파일 수정전 먼저 젠킨스 서버에서 도커 허브에 로그인을 해줍니다.
• 이때 미리 도커 허브에 가입이 되어 있어야 로그인이 가능합니다.
• 로그인에 성공한다면 다시 젠킨스 구성 파일로 가서 Build 부분을 수정해줍니다.
• Add build step을 클릭하고 Execute shell을 클릭하여 추후 설정을 해줍니다.

 

Build

echo " Execute shell start"

# 도커 빌드와 개시 삭제
sudo docker build --no-cache -t cova1256/react-dev .

# 기존 서버에 있는 컨테이너 중지
sudo docker stop react-container || true

#기존 서버에 있는 컨테이너 삭제
sudo docker rm -f react-container || true

# 도커 로그인
sudo docker login -u cova1256 -p 비밀번호입력

# 도커 이미지 태그 설정 및 태그가 없다면 오류가 발생해도 넘어가도록 true 처리
sudo docker image tag react-dev cova1256/react-dev || true

# 도커 허브에 나의 레포지토리에 도커 푸시
sudo docker push cova1256/react-dev

# 푸시 후 빌드한 이미지 삭제
sudo docker rmi -f cova1256/react-dev || true

echo " Execute shell end"

 

빌드 후 조치

echo " 빌드 후 조치 start"

# 기존에 있는 이미지를 삭제합니다.
sudo docker rmi -f cova1256/react-dev || true

# 기존에 있는 컨테이너를 중지합니다.
sudo docker stop react-container || true

# 기존에 있는 컨테이너를 삭제합니다.
sudo docker rm -f react-container || true

# 컨테이너를 설치하고 실행합니다.
sudo docker run -d -p 3000:3000 --name react-container cova1256/react-dev

sudo docker rmi $(docker images -q -f dangling=true)

echo " 빌드 후 조치 end"

 

다시 빌드

• 위 과정이 끝났으면 다시 빌드를 합니다.
• 빌드가 성공적으로 이루어졌습니다.

 

빌드 성공 시 확인

• 개발서버에 react-container가 정상적으로 실행되고 있는것을 확인할 수 있습니다.

 

실행중인 react-container 접속

docker exec -it react-container /bin/sh

 

페이지 접속 확인

• 접속시 정상적으로 react로 만든 페이지가 실행되고 있는것을 확인할 수 있습니다.

 

 

React Docker 이미지 최적화하여 빌드하기

https://kdg-is.tistory.com/278

React Nginx Docker 최적화 이미지 빌드