AWS S3 로 Next(React) 배포

leephoter·2022년 10월 5일
0

Next(React) 로 만든 프로젝트를 AWS의 s3 로 배포하는 방법 및 순서를 정리한다.

IAM 생성

순서

  1. AWS 에 로그인 후 IAM 로 이동
  2. 액세스 관리 - 사용자 - 사용자 추가
  3. 사용자 이름 생성 및 액세스 키 선택 후 다음
  4. 기존 정책 직접 연결 에서 AmazonS3FullAccess 선택 후 다음
  5. 사용자 추가 후 생성된 new_user~~~.csv 다운 받고 개인적으로 안전한 곳에 저장

1. AWS 에 로그인 후 IAM 로 이동

2. 액세스 관리 - 사용자 - 사용자 추가

3. 사용자 이름 생성 및 액세스 키 선택 후 다음

4. 기존 정책 직접 연결 에서 AmazonS3FullAccess 선택 후 다음

5. 사용자 추가 후 생성된 new_user~~~.csv 다운 받고 개인적으로 안전한 곳에 저장

AWS CLI 설치

순서

https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/cli-chap-getting-started.html 에서 설치/업데이트 항목을 참고하여 본인 운영체제에 맞게 설치
1. 운영체제에 맞는 AWS CLI 설치
2. Terminal 에서 $ which aws 로 설치 확인
3. aws configure --profile 생성할profile이름 로 profile 생성
4. AWS Access Key ID, AWS Secret Access Key, Default region name, Default output format 설정
-> IAM 생성 후 안전하게 저장해 둔 .csv 파일에 있는 Access Key ID, Secret Access Key, ap-northeast-2, json 을 입력
ap-northeast-2 >> 한국 지역 이름을 뜻함

1. 운영체제에 맞는 AWS CLI 설치



다 기본으로 설정되어있는 값으로 Continue 했다

2. Terminal 에서 $ which aws 로 설치 확인

3, 4. aws configure --profile 생성할profile이름 로 profile 생성

AWS Access Key ID, AWS Secret Access Key, Default region name, Default output format 설정

S3 버킷 생성

순서

  1. AWS s3 에 이동 후 버킷 만들기
  2. 생성할 버킷 이름 (대문자 X, "_" X), AWS Resion 입력 및 선택 후 생성
  3. 버킷 - 내가 생성한 버킷 - 속성 탭에서 아래 정적 웹 사이트 호스팅 편집
  4. 설정 및 저장
    정적 웹 사이트 호스팅 - 활성화
    호스팅 유형 - 정적 웹 사이트 호스팅
    인덱스 문서 - index.html
    오류 문서 - index.html

1. AWS s3 에 이동 후 버킷 만들기

2. 생성할 버킷 이름 AWS Resion 입력 및 선택 후 생성

버킷이름은 대문자, "" 사용 불가, 고유명으로 사용

이미지에 버킷 이름은 잘못된 예시 (D, T,
, G >> 대문자, "_")

3. 버킷 - 내가 생성한 버킷 -

속성 탭에서 아래 정적 웹 사이트 호스팅 편집

4. 설정 및 저장

정적 웹 사이트 호스팅 - 활성화
호스팅 유형 - 정적 웹 사이트 호스팅
인덱스 문서 - index.html
오류 문서 - index.html

여기까지 완료 후 정적 웹 사이트 호스팅 에서 생성된 버킷 웹 사이트 엔드포인트 에 접속하면 403 Forbidden 이 띄워지는데 정상이다.

버킷 수정

마지막으로 버킷 권한을 수정(편집)하면 된다.

순서

  1. 생성한 버킷(S3) 에 권한 탭에서 퍼블릭 액세스 차단(버킷 설정) - 편집
  2. 우선은 모든 퍼블릭 액세스 차단 해체
  3. 버킷 정책 - 편집
  4. 정책 생성기 입력 및 선택 후 - Add Statement
    Select Type of Policy - S3 Bucket Policy
    Effect - Allow
    Principal - *
    Actions - GetObject
    Amazon Resource Name (ARN) - arn:aws:s3:::BucketName/{BucketName}/{KeyName}
  5. 생성된 정책 저장

1. 생성한 버킷(S3) 에 권한 탭에서 퍼블릭 액세스 차단(버킷 설정) - 편집

2. 우선은 모든 퍼블릭 액세스 차단 해체

3. 버킷 정책 - 편집

4. 정책 생성기 입력 및 선택 후 - Add Statement

Select Type of Policy - S3 Bucket Policy
Effect - Allow
Principal - *
Actions - GetObject
Amazon Resource Name (ARN) - arn:aws:s3:::BucketName/{BucketName}/{KeyName}

5. 생성된 정책 저장

이제 버킷 웹 사이트 엔드포인트에 접속 시 보여줄 프로젝트(HTML 파일)을 적용하면 끝

프로젝트 호스팅

순서
1. 프로젝트 생성 - yarn create next-app 프로젝트명 --typescript
yarn, TS, 를 이용하여 Next 프로젝트 생성
2. package.json 에서 scripts - build 수정
"build": "next build && next export"
3. deploy 추가
"deploy": aws s3 sync ./out s3://${{생성한 버킷 이름}} --profile=s3-Deploy-Tutorial

./out 은 build 후 bundle 이 담기는 폴더를 가리킨다.
React 의 경우 build 시 bundle 파일이 build 폴더에 생성되면
"deploy": aws s3 sync ./out s3://${{생성한 버킷 이름}} --profile=s3-Deploy-Tutorial
로 추가하면 된다

$ yarn build
$ yarn deploy
후 버킷 웹 사이트 엔드포인트에 접속하면 생성한 프로젝트 (build 된 Next html 파일) 보인다.

1, 2, 3

버킷 웹 사이트 엔드포인트 접속

profile
🔥 🧑🏾‍💻 🔥

0개의 댓글