AWS S3 버킷생성, 도메인적용 https 배포 기록

Jes·2022년 10월 15일

AWS-S3-배포

목록 보기

1/1

Aws S3 버킷생성 -> 프로젝트연결 -> 도메인변경 -> Https 적용

AWS S3 배포하는 과정에서 많은 어려움을 겪었다. 어려움을 반복하지 않기를 바라며 핵심만 기록했고 꼭 써먹도록 하자
S3 , 가비아 에서 도메인 구매 ,Route 53 , CloudFornt , SSL

I AM 권한설정

AWS 계정 로그인후 IAM 대시보드로 접속한다.
IAM 리소스 의 사용자 숫자 를 클릭하여 사용자 섹션에 접속한다

사용자 추가 버튼을 클릭한 다음 이름, 엑세스키 체크후 다음버튼을 계속 눌러준다.

그럼 5번에서 키가 발급되는데 다음 버튼을 누르면 비밀키는 더이상 확인을 할수 없으니 파일을 다운받던지, 표시버튼을 눌러서 엑세스 ID, 비밀 키값을 잘 저장 혹은 기록해놓는다.

생성한 IAM 사용자 이름을 클릭, 권한추가 버튼 클릭, 기존 정책 직접 연결에서
CloudFrontFullAccess , AmazonS3FullAccess 를 검색하고 체크 한다음 다음 -> 권한 추가 버튼 까지 눌러준다.

이제 S3 버킷생성을 해야한다.

S3 버킷생성

AWS 로그인후 S3 검색, S3 대시보드에 접속한다. 사이드바 버킷 메뉴에서 버킷 만들기 버튼 클릭한다. 이름 작성 하고 다른 속성은 변경하지 않고 밑으로 쭉 내려서 버킷 만들기 버튼을 클릭후 버킷을 정상적으로 만들어준다.

생성한 버킷 파란색 글씨 이름을 클릭후 속성 탭의 가장 밑에 정적 웹 호스팅 섹션에서 편집 버튼을 눌러 정적웹 사이트 호스팅 활성화를 시켜준다.
밑으로 내려서 인덱스,오류 문서에 index.html 를 작성 후 변경사항 저장 버튼을 클릭한다.

아래와 같이 버킷 웹 사이트 엔드포인트가 생성되었다. 저 URL로 내가 만든 프로젝트를 배포하여 사용 가능하다.

프로젝트 AWS CLI와 Npm 으로 배포

AWS - CLI 방식으로 배포를 하기위해
https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html

Mac 방식

PC 버전에 맞게 설치 & 설명 지침대로 적용한다.
내 PC 터미널에서 aws configure --profile 사용자명 (IAM 에서 생성한 사용자명) 을 입력한다
위에서 부터 차례대로 입력한다. IAM 에서 발급받은 액세스 ID , 비밀 키 서울 지역인 ap-northeast-2 , json 순서 대로 입력후 엔터
VSCode package.json 으로 가서 deploy 를 추가해준다.
aws s3 sync ./docs s3://버킷이름 --profile=사용자이름

"scripts": {
    "start": "react-scripts-start",
    "build": "react-scripts-build",
    "test": "react-scripts-test",
    "deploy": "aws s3 sync ./docs s3://버킷이름 --profile=사용자이름"
  },

npm run deploy 를 하면 정상적으로 배포가 된다.