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

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

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

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

목차

  1. AWS ‘Route 53’ 호스팅 영역 생성 & Gabia DNS 변경
  2. AWS S3 버킷 생성 및 권한/속성 변경
  3. AWS ‘IAM’ 사용자 추가
  4. Git Action

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

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

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

    image-20221118055301132

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

  • 생성된 호스팅 click > ‘레코드 생성’

    image-20221118062727227

  • 호스팅 영역 세부 정보 내 ‘NS’ 유형의 값/트래픽 라우팅 대상 컬럼의 값을 Gabia DNS 서버로 설정

image-20221118062922524

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

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

    image-20221118062009601

  • 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