React 배포 (AWS IAM, S3)

윤태현·2023년 10월 17일
3

AWS

목록 보기
2/7
post-thumbnail

만들어 놓은 미니 프로젝트로 진행 : 계란 요리 성격 유형 테스트 velog
최종 배포 사이트 : http://egg-mbti-s3.s3-website.ap-northeast-2.amazonaws.com/

사용 AWS 서비스

IAM (Identity and Access Management)

  • AWS 리소스에 대한 접근을 제한하여 보안 위협을 최소화

  • S3 버킷을 생성하면 기본적으로 해당 버킷과 그 안의 파일들은 아무도 접근할 수 없기에 특정 사용자나 서비스에게 해당 버킷이나 파일에 접근하도록 허용하려면 IAM을 통해 권한 부여

  • 필요한 최소한의 권한만 부여하여 리소스를 안전하게 관리

  • 특정 조건(시간, IP 주소 등)에 따른 접근 권한 설정이 가능

S3 (Amazon Simple Storage Service)

  • 인터넷용 스토리지 서비스

  • 데이터를 객체 형태로 저장하고 웹에서 전세계에 데이터를 보관하고 검색할 수 있는 스케일링 가능한 저장소를 제공

  • React 애플리케이션의 빌드 결과물은 일반적으로 정적 파일들입니다. S3는 이러한 정적 파일들을 호스팅하고 웹에 제공하는데 적합한 서비스


진행

1. IAM 사용자 생성

  • IAM에서 좌측의 사용자 탭 클릭
  • 사용자 생성 버튼 클릭

  • 사용자 이름 입력합니다.
  • 사용자에게 AWS Management Console에 대한 액세스 권한 제공 체크
  • IAM 사용자를 생성하고 싶음 체크
  • 자동 생성된 암호 체크
  • 사용자는 다음 로그인 시 새 암호를 생성해야 합니다. 체크

  • 권한 옵션에서 직접 정책 연결 클릭
  • 권한 정책에서 AmazonS3FullAccess 체크
  • 만약 이후에 CloudFront를 사용할 경우 CloudFrontFullAccess 체크

IAM 계정 로그인 시

  • 콘솔 로그인 URL 부분에서 signin 앞의 숫자가 계정 별칭이므로 알아야 함
  • 콘솔 암호도 알아야 되기 때문에 아래의 .csv 파일 다운로드 클릭
  • csv 파일에 사용자 이름, 암호, 콘솔 로그인 URL을 확인할 수 있음
  • 추후 AWS IAM 로그인 시에 계정 별칭, 사용자 이름, 암호를 입력하여 로그인 진행

IAM access key 생성

  • 액세스 키 만들기 클릭
  • 여기서는 로컬 코드로 진행
  • 맨 밑의 확인 체크 후 다음 클릭
  • 이후에 나오는 .csv 파일 다운로드 (배포 시에 알아야 하기 때문에 중요!!)

  • Command Line Interface(CLI) : AWS CLI 또는 AWS Tools for PowerShell을 사용하여 AWS 서비스에 명령 줄에서 액세스합니다. AWS CLI 또는 PowerShell을 사용하여 AWS 서비스를 관리하거나 조작할 예정인 경우
  • 로컬 코드 : 로컬 컴퓨터에서 실행되는 애플리케이션을 통해 AWS 서비스에 액세스합니다.
    개발 환경에서 애플리케이션 코드를 실행하여 AWS 서비스를 테스트하거나 사용할 경우
  • AWS 컴퓨팅 서비스에서 실행되는 애플리케이션 : EC2, Lambda, ECS와 같은 AWS의 컴퓨팅 서비스에서 실행되는 애플리케이션을 통해 AWS 서비스에 액세스합니다.
    AWS 컴퓨팅 서비스에서 호스팅되는 애플리케이션에 액세스 권한이 필요할 때
  • 서드 파티 서비스 : AWS 파트너 솔루션, 매니지드 서비스 등 서드파티 서비스를 사용하여 AWS 리소스에 액세스합니다.
    외부 서드파티 솔루션을 사용하여 AWS 리소스를 관리하거나 조작할 경우
  • AWS 외부에서 실행되는 애플리케이션 : AWS 인프라 외부에서 실행되는 애플리케이션(예: 온-프레미스 데이터 센터의 애플리케이션)을 통해 AWS 서비스에 액세스합니다.
    온-프레미스나 다른 클라우드 환경에서 실행되는 애플리케이션에서 AWS 서비스에 액세스할 경우
  • 기타 : 위에 언급된 사용 사례에 해당하지 않는 다른 시나리오에서 AWS 서비스에 액세스합니다.

