[CI/CD] React 프로젝트를 AWS LightSail에 Docker, Github Actions와 Runners를 활용하여 배포해보기

 

 

이번 교내 캠퍼스 아카데미에서 프로젝트를 수행하게 되면서 백엔드와 인프라 구축을 맡게 되었다.

백엔드 프레임워크 2개를 쓰게 되어 총 인스턴스를 3개 정도 띄울 거 같은데

그중 첫 번째인 프론트엔드에 해당하는 인스턴스를 생성하고, CI CD를 적용하여 배포를 진행해 보고자 한다.

블로그와 문서들을 참고하여 기록해 둔 것이니 설명이나 내용이 부족한 부분이 있을 수 있음을 고려하고 보면 좋을 것 같다

(여담으로 Tmax 측에서 AWS와 계약을 하여, 인스턴스 비용을 지원해 주기로 해서 부담이 줄어들었다!)

 

 

 

AWS LightSail 인스턴스 생성

create instance 버튼을 클릭하여 인스턴스 생성을 진행한다.

나의 경우 Ubuntu 20.04 LTS 버전으로 OS 환경을 선택했다.

이후, 로컬 cmd를 통해 서버에 접속하여 작업하기 위해 새로운 SSH key를 생성하였다.

 

위와 같이 인스턴스를 생성하고 사각형 주황색 버튼인 CloudShell을 클릭하여 접속할 수도 있지만

매번 확인할 때마다 AWS에 로그인하고 CloudShell을 클릭하여 작업하기 귀찮기때문에..

로컬 cmd에 ssh 접속을 통해 ci cd 작업을 수행해보고자 한다.

ssh -i [pem 파일경로] ubuntu@[인스턴스 Public IP]

 

cmd에 위와 같이 입력해주면 접속이 되는 것을 확인할 수 있다!

나는 맨 처음 SSH key를 다운받은 폴더 경로에서 cmd를 열어 접속하였다.

 

업데이트를 하고 docker 설치를 진행한다.

참고로 docker 공식 문서를 살펴보면 docker 엔진 정식 버전을 설치하기 위해서

아래와 같은 비공식 패키지는 제거하라고 안내하고 있다. 참고!

 

 

 

Docker 설치

$ sudo su # root 계정으로 접속

$ sudo apt update # ubuntu update


# Add Docker's official GPG key:
$ sudo apt-get update
$ sudo apt-get install ca-certificates curl gnupg
$ sudo install -m 0755 -d /etc/apt/keyrings
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
$ sudo chmod a+r /etc/apt/keyrings/docker.gpg


# Add the repository to Apt sources:
$ echo \
  "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
$ sudo apt-get update


$ sudo groupadd docker # group 만들기

$ sudo usermod -aG docker $USER # 현재 계정을 docker 그룹에 포함시키기

$ sudo systemctl start docker # docker 시작

$ sudo systemctl status docker # docker 상태 확인

 

 

 

프로젝트에 Dockerfile 생성하기

.dockerignore에는 .gitignore와 같이 docker에 들어가면 안되거나, 들어갈 필요가 없는 파일을 적는다.

 

.dockerignore

node_modules/

 

Dockerfile

FROM node:18.10.0

RUN mkdir -p /app
WORKDIR /app
ADD . /app
# mkdir로 /app 폴더를 만들어서
# 경로를 /app으로 이동한 뒤에
# ADD로 모든 파일을 /app으로 복사한다

RUN npm install
# yarn 이면 yarn install or yarn build
# 에러가 발생하면 바꿔주기

ENV HOST 0.0.0.0
EXPOSE 3000
# 모든 IP에서 접근 가능
# 3000 port, 개발 port 여러개를 개발하려면, EXPOSE 3000 80 이렇게 써주면 됨

CMD ["npm", "start"]
# CMD는 여러개 적을 수도 있지만, 마지막에 작성된 CMD만 작동한다.
# 컨테이너에서 작동될 명령을 입력한다. yarn이면 yarn start로 적어주기

 

 

 

Github에서 Token 발급

github 계정으로 ghcr.io에 접근해서 docker 이미지를 만들고, build 하므로 token을 만들어서 넣어주는 작업을 수행한다.

 

1. github 계정의 Settings로 이동

 

2. Developer settings 클릭

 

3. Personal access tokens에 Token(classic) 클릭

 

4. Generate new token (classic) 클릭

 

5. workflow, write:packages, delete:packages 클릭 후, 생성하여 Token 값 복사하기

 

6. 프로젝트 repo의 Settings로 이동하기

이후, Secrets and variables > Actions > New repository secret 클릭

GHCR_TOKEN이라는 이름으로 (다른 이름으로 해도 상관없음. 기억만 하고 있자)

아까 복사한 token을 붙여넣어준다.

 

7. 프로젝트 repo의 Settings에서 Runners

Settings > Actions > Runners 클릭 > New self-hosted runner 클릭 > 우리의 인스턴스 OS가 Linux이므로 Linux 클릭

 

바로 아래의 Download 란의 코드를 차례로 복사해서 LightSail 인스턴스 서버에 입력해 설치해준다.

(세번째 Optional은 말그대로 선택사항임)

 

이제 Configure 부분의 첫번째 내용을 복사해서 붙여넣어준다.

