[Naver Cloud Platform+React] vite+React+typescript CI/CD

🚀NCP와 깃허브 액션을 통한 CI/CD 구현기🚀

1. ncp에서 배포 할 ubuntu server 생성
2. npc에서 docker image를 저장할 object storage와 container registry 생성
3. vite+react+typscript의 프론트 레포에서 배포할 dockerfile 작성
4. 배포를 위한 github action 등록

NCP에서 ubuntu server 생성

네이버 클라우드 계정에서 server 생성

• 서버는 유지비를 생각해서 micro로 생성했다. (최초 결제수단 등록 시 1년간 하나의 micro 서버 무료)

• 새로운 인증키를 생성 후 다운받아 둔다.

💡 주의! 인증키는 이때만 다운받을 수 있기 때문에 잘 저장해 놔야한다!

• 새로운 ACG(Access control group, 보안 그룹)을 생성해준다.
  • 임시로 0.0.0.0/0으로 열어두었다.
  • 보안을 위해서는 특정 주소에서만 접근할 수 있게 지정해주면 좋다.

• 서버 생성 후 “운영중”이 뜰때까지 기다린다.

• 서버가 생성되었다면 접속을 위해 포트포워딩을 설정해주어야 한다.
• “외부 포트”에 임의의 포트번호를 입력 후 추가를 해준다.

• 서버에 연결하기 위한 비밀번호를 설정해준다.
• 생성한 서버 클릭 후 “서버 관리 및 설정 변경” → “관리자 비밀번호 확인”

• 아까 서버를 생성할 때 다운받아 놨던 .pem 파일을 넣은 후 “비밀번호 확인”클릭

• 그렇게 되면 관리자 이름과 비밀번호가 뜨게 되는데, 최초 접속 시 비밀번호로 복사해서 기록해 놓는다.
  • 보통 관리자 이름은 root다.

 

생성한 서버에 접속하기

• 위에서 만든 서버에 접속해 본다.
• “포트포워딩” 탭에서 설정했던 포트번호와, 거기에 있는 공인 ip를 활용해서 서버에 접속한다.
• ssh 연결 시 비밀번호를 입력해달라고 하는데, 바로 위에서 복사해두었던 최초 접속 시 비밀번호를 넣어준다.

ssh -l root -p [포트번호] [공인 ip]

• 접속 완료

• 서버에 접속했으면 배포 시 사용할 도커를 설치해준다.

우분투 서버에 도커 설치

1. 우분투 시스템 패키지 업데이트

sudo apt-get update

2. 필요한 패키지 설치

sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common

3. Docker의 공식 GPG키를 추가

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

4. Docker의 공식 apt 저장소를 추가

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

5. 시스템 패키지 업데이트

sudo apt-get update

6. Docker 설치

sudo apt-get install docker-ce docker-ce-cli containerd.io

7. Docker가 설치 확인

7-1 도커 실행상태 확인

sudo systemctl status docker

7-2 도커 실행

sudo docker run hello-world

출처

[Docker] Ubuntu 22.04 Docker 설치

 

Object Storage, Container Registry 생성

• 도커 이미지를 저장하고 가져다 쓰기 위한 Object Storage와 Container Registry를 생성해준다.

Object Storage 생성

• Object Storage 이용 신청
• 이용 신청 후 버킷 생성

• 이름 입력 후 설정 건드리지않고 “다음” 버튼 클릭 후 버킷 생성

Container Registry 생성

• Container Registry로 이동 후 “레지스트리 생성” 클릭

• 이름 입력 및 생성한 Object Storage 넣은 후 생성

vite+react+typescript에서 Dockerfile 만들기

• 배포할 프로젝트 최상단에 nginx를 사용하여 배포하는 Dockerfile을 생성
• (참고로 현재 배포에 사용하는 gihub repo가 client와 server둘다 있어서 프론트 코드는 /client에 들어가 있다.)

# 첫 번째 단계: 빌드 환경 구축
FROM node:lts-alpine as build-stage

WORKDIR /app

# 의존성 파일 복사 및 설치
# COPY [내 package.json 파일과 yarn.lock 파일의 경로] [복사할 위치]
COPY ./client/package.json ./client/yarn.lock ./
RUN yarn install && yarn global add typescript

# 소스 코드 복사
COPY ./client .

RUN ls -l
# 애플리케이션 빌드
RUN yarn build

# 두 번째 단계: Nginx를 사용하여 애플리케이션 서빙
FROM nginx:stable-alpine as production-stage

# 빌드된 파일을 Nginx 서버로 복사
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 80 포트 노출
EXPOSE 80

# Nginx 실행
CMD ["nginx", "-g", "daemon off;"]

 

CLI로 container registry에 도커 이미지 build,push 하기

NCP container registry에 로그인하기 위해서는 마이페이지에서 인증키 생성이 필요하다.