S3 배포를 위해 IAM 계정을 생성했다면, 대게는 Command Line Interface(CLI)로컬 코드 사용 사례가 가장 관련성이 높습니다. 하지만 구체적인 배포 방식과 사용 사례에 따라 다를 수 있으니, 본인의 시나리오에 가장 잘 맞는 항목을 선택해주세요.


2. S3 버킷 생성

  • S3 항목에서 버킷 생성 클릭

  • 버킷 이름 입력
  • AWS 리전은 서울 ap-northeast-2로 선택
  • 객체 소유권에서 ACL 활성화됨 클릭
  • 버킷 소유자 선호 체크

  • 모든 퍼블릭 액세스 차단 체크 해제
  • 현재 설정으로 인해 이 버킷과~ 부분 체크

  • 버킷 버전 관리 비활성화 체크
  • Amazon S3 관리형 키(SSE-S3)를 사용한 서버 측 암호화 체크
  • 버킷 키 비활성화 체크

버킷 생성 후 S3 리스트에서 만든 버킷 클릭하여 상세 정보로 들어옴

  • 속성 탭 클릭
  • 맨 하단의 정적 웹 사이트 호스팅 편집 클릭

  • 활성화 체크
  • 정적 웹 사이트 호스팅 체크
  • 인덱스 문서, 오류 문서 부분에 index.html 입력
  • 변경 사항 저장 클릭

  • 권한 탭 클릭
  • 버킷 정책에서 편집 버튼 클릭

  • 버킷 ARN 복사
  • 정책 생성기 클릭

  • Select Type of Policy 부분에서 S3 Bucket Policy 선택
  • Effect 부분은 Allow 선택
  • Principal 부분은 * 로 설정 (모든 user)
  • Actions 부분은 GetObject 선택 (버킷 접근 권한)

  • ARN 부분에 아까 복사했던 버킷 ARN 입력 후 맨 뒤에 /*을 붙임
    ex) arn:aws:s3:::egg-mbti-s3/*
  • Add Statement 클릭
  • 확인 후 이상 없을 시에 Generate Policy 클릭

  • JSON 복사

  • 복사한 값 버킷 정책에 붙여넣기
  • 변경 사항 저장 클릭

버킷 정책 편집에서 맨 밑으로 내리면 CORS(Cross-origin 리소스 공유)도 편집해야 함

편집 버튼을 누르고 아래의 코드를 입력 후 저장

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2",
            "ETag"
        ],
        "MaxAgeSeconds": 3000
    }
]
  • 해당 코드는 어떻게 사용 하냐에 따라 바뀌기 때문에 수정해서 입력해도 됩니다.

3. S3 업로드

업로드는 2개의 방식이 있으므로 선택하여 진행하면 됨.

3-1. 파일 또는 폴더 업로드

  • 파일 또는 폴더를 직접적으로 업로드 하는 방법으로 객체 탭에서 업로드 버튼 클릭 후 파일 또는 폴더 추가 후 업로드 진행

3-2. AWS CLI 코드 업로드

https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html
위 공식 문서를 참고해 운영체제에 따라 CLI를 설치하고
이전에 IAM 사용자를 만들 때 저장했던 .csv 파일을 참고하여 진행한다.

AWS CLI 설치 완료 후 터미널에서 아래와 같이 입력

aws configure --profile [csv 파일 IAM 사용자 이름]

AWS Access Key ID : accessKeys.csv 파일에서 Access key ID 입력
AWS Secret Access Key : accessKeys.csv 파일에서 Secret access key 입력
Default region name : ap-northeast-2 입력
Default output format : JSON 입력

배포하고자 하는 React 디렉토리로 이동 후 아래와 같이 입력

aws s3 sync ./build s3://[S3 버킷 이름] --profile=[IAM 사용자 이름]

0개의 댓글