본문 바로가기
  • 컴공생의 공부 일기
  • 공부보단 일기에 가까운 것 같은
  • 블로그
Club|Project/이대솔브닥웹사이트 - 뀨엘 | Frontend(React,Next.js)

📊 뀨엘 : CI/CD (github actions)

by 정람지 2024. 9. 12.

우어어엉~~감성잇을지두~~~~


로컬 저장소 체크

git remote -v

오리진 패치해오기

git fetch origin

브랜치 보기

git branch -r

오리진 브랜치 가져오기

git pull origin 브랜치이름

📊 github actions

개념

- Workflow
자동화된 전체 프로세스. 하나 이상의 Job으로 구성되고, Event에 의해 예약되거나 트리거될 수 있는 자동화된 절차
Workflow 파일은 Github Repository의 .github/workflows 폴더 아래에 YAML으로 작성

 

- Event
Workflow를 트리거(실행)하는 특정 활동이나 규칙

 

- Job
Job은 여러 Step으로 구성되고, 단일 가상 환경에서 실행

다른 Job에 의존 관계를 가질 수도 있고, 독립적으로 병렬로 실행될 수도

있음

 

- Step
Job 안에서 순차적으로 실행되는 프로세스 단위. step에서 명령을 내리거나, action을 실행

 

- Action
job을 구성하기 위한 step들의 조합으로 구성된 독립적인 명령

workflow의 가장 작은 빌드 단위

 

- Runner
Gitbub Action Runner 어플리케이션이 설치된 머신으로, Workflow가 실행될 인스턴스


Workflow  yaml 파일 작성

깃헙 레포지토리의 액션 탭에 노출되는 workflow의 이름

name: Deploy to AWS EC2 using Docker

 

push 이벤트 ( main 브랜치에 푸시할 때마다 job 실행

on: 
    push: 
        branches:
             - main

 

 

job에 대한 설정

jobs: 
        build-and-push-docker:
deploy-to-ec2:

 

  • runs-on: 해당 job을 어떤 OS에서 실행할 것인지 명시
  • steps: job이 가질 수 있는 동작의 나열
    • name: step의 이름
    • uses: 해당 step에서 사용할 액션
    • run: job에 할당된 컴퓨팅 자원의 shell을 이용하여 커맨드 라인을 실행
name: Deploy to AWS EC2 using Docker

on:
  push:
    branches:
      - main

env:
  DOCKER_IMAGE: celina324/qup-frontend

jobs:
  build-and-push-docker:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v2
      - name: Log in to Docker Hub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
      - name: Build and push Docker image
        uses: docker/build-push-action@v3
        with:
          context: .
          file: ./Dockerfile
          push: true
          tags: ${{ env.DOCKER_IMAGE }}:latest, ${{ env.DOCKER_IMAGE }}:${{ github.sha }}

  deploy-to-ec2:
    needs: build-and-push-docker
    runs-on: ubuntu-latest
    steps:
      - name: Deploying to AWS EC2
        uses: appleboy/ssh-action@v0.1.4
        with:
          host: ${{ secrets.EC2_HOST }}
          username: ${{ secrets.EC2_USER }}
          key: ${{ secrets.EC2_SSH_PRIVATE_KEY }}
          script: |
            if ! docker pull ${{ env.DOCKER_IMAGE }}:latest; then
              echo "Failed to pull the latest image."
              exit 1
            fi
            docker stop qup-frontend || true
            docker rm qup-frontend || true
            docker run -d --name qup-frontend -p 80:3000 ${{ env.DOCKER_IMAGE }}:latest

needs는 deploy-to-ec2 job이 build-and-push-docker 작업 후에 실행되어야 함을 나타냄


GitHub Secrets 설정

github repo에 접속

"Settings>Security>Secrets>Actions" 탭에 접근해 나오는 페이지에서 우측 상단 "New repository secret"

AWS_ACCESS_KEY_ID - AWS 액세스 키
AWS_SECRET_ACCESS_KEY - AWS 비밀 키
EC2_SSH_PRIVATE_KEY - EC2 인스턴스에 로그인하는 데 사용되는 SSH 개인 키
EC2_HOST - EC2 인스턴스의 IP 주소나 도메인 이름
EC2_USER - EC2 인스턴스에 로그인할 때 사용하는 사용자 이름(기본적으로 ec2-user)

DOCKER_USERNAME - 도커 유저네임
DOCKER_PASSWORD - 도커 비밀번호


실행 테스트

1차 시도 실패 ㅠㅠ

도커허브에 레포지토리가 없다!!

생성!

실패실패실패실패~

DOCKER_IMAGE: celina324/qup-frontend

도커 이미지명 앞에 계정 이름 붙여야 함..!

 

config 파일 수정

rm -rf node_modules 
npm install 

이야! 첫 번째 job 성공~!~!

우우! 두 번째 job 실패

 

도커를 ec2에 안 깔앗엇기 때문에.. 깔았다

그래도 오류,,,,

 

지혁오빠 yaml에서 deploy-to-ec2 job 긁어왓다

한줄체인지
길었다.....

성공!!!

왜지?

appleboy/ssh-action@v0.1.4를 appleboy/ssh-action@master로 변경했을 때 성공한 이유

=> appleboy/ssh-action@master는 최신 개선 사항과 버그 수정을 포함하고 있어 더 나은 호환성을 제공했을 가능성

이 있대.

 

쉽지 않다...

그런데 왜 안 보이지

 80:80으로 되어 있었어서 안 됐었다

지혁오빠가 고쳐줌~ 바로취업성공할듯

curl
Client Url 이란 의미로 클라이언트에서 url을 사용해서 서버와 데이터를 송수신하는 명령어 툴

curl로 떳는지 본다

80:3000으로 바꾸기

컨테이너 내부에서 Next.js가 실제로 포트 3000에서 애플리케이션을 실행하고 있었기 ㅒㄸ문~ 

로컬에서 실행하면 localhost:3000에서 열렷ㄴ잔아

docker run -d --name qup-frontend -p 80:3000 ${{ env.DOCKER_IMAGE }}:latest

-p 80:3000는 호스트 머신의 80번 포트를 컨테이너 내부의 3000번 포트에 매핑

  • 즉, EC2 인스턴스(호스트)에서 80번 포트에 요청이 오면, 컨테이너 내부에서는 3000번 포트로 해당 요청을 전달
    • 따라서, 외부에서 EC2 인스턴스의 IP 주소로 HTTP 요청(포트 80)을 보내면, 그 요청은 컨테이너 내의 포트 3000에서 애플리케이션이 처리

EC2 인스턴스의 보안 그룹에서의 포트 설정

  • 현재 인바운드 규칙에서 보면 **포트 80(TCP)**에 대해 외부 접근이 허용되어 있는 상태임
  • 즉, EC2 인스턴스의 포트 80을 외부에서 접근할 수 있고, 이를 통해 docker run에서 매핑된 컨테이너의 포트 3000번 애플리케이션과 통신할 수 있음

퍼블릭 IPv4 주소랑 탄력적 IP 주소 전부 작동! 냠냠굿

클라우드 공부해야지

앞으로 깃허브 액션 애용해야지~~~