FE CI/CD 구축하기

</aside>

어떻게 FE CI/CD 파이프 라인을 구성할 것인가?

GitHub Actions 를 이용하여 FE 빌드파일을 release 브랜치에 merge 될때 자동으로 배포하여 배포 자동화와 배포 시간 단축, 안정성을 보장 하기로 하였습니다.
초기에는 빌드파일을 오브젝트 스토리지를 통해 제공하고 NGINX에게 제공하는 식으로 구성하였지만 후에는 바로 서버 인스턴스에 직접 빌드파일을 배포하는식으로 전환하였습니다.

파이프라인 구성

초기 설계(오브젝트 스토리지 업로드)

오브젝트 스토리지에 빌드 파일을 업로드 하기위해 오브젝트스토리지를 먼저 생성해주었습니다.
- 다음과 같은 설정으로 생성하였습니다.
- NCP 오브젝트 스토리지 생성

난독화 빌드 및 오브젝트 스토리지 업로드

먼저 빌드가 잘되는지 확인해보기위해서 빌드 후 난독화를 해보았습니다.
빌드시에 eslint에 설정된 규약에 걸려(안쓰는 변수 경고 등) 해당 부분은 테스트를 위해 수정 후 빌드 하였습니다.

PS C:\\Users\\em111\\OneDrive\\바탕 화면\\naver boostcamp membership\\web11-road_to_friendly\\frontend> npm run build

> [email protected] build
> tsc -b && vite build && npm run obfuscate

vite v5.4.10 building for production...
✓ 152 modules transformed.
dist/index.html                          0.40 kB │ gzip:  0.28 kB
dist/assets/landing-clap-DvtoQqed.png  148.18 kB
dist/assets/index-CsY7WTYs.js          254.88 kB │ gzip: 86.07 kB
✓ built in 4.44s

> [email protected] obfuscate
> javascript-obfuscator ./dist --output ./dist

[javascript-obfuscator-cli] Obfuscating file: dist\\assets\\index-CsY7WTYs.js...

빌드가 잘되는 것을 확인하여 GitHub Actions 스크립트를 작성하여 파이프라인을 구성하였습니다.

ncp에 오브젝트 스토리지와 aws-cli가 호환이 가능하여 aws-cli를 설치를 하여 업로드를 하려고 하였으나 의존성 중 하나인 PyYAML 패키지를 설치하지 못해서 발생하는 문제가 발생하여 최신 버전에 pip를 업그레이드, aws-cli 설치 후 aws-cli가 의존하는 pyYAML 라이브러리를 설치하여 해결하였습니다.

note: This error originates from a subprocess, and is likely not a problem with pip.
error: legacy-install-failure

× Encountered error while trying to install package.
╰─> PyYAML

note: This is an issue with the package mentioned above, not pip.
hint: See above for output from the failure.
Error: Process completed with exit code 1.
# 의존성 중 하나인 PyYAML 패키지를 설치하지 못해서 발생하는 문제

GitHub Actions 작성

name: Release Frontend Build

on:
  push:
    branches:
      - release

jobs:
  build-and-upload:
    runs-on: ubuntu-latest

    steps:
      # 1. 리포지토리 클론
      - name: Checkout code
        uses: actions/checkout@v4

      # 2. Node.js 환경 설정
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      # 3. 의존성 설치
      - name: Install dependencies
        working-directory: ./frontend
        run: npm ci

      # 4. 난독화 및 빌드
      - name: Build and Obfuscate
        working-directory: ./frontend
        run: npm run build # 빌드 실행

      # 5. PyYAML 및 AWS CLI 설치
      - name: Install dependencies
        run: |
          pip install --upgrade pip # 최신 버전의 pip로 업그레이드합니다.
          pip install PyYAML # awscli가 의존하는 PyYAML 라이브러리를 설치합니다.
          pip install awscli --upgrade --no-cache-dir # 최신 버전의 AWS CLI를 설치합니다.

      # 6. 빌드 파일 업로드
      - name: Deploy
        env: 
          AWS_ACCESS_KEY_ID: ${{ secrets.NCP_ACCESS_KEY }} # AWS CLI 인증정보
          AWS_SECRET_ACCESS_KEY: ${{ secrets.NCP_SECRET_KEY }}
        run: |
          aws --endpoint-url=https://kr.object.ncloudstorage.com s3 cp --recursive ./frontend/dist s3://load-to-friendly-bucket

