AWS 프론트엔드 셋팅하기

#코멘토 #코멘토실무PT #실무PT후기 #실무강의 #리액트강의 #웹프로그래밍 #react #웹개발실무

필수 링크
https://bit.ly/3D9XCOz

들어가기 전에

프로젝트를 하게되면 배포 작업을 하기위해 AWS를 사용하게 된다 매번 급급하게 프로젝트를 마무리 하고 aws를 어떻게 사용하였는지에 대해 블로깅한 적이 없었다 요번 코멘토 실무 강의를 통해 한번 정리를 해보려고 한다.

AWS 프론트엔드 셋팅하기

1. s3 static Page 용으로 생성
2. IAM 으로 권한 설정 => 액세스 키ID와 비밀 엑세스 키 발급
3. Github Actions 통해서 s3 CI/CD 배포 자동화
4. Cloudfront 셋팅

AWS 프론트엔드 아키텍처

1. s3 static Page 용으로 생성

• s3 : 원래 확장성, 데이터 가용성, 보안 및 성능을 제공하는 객체 스토리지 서비스
• s3을 사용하여 정적 웹 사이트를 호스팅할 수 있다
  • 정적 웹 사이트에서 개별 웹 페이지는 정적 콘텐츠를 포함한다
  • 클라이언트 측 스크립트를 포함할 수도 있다

1. 회원가입 후

2. s3 버킷 만들기
   

3. 버킷에 정보 체크
   1) 버킷이름 : 깃헙repo 이름과 같은 이름으로!!(그래야 헷갈리지않는다)
   2) AWS 리전 : 아시아 태평양(서울) => 다른 곳도 상관은 없지만 그래도! 서울에서!
   3) 이 버킷의 퍼플릭 액세스 차단 설정(활성화/비활성화) : public 과 private으로 할 것인가? (다른사람도 보이게 할껀지 또는 본인만 볼껀지)
   4) 버킷 만들기 완성!
   
   

4. 생성된 버킷에 속성탭 클릭 => 정적 웹 사이트 호스팅 편집
   

5. 권한탭 => 버킷 정책 편집

• 버킷 정책 JSON파일

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::버킷 이름/*"
        }
    ]
}

2. IAM 으로 권한 설정 => 액세스 키ID와 비밀 엑세스 키 발급

• aws_access_key_id
• aws_secret_access_key

1. 사용자 탭 => 사용자 추가하기
   

2. 사용자 이름과 액세스 유형 선택
   

3. 권한 설정
   

4. 태그 단계와 검토 단계는 수정할 것이 없으니 다음 단계로

5. 완료

• 액세스 키
• 비밀 액세스 키
  => 따로 저장 해야된다!
  

3. Github Actions 통해서 s3 CI/CD 배포 자동화

• .yml 파일 추가

name: Deploy To S3

on:
  push:
    branches: [ master ]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: checkout v2
        uses: actions/checkout@v2

      - name: Install Dependence
        run: yarn install

      - name: Build app
        run: yarn build
        env:
          REACT_APP_SERVER_URL: ${{ secrets.SERVER_URL }}

      - name: Deploy To s3
        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://cc-client-react

=> 정상적으로 배포가 되었다면 버킷에 build된 파일이 업로드 되어야한다!

4. Cloudfront 셋팅

• AWS에서 제공하는 CDN(Content Delivery Network) 서비스
  • 캐싱을 통해 사용자에게 좀 더 빠른 전송 속도를 제공함을 목적으로 함
  • CloudFront는 전 세계 이곳저곳에 Edge Server(Location)을 두고 Client에 가장 가까운 Edge Server를 찾아 Latency를 최소화 시켜 빠른 데이터를 제공
  • SSL 인증서도 생성해야 한다.