• 마이페이지 - 계정관리 - 인증키관리 - 신규 API 인증키 생성 - Access Key ID, Secret Key가 각각 ID, PW로 로그인시 사용된다.
• 해당 repository에 접근하기 위해서는 로그인이 필요하다.
• Registry URL은 Container Registry에서 생성한 레지스트리를 클릭하면 Public Endpoint가 있는데 그것을 사용해주면 된다.

docker login <CONTAINER_REGISTRY_URL>

• 다음을 입력하면 username과 password를 입력하라고 나오는데, 위에서 발급한 Access Key ID를 username으로, secret key를 password로 입력하면 된다.
• 도커 파일을 작성한 배포할 프로젝트의 최상단에서 다음 명령어를 쳐주면 build되고 push되어서 Container Regisrty에 반영된다.

docker build -t <CONTAINER_REGISTRY_URL>/<TARGET_IMAGE[:TAG]> .
docker push <CONTAINER_REGISTRY_URL>/<TARGET_IMAGE[:TAG]>

 

깃허브 액션을 이용해 ci/cd 구축

깃허브 액션을 위한 .yml 파일 작성

• 이제 ci/cd 구축을 위해 특정 브랜치가 push, merge 등 업데이트 될 때 마다 build 후 배포되게 깃허브 액션으로 등록 한다.
• 레포에서 .github/workflows에 deploy.yml 파일을 생성한다.

name: auto deploy #작업 이름

on:
  push:
    branches:
      - dev # dev branch가 push 될때 실행

jobs:
  docker_push_front: #도커파일에 작성된 내용을 바탕으로 이미지를 push한다.
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v3

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v2

      - name: Login to NCP Container Registry
        uses: docker/login-action@v2
        with: #container registry에 연결
          registry: ${{ secrets.NCP_CONTAINER_REGISTRY }}
          username: ${{ secrets.NCP_ACCESS_KEY }}
          password: ${{ secrets.NCP_SECRET_KEY }}

      - name: Build and Push Docker Image
        uses: docker/build-push-action@v3
        with: # 도커파일에 작성된 내용으로 이미지를 빌드, container registry에 push한다.
          context: .
          file: ./client/Dockerfile  
          push: true
          tags: ${{ secrets.NCP_CONTAINER_REGISTRY }}/front
          cache-from: type=registry,ref=${{ secrets.NCP_CONTAINER_REGISTRY }}/front
          cache-to: type=inline

  docker_pull_front:
    name: Connect server ssh and pull frontend from container registry
    needs: docker_push_front #위의 push가 진행 된 후
    runs-on: ubuntu-latest
    steps: # container registrty에 push된 
      - name: connect ssh
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.FRONT_HOST }}
          username: ${{ secrets.FRONT_USERNAME }}
          password: ${{ secrets.FRONT_PASSWORD }}
          port: ${{ secrets.FRONT_PORT }}
          script: |
            docker pull ${{ secrets.NCP_CONTAINER_REGISTRY }}/front
            docker stop $(docker ps -a -q)
            docker rm $(docker ps -a -q)
            docker run -d -p 80:80 ${{ secrets.NCP_CONTAINER_REGISTRY }}/front
            docker image prune -f

• 코드에 대한 자세한 내용은
• https://sungbin.dev/post/NCP Container Registry를 활용하여 CI·CD 환경 구축하기에 나와있다.

 

깃허브 secret 등록

• 깃허브 액션이 제대로 작동하기 위해서 serect을 등록한다.
• github 레포에서 settings → secrets and variables → actions로 가서 “new repository secret”르 누른 후 다음과 같이 이름과 그 값을 추가한다.

컨테이너 레지스트리 연결할 때 사용하는 값들

• NCP_CONTAINER_REGISTRY : 컨테이너 레지스트리의 Public Endpoint
• NCP_ACCESS_KEY : mypage에서 발급 받은 Access Key ID
• NCP_SECRET_KEY : mypage에서 발급 받은 secret key
• FRONT_HOST : 포트포워딩 탭에서 설정했던 서버 접속 공인 ip
• FRONT_PORT : 포트포워딩 탭에서 설정했던 포트번호
• FRONT_USERNAME : 관리자 비밀번호 설정에서 확인했던 관리자 이름 (보통 초기에는 root)
• FRONT_PASSWORD : 관리자 비밀번호 설정에서 확인했던 비밀번호

→ 추가 후 dev 브랜치에 push가 일어나게 되면 자동으로 server에 빌드 및 배포가 이루어진다.

서버 공인 ip 설정

• 지금까지 사용했던 ip는 “서버 접속용 공인 ip”다.
• 실제로 배포한 server에 접속하기 위해서는 공인 ip가 필요하다.
• server의 public ip로 이동

• 공인 ip 신청, 처음 만들었던 서버를 적용 서버로 선택 연결

완성

• 이제 설정한 공인 ip로 접속할 경우 배포되어있는 것을 확인할 수 있다.

Reference

https://sungbin.dev/post/NCP Container Registry를 활용하여 CI·CD 환경 구축하기