개선안 도입 (서버 인스턴스 직접 배포)

초기설계대로 파이프라인을 구성한뒤 팀원분과 얘기를 나눠봤을때 오브젝트 스토리지에 빌드 파일을 업로드 후 Nginx로 제공하는 방식이 고가용성이 아니면 오브젝트 스토리지를 거치지 않아도 된다는 결론이 나와 바로 서버 인스턴스에 빌드 파일을 전송하여 배포하는 식으로 변경하여 단순화 및 효율성을 강화하였습니다.
NGINX와 정적 파일 관리
- NGINX 정적 파일 디렉토리(/var/www/html/)에 빌드 파일 배포.
- 기존 빌드 파일은 /var/www/backup/에 백업 후 교체.
- 배포 후 권한 설정을 통해 NGINX가 파일에 정상적으로 접근할 수 있도록 www-data 권한구성.
www-data
- Nginx와 Apache 웹 서버에서 주로 사용되는 사용자 계정 및 그룹 이름
- 이 계정은 웹 서버가 파일에 접근할 때 사용하는 기본 사용자 계정으로 설정됩니다.
- 웹 서버가 파일을 읽고 쓸 수 있도록 적절한 권한을 부여해야 하며, 이는 www-data 사용자로 설정하는 방식으로 관리됩니다.
GitHub Actions 작성

name: Release Frontend Build

on:
  push:
    branches:
      - release

jobs:
  build-and-upload:
    runs-on: ubuntu-latest

    steps:
      # 1. 리포지토리 클론
      - name: Checkout code
        uses: actions/checkout@v4

      # 2. Node.js 환경 설정
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      # 3. 의존성 설치
      - name: Install dependencies
        working-directory: ./frontend
        run: npm ci

      # 4. 빌드
      - name: Build and Obfuscate
        working-directory: ./frontend
        run: npm run build # 빌드 실행

      # 5. 빌드된 파일을 인스턴스 서버로 전송
      - name: Deploy to EC2
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SSH_HOST }} # 서버의 호스트 IP
          username: ${{ secrets.SSH_USERNAME }} # SSH 사용자명
          key: ${{ secrets.SSH_KEY }} # SSH 비공개 키
          source: "frontend/dist/*" # 빌드된 파일이 있는 디렉토리
          target: "/tmp/build" # 원격 서버로 파일을 복사할 디렉토리
          strip_components: 2 # 상위 디렉토리 레벨을 제거

      # 6. 백업 및 기존파일 삭제, 복사
      - name: Configure EC2
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SSH_HOST }} # 서버의 호스트 IP
          username: ${{ secrets.SSH_USERNAME }} # SSH 사용자명
          key: ${{ secrets.SSH_KEY }} # SSH 비공개 키
          script: |
            # 기존 파일 백업 (롤백을 위해)
            sudo tar -czf /var/www/backup/$(date +%Y%m%d_%H%M%S).tar.gz -C /var/www/html .

            # 새 빌드 파일 복사
            # sudo rm -rf /var/www/html/*
            sudo cp -r /tmp/build/* /var/www/html/

            # 권한 설정
            sudo chown -R www-data:www-data /var/www/html

            # Nginx 설정 확인 및 리로드(기존 연결을 끊지 않고 새로운 설정 적용)
            sudo nginx -t && sudo systemctl reload nginx

CI/CD 파이프라인의 중요성을 체감하며, 수동 작업을 최소화하고 배포 시간을 줄이는 과정에서 효율성을 직접 경험할 수 있었습니다.