[Git] AWS+Github Action으로 React 자동 배포하기(with yarn-berry)

1. aws 계정 생성

2. aws 버킷 생성

  1. 버킷 이름 작성 및 aws region 선택

  2. 객체 소유권 - ACL 비활성화됨 선택

  3. 퍼블릭 액세스 차단 해제

• 추후 CloudFront&s3 를 통한 https 적용 시에 퍼블릭 액세스 차단 예정

  4. 버킷 생성

3. 버킷 정책 편집

  1. 버킷 → 권한 → 버킷 정책 → 편집 → 버킷 ARN 복사

  2. 정책 생성기에서 정책 생성

• Principal : * 기입
• Actions : GetObject 추가
• ARN : 위에서 복사한 ARN뒤에 ‘/*’를 포함하여 기입
• 활성화 된 Add Statement 버튼 클릭

  3. Generate Policy 버튼 클릭

  4. 생성된 policy json document 복사

  5. 정책 편집으로 돌아가기 → 정책에 복사한 json 붙여넣기 → 변경 사항 저장

  6. 버킷→권한 으로 돌아와 새로고침 하면 액세스가 퍼블릭으로 변경 되어있다.

4. end point url 받기

• 버킷 → 속성 → 정적 웹 사이트 호스팅 → 편집
• 아래와 같이 입력 후 변경 사항 저장

버킷 → 속성 → 정적 웹 사이트 호스팅 으로 돌아오면 아래와 같이 end point url 을 발급받을 수 있다.

5. secret key 발급

 IAM → 사용자 → 사용자 추가

 

 1. 이름 입력

  2. 권한 설정

• 권한 옵션 : 직접 정책 연결
• 권한 정책 : AmazonS3FullAccess , AWSCodeDeployFullAccess 추가

  3. 다음 버튼 클릭 → 사용자 추가 버튼 클릭

  4. 생성한 사용자 → 보안 자격 증명 → 액세스 키 → 액세스 키 만들기

• 다음 버튼을 클릭하면 access key, secret access key를 발급 받을 수 있다.

6. github action workflow 생성

  1. repository → Actions → set up a workflow yourself

  2. workflow 작성

// name은 원하는대로 작성
name: Frontend Deploy

// 감지할 event : push, pull request
// develop에 push가 발생하므로 branch를 master가 아닌 develop으로 설정
on:
  push:
    branches: 
      - develop
    paths:
      - 'front/**'
  pull_request:
    branches: 
      - develop
    paths:
      - 'front/**'
      - .github/workflows/deploy.yml
   
// root folder가 ./가 아닌 ./front 
// root가 ./ 라면 하단의 working-directory 모두 생략 가능
env:
  working-directory: ./front
  
jobs:
  build:
  // 작업이 수행될 환경 : 최신 우분투 서버
    runs-on: ubuntu-latest
      
    steps:
      - name: Checkout source code
        uses: actions/checkout@v3
        
      - name: Set up Node
        uses: actions/setup-node@v2
        with:
          node-version: 16.x

      - name: Install dependencies
        run: yarn install --immutable
        working-directory: ${{ env.working-directory }}

      - name: Run build
        run: yarn run build
        working-directory: ${{ env.working-directory }}
        
      - name: Configure AWS credentials
        uses: aws-action/configure-aws-credentials@v1
		// key와 secret key settings에서 추가
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} 
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} 
          aws-region: ap-northeast-2
          
      - name: Upload to S3
        run: aws s3 cp --recursive --region ap-northeast-2 build
            s3://pick-place
        working-directory: ${{ env.working-directory }}

  settings → Security → Secrets And Variables → Actions → New Repository Secret

• 위 경로에서 발급받은 access key, secret access key 를 아래와 같이 설정
  • AWS_ACCESS_KEY_ID : 액세스 키
  • AWS_SECRET_ACCESS_KEY : 비밀 액세스 키

  3. start commit 버튼 클릭 → 완료

 

참고

https://velog.io/@yevini118/SpringBoot-React-3.-GithubActions-workflow-%EC%83%9D%EC%84%B1

https://emoney96.tistory.com/411

https://www.daleseo.com/github-actions-first-workflow/

https://meetup.nhncloud.com/posts/286