그러면 아래와 같은 오류가 발생할 것이다. (아니면 말구..?)

 

Github action은 기본적으로 루트 권한으로 실행되지 않도록 설계되어있다고 한다.

아래와 같이 export를 수행해주고, Dotnet 6.0을 설치해준다.

 

$ export RUNNER_ALLOW_RUNASROOT="1"

$ sudo ./bin/installdependencies.sh

 

설치가 완료되면 다시 Configure의 첫번째 내용을 복사해서 붙여넣어준다.

그러면 아래 사진과 같이 이쁜 그림이 나올 것이다!

 

엔터, 엔터, label-go(아무 예시), 엔터, 엔터 누르기

이제 백그라운드로 계속 실행시켜놓을 것이기 때문에 nohup을 사용하자

$ nohup ./run.sh &

 

 

 

Github Actions에서 WorkFlow 만들기

프로젝트 repo에서 Actions를 클릭하고 set up a workflow yourself 클릭하기

이후 아래를 참고하여 코드를 작성해주자

name: Taba frontend deploy with Docker

on:
  push:
    branches: [ main ]
    # 무슨 브랜치가 업데이트 될 때 Actions 를 작동시킬지 적는다.
    # develop 브랜치로 개발하며 완료되면 main 에 머지해 Actions 를 작동시키면 조금 더 안전
    # 여러개 적어도 된다.

env:
  DOCKER_IMAGE: ghcr.io/${{ github.actor }}/chargingpot
  VERSION: ${{ github.sha }}
  NAME: tabafrontgo
  # Docker image 를 ghcr.io 에 올릴 때 우리의 github이름/이미지이름 으로 저장한다. 이미지이름을 정해주면 된다.
  # Docker image 의 이름을 superman 이라고 해놓은 것. 이름 뭐할지 정하면 된다.

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Setup docker buildx
        id: buildx
        uses: docker/setup-buildx-action@v1

      - name: Cache docker layers
        uses: actions/cache@v2
        with:
          path: /tmp/.buildx-cache
          key: ${{ runner.os }}-buildx-${{ env.VERSION }}
          restore-keys: |
            ${{ runner.os }}-buildx-
      - name: Login to ghcr
        uses: docker/login-action@v1
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GHCR_TOKEN }}
          # 우리가 방금 복사해서 setting secrets 에 붙여줬던 token 이다. 이름을 기억해 넣어주자.
          # 우리의 ghcr.io 에 접근하기 위함이다.

      - name: Build and push
        id: docker_build
        uses: docker/build-push-action@v2
        with:
          builder: ${{ steps.buildx.outputs.name }}
          push: true
          tags: ${{ env.DOCKER_IMAGE }}:latest

  deploy:
    needs: build
    name: Deploy
    runs-on: [ self-hosted, label-go ]
    # label-go 라는 이름으로, Runner 를 작동시킬 때 사용했던 그 label
    steps:
      - name: Login to ghcr
        uses: docker/login-action@v1
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GHCR_TOKEN }}

      - name: Docker run
        run: |
          docker stop ${{ env.NAME }} && docker rm ${{ env.NAME }} && docker rmi ${{ env.DOCKER_IMAGE }}:latest
          docker run -d -p 3000:3000 --name tabafrontgo --restart always ${{ env.DOCKER_IMAGE }}:latest
          
          # 첫 줄
          # 먼저 진행되고 있던 docker 를 stop(멈추고), rm 로 docker 컨테이너를 지우고, rmi 로 docker 이미지를 지운다.
          # 새롭게 build 된 docker 를 사용하기 위함.
          
          # 두번째 줄
          # -d : 백그라운드로
          # -p : 포트 번호 3000번에서 3000번으로 접근
          # --name : docker 이미지 이름을 tabafrontgo 로 할거다. 이게 나중에 위에 적은거랑 같아야하는데 왜냐면 첫 줄이랑 같아야 나중에 지워지니까. 확인하자.

 

 

commit을 하면, 자동으로 Actions가 돌아가게 되고 성공하면 아래와 같이 초록불이 들어온다.

 

이제 Public IP:3000으로 접속해보자!!!

 

위와 같이 깡통 React 화면이 잘 나오는 것을 확인할 수 있다.

이제 프론트엔드가 작업해서 PR 날리는 걸 받으면, CI CD 작업이 수행된다.

그럼 일일이 쉘에 접속해서 git clone하고 서버 다시 키는 일을 안해도 된다!!

 

 

Reference

https://ddochea.tistory.com/116

[AWS/Lightsail] SSH 연결 설정

 

https://docs.docker.com/engine/install/ubuntu/

Install Docker Engine on Ubuntu

 

https://yoongrammer.tistory.com/41

Docker 사용하기

 

https://velog.io/@shdrnrhd113/Runner-%EC%83%9D%EC%84%B1-%EC%95%88%EB%90%98%EB%8A%94-%EB%AC%B8%EC%A0%9C

Runner 생성 안되는 문제

 

https://velog.io/@thovy/CICD-Github-Actions-%EC%99%80-Runners-%EA%B7%B8%EB%A6%AC%EA%B3%A0-AWS-EC2-linux-%EC%9C%BC%EB%A1%9C-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

[CI/CD] Github Actions 와 Runners 그리고 AWS EC2 linux 으로 React 프로젝트 배포하기