CD

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

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

Enochkon 2023. 11. 25. 00:06

2023. 11. 25. 00:06

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

ncp에서 배포 할 ubuntu server 생성
npc에서 docker image를 저장할 object storage와 container registry 생성
vite+react+typscript의 프론트 레포에서 배포할 dockerfile 작성
배포를 위한 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