13. CloundFront - (1)

1. S3는 파일 저장 서비스 아닌가??

파일 저장 외에도 부가적인 기능을 갖고 있는데 그중 하나가 "정적 웹 사이트 호스팅" 기능이 이다.
즉 웹 서비스를 다른 사용자들도 쓸 수 있게 인터넷에 배포

 

2. CloudFront란? 

컨텐츠(파일,동영상 등)를 빠르게 전송해주는 서비스. CDN이라 부르기도한다
이미지에 오리진서버(S3) 멀리 있는 유저한테는 데이터 전송하는데 시간이 오래 걸릴테다.

그래서 CloudFront 적용후 보면 곳곳에 컨텐츠 복사본을 저장해둘수 있는 저장소인 CDN이 있어서 유저는 빠르게 받을 수 있다(그러나 제일 최초로 받는 유저는 느릴듯)

 

3. CloudFront사용이유? 

S3만 사용해도 웹 서비스 배포 가능이나 컨텐츠 전송 받는 성능 향상시키기 위해 사용하고,HTTPS를 적용 하기 위해서다.

S3에서는 HTTPS적용시키는 기능 제공x,이외에도 보안을 한층 강화할 수 있다

웹서비스 배포할때 S3,CloudFront도 많이 사용하나 Netlify,Vercel,Cloudflare등 서비스도 사용하기도 한다

cloudFrond 아키텍처

 

4. S3에 업로드/ 웹 호스팅 설정

웹 호스팅이란? 웹 사이트를 인터넷에 게시할 수 있도록 서버 공간을 제공하는 서비스. 쉽게 말해, 웹 사이트의 파일(HTML, CSS, 이미지 등)을 인터넷에서 누구나 접근할 수 있도록 특정 서버에 저장하고 관리해 주는 서비스이다.

 

(1) S3 이전에 했듯이 버킷 생성하고 셋팅 

(2) 해당 버킷 클릭후 들어가고 업로드할 파일을 드래그해서 넣거거나,업로드 클릭후 파일 추가하고 업로드 클릭

 

(3) 그러면 이렇게 잘 업로드 됬고 클릭후 들어가서 객체 URL 들어가보면 잘 나온다.

 

(4) 이제 정적 웹 사이트 호스팅 셋팅을 해본다

(5) 해당 버킷 들어가서 - 속성 - 정적 웹 사이트 호스팅 편집 클릭

 

(6) 이미지대로로 선택하고 올린 파일명 적어주고 - 변경사항 저장 

 

(7) 정적 웹사이트 호스팅 보면 저런게 생겼는데 들어가보면 잘 뜬다. 즉 배포를 성공

객체URL,정적 웹 사이트 호스팅 URL 차이

5. React 프로젝트를 S3에 업로드하는 방법

참고 블로그1

참고 블로그2