ETC - 2022. 7. 12.

GitHub Action으로 AWS S3에 배포 자동화

🤟GitHub Action으로 AWS S3에 배포 자동화

안녕하세요 Tripexlab 입니다. 이번 시간에는 GitHub에 Action이라는 기능을 사용해서
AWS S3에 배포 자동화 하는것을 공유해보겠습니다.👍👍👏👏🎉🎉

👉S3에 웹사이트를 호스팅 할 수 있는 경우와 장점

일반적으로는 EC2에 nginx나 apache를 띄우고, static 파일을 업로드하는 식으로 배포를 하는데, 단순히 Vue.js나 React같이 SPA로 된 프로젝트의 경우는 자바스크립트만 동작하면 되기에 서버가 필요없다. 이런 경우, S3 스토리지에 올리면 서버 없이 간단히 프론트 앱을 런칭할 수 있습니다.

금액적인 측면에서도 서버를 운영하는 비용보다, S3에 정적 호스팅하는 비용이 저렴합니다.

👉GitHub Actions 란?

Action은 Github 내에서 소스 코드 관리부터 배포 자동화까지 한번에 처리할 수 있다는 점입니다.

👉아키텍쳐 구성

GitHub Actions가 특정 브랜치의 변경을 감시하다가,
변경이 감지가 되면 Workflow 프로세스를 실행하고, 이때 빌드와 S3에 배포가 진행됩니다.

👉Workflow 설정하기

Github Action을 등록하려면 아래와 같이 Actions탭에 들어가서 "set up a workflow yourself"버튼을 클릭하여 만들면 됩니다.
(.github/workflows 폴더 안에 yml 설정 파일을 만들면 됩니다.)

저는 main.yml이라는 파일을 만들어서 다음과같이 작성했습니다.

# main.yml
name: master

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]    # main 브랜치에서 push, pull_request 이벤트가 일어났을 때 실행

jobs:
  build:
    runs-on: ubuntu-18.04
    steps:
      - name: Checkout source code
        uses: actions/checkout@master

      - name: Cache node modules  # node modules 캐싱
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.OS }}-master-build-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.OS }}-build-
            ${{ runner.OS }}-

      - name: Install Dependencies
        run: yarn

      - name: Build
        run: yarn build

      - name: Deploy
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
          aws s3 cp \
            --recursive \
            --region ap-northeast-2 \
            build s3://프로젝트이름

👉S3 버킷 생성

버킷을 생성
정적 웹 사이트 호스팅 에서 인덱스 문서와 오류 문서에 index.html을 적어주고 저장 버튼을 누른다.

🎯버킷 액세스 정책 설정하기

해당 버킷에 모든 사용자들이 접근할 수 있게 정책을 설정해야 한다.
권한 - 퍼블릭 액세스 차단 탭에 들어가서 모든 퍼블릭 액세스 차단을 해제한다.

그리고 버킷 정책 탭에 들어가 정책 편집기에 정책을 작성한다.

{
    "Version": "2012-10-17",
    "Id": "Policy1657375632294",
    "Statement": [
        {
            "Sid": "Stmt1657375622912",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::프로젝트이름/*"
        }
    ]
}

그리고 저장을 하면 호스팅을 위한 버킷 설정은 끝난다.

👉IAM으로 AWS CLI 권한 생성

AWS IAM 페이지에 들어와서 사용자 추가를 누른다.
사용자 이름을 예) triplex_lab 과 같이 정하고
AWS 액세스 유형 선택은 프로그래밍 방식 엑세스에 체크를 하고 다음으로 넘어간다.

그리고 기존 정책 직접 연결 탭에서 s3를 검색하고, AmazonS3FullAccess를 선택하여 다음으로 넘어갑니다.

3단계 태그 추가는 선택 사항이므로 그냥 다음으로 넘어갑니다.

내가 위에서 설정한것 한눈에 다시 확인할수 있습니다.

5단계 마지막으로 새로운 사용자가 추가 되었고, 아래와 같은 화면을 볼 수 있습니다.

여기서 꼭❗ .csv를 다운로드하여 접근 권한 키를 저장해야한다! 해당 키는 나중에 CLI에서 접근하기 위해 필요합니다.

비밀 키는 생성 시에만 보거나 다운로드할 수 있으며, 기존 비밀 키를 잃어버렸을 경우에는 새 액세스 키를 생성해야합니다.
해당 키는 외부에 절대 노출되어서는 안됩니다.!!

👉Github Action에 비밀 키 저장하기

다음과 같이 Settings > Actions에서 New repository secet 버튼을 누르고 비밀 KEY를 만들면 됩니다.
저는 위에 AWS CLI 권한 생성에서 부여받은 액세스 키와, 비밀 액세스 키 2개를 만들었습니다.

👉참고 링크

beygee: AWS S3에 React 프로젝트 배포하기[참고링크]

생활코딩: Githun - action[참고링크]

저작자표시

Contents

새소식

인기 검색어