FrontEnd/React

[React] 리액트로 사이트 제작하기_1 (AWS S3, Cloudfront, Route53)

namhj 2022. 2. 27. 01:23
반응형

사이트 제작하기

최근 프로젝트를 진행하면서 주로 사용하고 있는 기술들을 리마인드 해보기

위해서 간단한 포트폴리오 웹 사이트를 제작 해보려고 합니다.

사용하는 기술

배포 및 호스팅 = S3(Repository / Static Host), Cloud front(CDN), Route53(DNS)

버전관리 = github

배포자동화 = CICD pipeline

FrontEnd = Next.js + Typescript + ReduxToolkit

 

STEP 1) AWS S3 셋업

 

-S3는 스토리지 서비스이고 이 곳에 정적 배포 파일을 올리고, 정적 호스팅 기능으로 호스팅 해보도록 하겠다.

AWS 가입해서 대시보드에서 s3라고 검색하고 들어가기

버킷 만들기를 클릭

 

버킷 이름 지정, 리전 선택후 생성하면 아래처럼 리스트에 추가되는것 확인

 

생성된 버킷에 테스트할 index.html파일 업로드(드래그앤 드랍도 가능)

 

방금 업로드한 index.html에서 객체 url을 클릭하면 아래처럼 나온다

 

웹에 공개하기 위해서 정적 웹사이트 호스팅 설정을 해주기

속성 탭으로 들어가서

 

가장 하단 쪽에 있는 정적 웹사이트 호스팅 편집

 

활성화 하고 index페이지와 에러시 출력할 페이지 이름을 적어준다(404로 만들예정이라 404.html로 했다)

 

권한탭에서 권한 편집을 해준다. 퍼블릭 액세스 차단을 비활성으로 변경

버킷 정책 설정에 들어가서

 

아래와 같이 정책을 추가해준다.

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "PublicS3GetObject",
			"Effect": "Allow",
			"Principal": "*",
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::{yourBucketName}/*"
		}
	]
}

그리고 다시 속성탭으로 돌아거서 엔드포인트 주소를 입력하면 

 

index.html의 내용이 잘 출력 되면 성공

STEP 2) AWS Cloud Front 셋업

 

AWS 가입해서 대시보드에서 s3라고 검색하고 들어가기

- Cloud Front 를 사용해서 간단하게 CDN(Content Delivery Network) 설정을 할 수 있다.

- CDN은 지리적으로 분산되어 있는 여러 서버에 정적 콘텐츠(html,css,js,이미지 같은 것들)을 사용자와 가까운 서버에 캐싱

해두어서 콘텐츠에 빠르게 액세스 할 수 있기 때문에 필수적으로 사용하고 있는 기술.

 

클라우드 프론트를 AWS대시보드에서 검색

 

대시보드 > 배포 > 배포생성

 

원본 도메인에 s3에서 호스팅 설정한 엔드포인트 주소를 연결해주고 기본 셋업으로 두고 생성

 

생성된 배포에 들어가서 일반 > 설정

기본 루트 객체를 index.html로 설정해준다

 

생성된 배포에 들어가서 원본 > 편집

OAI를 생성, 추가해주고 버킷정책 업데이트에 체크해서 저장

 

다시 s3 버켓으로 가서 > 권한 탭에서 객체 소유권에서 ACL활성화, 객체소유권 > 객체 라이터로 변경

 

클라우드 프론트에서 상태는 활성화, 마지막 수정이 배포(...) 에서 날짜로 변경되면

도메인 이름으로 들어가서 확인 해본다.

STEP 3) AWS Route53 셋업

구매 또는 무료로 받은 도메인을 등록하고 Cloud front에 연결 해보는 작업을 해보겠다.

Route53으로 들어간다

호스팅 영역을 생성 > 도메인 이름에 구매한 도메인 이름을 입력해준다. 퍼블릭 호스팅 영역으로 설정하고 생성

 

그럼 요런 레코드가 등록이 된다 값/트래픽 라우팅 대상에 있는 네임서버들을 복사해서

 

도메인을 가지고 있는 사이트에 가서 Route53의 네임서버로 바꿔준다

 

다시 호스팅 영역으로 들어가서 레코드를 하나 생성해준다

레코드 이름 앞에는 원하는 시작 도메인(나는 톱페이지를 먼저 생성할거라서 www로 했다)

값에는 클라우드 프론트에서 생성 해준 도메인이름을 입력한다

 

이제 클라우드 프론트로 넘어가서 배포에서 설정으로 들어간다

대체 도메인 이름에 사용할 도메인 이름을 넣어주고 아랫쪽에 인증서 요청 메뉴로 들어간다

 

그럼 AWS Certificate Manager로 넘어오는데 퍼블릭 인증서 요청을 선택하고 다음

 

도메인 이름에 자신의 도메인 이름을 입력하고 => example.com

DNS검증을 누르고 요청을 클릭

 

그럼 인증서가 생기고, 검증대기중 상태일텐데 Route53에서 네임서버 생성, 등록을 다 했기 때문에 

도메인 에서 Route53에서 레코드 생성을 눌러 진행한다 레코드 생성을 진행하면 발급이 완료 된다.

 

다시 클라우드 프론트로 돌아와서 등록되어 있는 SSL인증서를 추가해준다

설정을 저장하고 배포가 완료되면

등록한 도메인으로 접속하면 index.html이 잘 표시 되는 것을 확인 할 수 있다!

 

이까지 하면 셋업 완료! 이제 배포 작업 때까지 사용하지 않으므로 클라우드 프론트는 비활성화로 설정을 바꿔둔다.

 

이렇게 AWS로 호스팅하는 작업은 끝났고,

간단하게 페이지 디자인을 진행하고, 넥스트.js를 셋업해보도록 하겠다.

반응형