5주차 - S3 버킷 설정하기, 도메인 연결하기
본문 바로가기
항해 중/4주차 리액트 숙련반

5주차 - S3 버킷 설정하기, 도메인 연결하기

by 은돌1113 2021. 11. 25.

1. AWS S3 버킷

 

- S3 버킷이란?

더보기

S3(Simple Storage Service)는 단순 스토리지 서비스예요!

이미지나 파일을 저장할 수 있습니다.

html, css, js 같은 정적 자원을 올리고, 정적 웹 사이트를 호스팅 할 수도 있어요.

우리가 컴퓨터에 폴더 만드는 것처럼 버킷을 만들고 사용할 수 있어요!

 

- 정적 웹 사이트란?

더보기

웹 사이트는 서버 측 스크립트 사용 유무를 기준으로 동적 웹 사이트와 정적 웹 사이트로 나눠볼 수 있어요.

(서버 측 스크립트는 PHP, JSP, ASP같은 친구들을 말해요!)

정적 웹 사이트는 html, js, css같이 정적 자원으로만 이루어진 웹 사이트입니다. 🙂


2. S3 버킷 설정하기

 

- S3 정적 웹 사이트 호스팅 방법

https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/WebsiteHosting.html

 

Amazon S3를 사용하여 정적 웹 사이트 호스팅 - Amazon Simple Storage Service

AWS Amplify 콘솔을 사용하여 단일 페이지 웹 앱을 호스팅할 수 있습니다. AWS Amplify 콘솔은 단일 페이지 앱 프레임워크(예: React JS, Vue JS, Angular JS 및 Nuxt)와 정적 사이트 생성기(예: Gatsby JS, React-static,

docs.aws.amazon.com

 

(1) 버킷을 생성한다. (사이트 도메인과 버킷 이름은 같아야 합니다.)

 

(2) 권한 탭으로 들어갑니다.

 

(3) 상단 ARN([ARN: arn:aws:s3:::[도메인 주소]])를 복사해서 아래의 정책 생성기를 누른다.

 

(4) 정책을 생성한다.

 

(5) 생성한 정책(json)을 복사해서 붙여 넣는다. (주의!! ARN 뒤에 꼭 /* 써주기)


3. S3 버킷에 내 결과물 올리기

 

(1) 빌드하기

yarn build

(2) 결과물 올리기 -> 버킷에 build 폴더 내 파일을 올린다.

(3) 정적 웹 사이트 호스팅 설정하기

(4) 확인하기 -> 앤드포인트 주소를 클릭 해 내 사이트에 들어갑니다!


4. 도메인 열결하기

 

(1) 내 도메인 연결하기 -> route 53에서 호스팅 영역을 생성한다

(2) 네임서버를 가비아에 등록한다. (혹은 도메인을 산 곳에서 등록한다.)

(3) 레코드를 생성한다.

(4) 확인하기

반응형

댓글