[Github] Github action, AWS S3, Gabia domain을 이용한 자동배포

November 17, 2022

11월 17일. 오늘의 배움~~(삽질)~~

오늘의 포스팅은 제가 성공한 방법에 대한 메모입니다. 비교적 자세한 설명이 부족할 수 있습니다. 😥

Gabia domain이 있고, AWS 계정이 있고, Github repo가 만들어져 있다는 걸 전제로 시작합니다.

이 방식은 AWS S3 정적 호스팅을 이용한 방식이며 http를 지원합니다. https 배포가 필요하다면 “AWS EC2 + ACM” 또는 “AWS Amplify”를 이용해야합니다.

1. AWS ‘Route 53’ 호스팅 영역 생성 & Gabia DNS 변경

AWS에서 외부 Domain을 사용하기 위해서는 AWS의 DNS 서비스인 ‘Route 53’에 등록이 필요하며, Route 53의 DNS서버를 Gabia DNS 서버를 대체하여 사용합니다.

AWS ‘Route 53’ > ‘호스팅 영역’ > ‘호스팅 영역 생성’

domain_name.dev는 사용할 Domain으로 변경

생성된 호스팅 click > ‘레코드 생성’
호스팅 영역 세부 정보 내 ‘NS’ 유형의 값/트래픽 라우팅 대상 컬럼의 값을 Gabia DNS 서버로 설정

2. AWS S3 버킷 생성 및 권한/속성 변경

AWS ‘S3’ > ‘버킷 만들기’ > 아래와 같이 설정 후 ‘버킷 만들기’

AWS ‘S3’ > 생성한 버킷 click > ‘권한’ > 버킷 정책 > 편집

{
    "Version": "2012-10-17",
    "Id": "Policy1668671586744",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::domain_name.dev/*"
        }
    ]
}

AWS ‘S3’ > 생성한 버킷 click > ‘속성’ > ‘정적 웹 사이트 호스팅 편집’ > 활성화

3. IAM 사용자 추가

이미 같은 설정으로 생성된 사용자가 있다면 생략해도 됩니다.

AWS ‘IAM’ > ‘사용자’ > ‘사용자 추가’
- AWS 자격 증명 유형 : ‘액세스 키 - 프로그래밍 방식 액세스’ 체크
- Permissions : ‘AmazonS3FullAccess’
추가 시 받을 수 있는 ‘액세스 키’, ‘비밀 액세스 키’ 메모

4. 드디어 Git Action

원격 repo > Actions > ‘set up a workflow yourself’

name: Node.js Package
  
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
  
jobs:
  deploy:
    runs-on: ubuntu-latest
    env: 
      CI: false
    steps:
      - uses: actions/checkout@v3
  
      - name: Install dependencies
        run: yarn
  
      - name: Build
        run: yarn build
        
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: $			# AWS 사용자 ACCESS KEY
          aws-secret-access-key: $	# AWS 사용자 SECRET ACCESS KEY
          aws-region: ap-southeast-2
  
      - name: Deploy static site to S3 bucket
        run: aws s3 sync ./build s3://$ --delete	# AWS BUCKET NAME

.yml 파일의 작성 방식 설명은 생략하겠습니다.

위 예제에서 사용된 action secret key 는 Git repo > Settings > Secrets 에서 등록할 수 있습니다!

📌 출처

https://eundol1113.tistory.com/210
https://medium.com/marlinelee2/react-amazon-s3%EB%A1%9C-%ED%98%B8%EC%8A%A4%ED%8C%85-417aa93cf469
https://hannut91.github.io/blogs/route53/gabia
https://grasinnong-developer.tistory.com/88
https://velog.io/@cptkuk91/AWS-S3Route53-%ED%98%B8%EC%8A%A4%ED%8C%85-%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%97%B0%EA%B2%B0
https://react-etc.vlpt.us/08.deploy-s3.html
https://blog.naver.com/ipzzinn/222925361366
https://satisfactoryplace.tistory.com/361
https://doqtqu.tistory.com/331

Rose