Next(React) 로 만든 프로젝트를 AWS의 s3 로 배포하는 방법 및 순서를 정리한다.
순서
- AWS 에 로그인 후 IAM 로 이동
- 액세스 관리 - 사용자 -
사용자 추가
- 사용자 이름 생성 및
액세스 키
선택 후다음
기존 정책 직접 연결
에서AmazonS3FullAccess
선택 후다음
- 사용자 추가 후 생성된
new_user~~~.csv
다운 받고 개인적으로 안전한 곳에 저장
사용자 추가
액세스 키
선택 후 다음
기존 정책 직접 연결
에서 AmazonS3FullAccess
선택 후 다음
new_user~~~.csv
다운 받고 개인적으로 안전한 곳에 저장순서
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 >> 한국 지역 이름을 뜻함
다 기본으로 설정되어있는 값으로 Continue
했다
$ which aws
로 설치 확인aws configure --profile 생성할profile이름
로 profile 생성AWS Access Key ID
, AWS Secret Access Key
, Default region name
, Default output format
설정
순서
- AWS s3 에 이동 후
버킷 만들기
- 생성할 버킷 이름 (대문자 X, "_" X), AWS Resion 입력 및 선택 후 생성
- 버킷 - 내가 생성한 버킷 - 속성 탭에서 아래
정적 웹 사이트 호스팅 편집
- 설정 및 저장
정적 웹 사이트 호스팅 -활성화
호스팅 유형 -정적 웹 사이트 호스팅
인덱스 문서 -index.html
오류 문서 -index.html
버킷 만들기
버킷이름은 대문자, "" 사용 불가, 고유명으로 사용
이미지에 버킷 이름은 잘못된 예시 (D, T, , G >> 대문자, "_")
속성 탭에서 아래 정적 웹 사이트 호스팅 편집
정적 웹 사이트 호스팅 - 활성화
호스팅 유형 - 정적 웹 사이트 호스팅
인덱스 문서 - index.html
오류 문서 - index.html
여기까지 완료 후 정적 웹 사이트 호스팅
에서 생성된 버킷 웹 사이트 엔드포인트
에 접속하면 403 Forbidden
이 띄워지는데 정상이다.
마지막으로 버킷 권한을 수정(편집)하면 된다.
순서
- 생성한 버킷(S3) 에
권한
탭에서퍼블릭 액세스 차단(버킷 설정)
-편집
- 우선은 모든 퍼블릭 액세스 차단 해체
버킷 정책
-편집
- 정책 생성기 입력 및 선택 후 -
Add Statement
Select Type of Policy -S3 Bucket Policy
Effect -Allow
Principal -*
Actions -GetObject
Amazon Resource Name (ARN) - arn:aws:s3:::{KeyName}- 생성된 정책 저장
권한
탭에서 퍼블릭 액세스 차단(버킷 설정)
- 편집
버킷 정책
- 편집
Add Statement
Select Type of Policy - S3 Bucket Policy
Effect - Allow
Principal - *
Actions - GetObject
Amazon Resource Name (ARN) - arn:aws:s3:::{KeyName}
이제 버킷 웹 사이트 엔드포인트에 접속 시 보여줄 프로젝트(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 파일) 보인다.