배포 flow

회사의 배포 전략

• github CI/CD 이용

• dev, prod 분리 진행

• prod => s3, cloudfront 이용

• dev => 사내 서버 이용, nginx 이용

배포 flow

1. prod : push => github CI/CD => S3,CloudFront => 배포

2. dev : push => github CI/CD => 서버 접속, nginx 웹 서버 접속 => url,port 분리 => 배포

상세

1. prod 관련, CI/CD 위한 yml 예시

name: Deploy to  제목 Server  <-이름
 
on:
  push:
    branches:
      - 'release/prod-**'   <- yml을 작동 할 브랜치 즉, prod 브랜치로 푸시하면 배포
 
jobs:
  deploy:
    runs-on: github hosted 제목  //github hosted 사용
    steps:
      - name: Checkout source code
        uses: actions/checkout@master
 
      - name: Cache node modules
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-build-
            ${{ runner.OS }}-

      - name: Use Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 16   // 노드 버전

      - name: Install Dependencies
        run: npm install

      - name: Setting .env.prd
        run: |
          echo "REACT_APP_KAKAO_API=${{ secrets.REACT_APP_KAKAO_API }}" >> .env.prd
          echo "REACT_APP_API_HOST=${{ secrets.REACT_APP_API_HOST }}" >> .env.prd
          cat .env.prd      

      - name: Build
        run: CI=false npm run build:prd
 
      - name: Deploy
        env: // 대충 환경변수
        run: //s3 연결변수

      - name: Invalidate CloudFront   // CloudFront 이용
        uses: 
        env: //대충 환경변수

yml을 통해서 s3,cloudFront 에 접근하여 정적 배포를 진행합니다. s3와 cloudfront를 같이 이용하는 이유는

1. 성능 향상: Amazon S3는 정적 파일을 호스팅하기에 우수한 서비스입니다. S3는 파일을 안정적으로 제공하며, 글로벌 네트워크를 통해 빠르게 전송할 수 있도록 최적화되어 있습니다. CloudFront는 콘텐츠 전송 네트워크(Content Delivery Network, CDN)로서, 전 세계에 분산된 엣지 로케이션을 사용하여 콘텐츠를 빠르게 전달합니다. 이를 통해 사용자는 정적 파일을 가장 가까운 엣지 로케이션에서 로드하므로 웹 페이지의 로딩 속도가 향상됩니다.

2. 확장성: S3는 무제한 스토리지를 제공하며, 정적 파일을 관리하는 데 용이합니다. CloudFront는 서버리스 아키텍처로, 트래픽이 증가할 때도 자동으로 확장되므로 대규모 트래픽을 처리하기에 적합합니다.

3. 보안: S3는 데이터를 안전하게 저장하기 위한 다양한 보안 옵션을 제공하며, CloudFront는 DDoS 공격 및 웹 애플리케이션 공격을 방어하기 위한 보안 기능을 제공합니다. 또한 CloudFront는 SSL/TLS 암호화를 지원하여 데이터 전송 중에 보안을 유지합니다.

4. 가용성: S3와 CloudFront는 AWS의 여러 리전과 엣지 로케이션에 분산되어 있으므로, 높은 가용성을 제공합니다. 이는 사용자에게 항상 가장 가까운 서버에서 콘텐츠를 제공할 수 있음을 의미합니다.

2. dev 관련, CI/CD 위한 yml 예시

name: Deploy on 제목 Server  <-이름
 
on:
  push:
    branches:
    - 'develop'  <- yml을 작동 할 브랜치 즉, develop 브랜치로 푸시하면 배포
jobs:
  build: 
    runs-on: self-hosted 제목  <- GitHub Actions 워크플로우에서 사용되는 실행 환경(runner)을 지정
    steps: 
      - name: Checkout  <- 리포지토리의 코드를 체크아웃합니다.
        uses: actions/checkout@v2
 
      - name: Cache node modules <- node_modules 디렉토리를 캐시합니다. 캐시된 모듈은 이후 빌드 단계에서 재사용됩니다.
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-build-
            ${{ runner.OS }}-

      - name: Install Dependencies  <- 명령어를 실행하여 필요한 종속성을 설치합니다.
        run: npm install 

      - name: Setting .env
        run: |
          echo "REACT_APP_API_HOST=${{ secrets.REACT_APP_API_HOST }}" >> .env
          cat .env

      - name: Build  <- 명령어를 실행하여 애플리케이션을 빌드합니다. CI=false는 CI 환경에서 빌드가 실행되는 것을 방지하기 위한 설정입니다.
        run: CI=false npm run build


      - name: run deploy script  <- SSH를 사용하여 "제목" 호스트로 접속한 후, 스크립트를 실행합니다. 
        shell: bash
        run: ssh 제목 cd ~/app && cd ~/app/frontend/ && sh ~/app/frontend/제목.sh

서버에 기본 설정(runner 등)이 완료되었으면 자동으로 서버에 접근하여 yml 코드에 맞게 실행이 됩니다. cd를 통해서 deploy.sh 가 있는 위치까지 이동 후에 .sh 파일을 실행 시킴으로써 프로젝트 build 를 하게 됩니다. deoloy.sh 를 통해서 레포에서 만들어진 build 파일을 원하는 경로에 연결하고 nginx 설정을 통해 원하는 url로 연결이 가능합니다.

주의사항

해당 방식은 self-hosted 방식이다, 연결은 github를 통해서 Action/runner을 생성하고 runner의 설정을 가상서버(우분투 등)에 따라해준다.