GitHub Actions는 GitHub에서 제공하는 CI/CD(Continuous Integration/Continuous Delivery) 도구로, 코드의 빌드, 테스트, 배포와 같은 자동화된 작업을 수행할 수 있습니다. 프론트엔드 개발자에게 GitHub Actions는 프로젝트의 지속적인 통합 및 배포 파이프라인을 구성하는 데 매우 유용한 도구입니다. 아래는 GitHub Actions의 동작 원리, 과정, 그리고 프론트엔드 개발자가 알아야 할 주요 개념을 정리한 내용입니다.
GitHub Actions는 리포지토리에서 코드 변경이 발생할 때, 특정 작업을 자동으로 수행할 수 있도록 하는 자동화 도구입니다. 워크플로우(Workflow)라고 불리는 일련의 작업들을 정의하고, 이를 트리거(Trigger)에 따라 실행합니다. GitHub Actions는 YAML 파일을 사용해 설정을 정의하며, 이 파일은 .github/workflows/ 디렉터리에 위치합니다.
워크플로우(Workflow): 워크플로우는 자동화된 프로세스의 정의로, 하나 이상의 작업(Job)으로 구성됩니다. 워크플로우는 특정 이벤트에 의해 트리거됩니다. 예를 들어, 코드가 푸시될 때 테스트를 실행하는 워크플로우를 정의할 수 있습니다.
잡(Job): 잡은 여러 스텝(Step)으로 구성된 작업 단위입니다. 각 잡은 독립적으로 실행되며, 병렬 또는 순차적으로 실행할 수 있습니다. 예를 들어, 테스트 잡과 빌드 잡을 병렬로 실행하거나, 빌드가 완료된 후에만 배포 잡이 실행되도록 설정할 수 있습니다.
스텝(Step): 스텝은 잡 내에서 실행되는 개별 명령어 또는 작업입니다. 각 스텝은 스크립트나 액션(Action)으로 정의됩니다.
액션(Action): 액션은 스텝에서 실행되는 재사용 가능한 코드 조각입니다. GitHub 마켓플레이스에서 제공되는 다양한 액션을 사용해 쉽게 작업을 자동화할 수 있습니다. 예를 들어, 코드 스타일 검사를 위한 ESLint 액션을 추가하거나, Docker 이미지를 빌드하는 액션을 추가할 수 있습니다.
런너(Runner): 런너는 워크플로우를 실행하는 환경입니다. GitHub에서 제공하는 호스티드 런너를 사용할 수도 있고, 자체 호스티드 런너를 설정할 수도 있습니다.
이벤트(Event): 이벤트는 워크플로우를 트리거하는 조건입니다. 대표적인 이벤트로는 push, pull_request, issue, schedule 등이 있으며, 특정 브랜치에 코드가 푸시되었을 때, 혹은 특정 시간에 주기적으로 워크플로우를 실행하는 것이 가능합니다.
트리거(Event) 감지: 리포지토리에 정의된 특정 이벤트(예: 코드 푸시, PR 생성 등)가 발생하면, GitHub Actions가 워크플로우를 트리거합니다.
워크플로우 실행: 트리거된 워크플로우가 정의된 순서대로 잡(Job)을 실행합니다. 각 잡은 지정된 런너 환경에서 실행됩니다.
잡(Job) 실행: 각 잡은 독립적으로 실행되며, 여러 스텝(Step)으로 구성됩니다. 잡은 병렬로 실행될 수도 있고, 순차적으로 실행될 수도 있습니다.
스텝(Step) 실행: 각 스텝은 명령어 또는 액션을 수행하며, 성공 또는 실패로 완료됩니다. 실패가 발생하면 워크플로우가 중단될 수 있습니다.
결과 보고: 모든 스텝이 실행되면, GitHub Actions는 워크플로우 실행 결과를 요약하여 GitHub의 웹 인터페이스에 표시합니다. 여기서 로그를 확인하거나, 실패한 이유를 분석할 수 있습니다.
GitHub Actions는 .github/workflows/ 디렉터리에 위치한 .yaml 파일(혹은 .yml 파일)로 설정됩니다. 다음은 프론트엔드 프로젝트에서 자주 사용하는 GitHub Actions 설정 파일 예시입니다.
name: CI/CD Pipeline
on:
push:
branches:
- main
- develop
pull_request:
branches:
- main
- develop
jobs:
build-and-test:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x, 18.x] # 테스트하고자 하는 Node.js 버전들
steps:
- name: Check out the code
uses: actions/checkout@v4
- name: Set up Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: "npm" # 캐시 사용
- name: Install dependencies
run: npm ci # 의존성 설치
- name: Run Lint
run: npm run lint # 린트 작업 수행
- name: Run Tests
run: npm test # 유닛 테스트 수행
- name: Build Project
run: npm run build # 빌드 수행
# deploy:
# runs-on: ubuntu-latest
# needs: build-and-test # 빌드 및 테스트가 성공한 경우에만 배포
# steps:
# - name: Deploy to Vercel
# uses: amondnet/vercel-action@v20
# with:
# vercel-token: ${{ secrets.VERCEL_TOKEN }}
# vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
# vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
# working-directory: ./
📄 실제 프로젝트시 사용했던 main.yml 파일
name: Slam Talk CI
on:
workflow_dispatch:
push:
branches: [main, develop]
pull_request:
branches: [main, develop]
jobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [20.x]
steps:
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
- run: npm ci
- run: npm run lint
브랜치 트리거 설정:
노드 버전 설정:
CI 작업:
Github을 통해 Vercel을 연결하면 자동으로 CI/CD 파이프라인을 구성할 수 있습니다.
👉 Vercel에서 자동으로 CI/CD가 되기 때문에 자동 Lint 검사 용도 정도로 Github Actions CI를 활용했습니다.
Jest 테스트 등이 추가되면 좋을 것 같습니다.
프론트엔드 개발에서 GitHub Actions는 다음과 같은 작업을 자동화하는 데 유용합니다:
이러한 활용 방법을 통해, 프론트엔드 개발자는 GitHub Actions를 사용하여 코드를 자동으로 검사, 테스트, 빌드, 배포할 수 있으며, 이를 통해 개발 속도와 코드 품질을 크게 향상시킬 수 있습니다.
GitHub Actions를 사용하면 코드가 푸시될 때마다 자동으로 테스트, 빌드, 배포가 이루어지며, 이를 통해 안정적인 배포 파이프라인을 구축할 수 있습니다. YAML 파일을 통해 간단하게 설정할 수 있고, GitHub의 방대한 생태계와 액션을 활용하여 다양한 자동화를 실현할 수 있습니다.
Vercel은 무중단 배포를 기본으로 하며, 이전 버전의 애플리케이션을 유지하면서 새로운 버전을 배포합니다. 이를 통해 배포 중에도 사용자가 끊김 없이 애플리케이션을 사용할 수 있습니다.
Continuous Integration(CI)은 소프트웨어 개발에서 팀원들이 각자 작업한 코드를 자주 병합(Integration)하여, 자동으로 빌드(Build)와 테스트(Test)를 수행하는 과정을 말합니다. CI의 주요 목표는 코드 병합 시 발생할 수 있는 충돌과 버그를 조기에 발견하고 해결하는 것입니다.
Continuous Delivery(CD)와 Continuous Deployment(CD)는 CI의 다음 단계로, 빌드된 코드가 자동으로 배포(Deployment)되는 과정을 포함합니다.
두 개념은 “CD”로 불리지만, Continuous Delivery와 Continuous Deployment의 차이점은 수동 승인이 있는지 여부입니다.
파이프라인(Pipeline)은 소프트웨어 개발 및 배포 과정에서 일련의 작업이 자동으로 순차적으로 또는 병렬로 수행되는 흐름을 말합니다. 이 개념은 특히 CI/CD(Continuous Integration/Continuous Deployment)에서 많이 사용됩니다. 파이프라인은 코드의 변경 사항이 소스 코드 저장소에 반영된 후, 빌드, 테스트, 배포와 같은 단계들이 자동으로 실행되도록 구성합니다.
파이프라인의 주요 단계
파이프라인의 장점
예를 들어, GitHub Actions에서 파이프라인을 설정하면 다음과 같은 흐름으로 작업이 진행될 수 있습니다:
이와 같은 파이프라인을 통해 개발부터 배포까지의 과정을 자동화하여 더 빠르고 안정적인 소프트웨어 제공이 가능합니다.
빌드 결과물(Build Artifacts)은 CI/CD 파이프라인에서 코드가 빌드된 후 생성되는 산출물입니다. 빌드 결과물은 일반적으로 애플리케이션의 배포 가능한 형태로, 다음과 같은 형태일 수 있습니다:
이러한 빌드 결과물은 CI/CD 파이프라인에서 생성된 후, 다음 단계로 배포되거나, 저장소에 보관되어 배포 시 사용됩니다.
CDN(Content Delivery Network)은 인터넷 사용자들에게 콘텐츠를 빠르고 효율적으로 전달하기 위해 사용되는 분산된 서버 시스템입니다. CDN은 다음과 같은 주요 기능을 수행합니다:
정리
서버리스 함수는 서버 관리에 신경 쓰지 않고, 코드 작성에만 집중할 수 있는 클라우드 컴퓨팅 모델입니다. 개발자는 특정 이벤트가 발생했을 때 실행되는 개별 함수로 코드를 작성하고, 클라우드 제공자(AWS Lambda, Google Cloud Functions, Vercel Serverless Functions 등)가 이 함수를 자동으로 실행하며, 인프라 관리와 확장성을 처리합니다.
서버리스 모델을 사용하면 인프라 관리 없이도 코드의 배포와 실행을 효율적으로 처리할 수 있습니다.
Next.js 환경에서는 API Routes를 사용하여 app/api 또는 pages/api 디렉토리에 서버리스 함수를 정의할 수 있습니다.
로드 밸런싱은 네트워크나 애플리케이션 트래픽을 여러 서버(또는 인스턴스)로 분산시켜, 서버의 부하를 고르게 분배하는 기술입니다. 이를 통해 하나의 서버에 과도한 요청이 몰리는 것을 방지하고, 시스템의 성능과 안정성을 높일 수 있습니다.
로드 밸런싱은 웹 애플리케이션의 성능 최적화와 가용성을 높이기 위해 중요한 역할을 합니다.
DDoS(Distracted Denial of Service) 공격은 대규모의 트래픽을 특정 서버나 네트워크에 집중적으로 전송하여, 정상적인 서비스가 불가능하게 만드는 사이버 공격입니다. DDoS 공격은 일반적으로 분산된 여러 컴퓨터(봇넷)가 동시에 공격을 수행해, 타겟 서버의 자원을 고갈시킵니다.
DDoS 공격은 서비스 가용성을 저해하고, 비즈니스에 심각한 영향을 미칠 수 있기 때문에 적절한 보안 대책이 필요합니다.
추가하면 좋은 부분이나 잘못된 점이 있다면 댓글 남겨주세요. 감사합니다 :)