AWS를 이용하여 클라이언트 배포 및 HTTPS 인증 받기 (1)
AWS를 이용하여 배포하기는 여러 절로 구성되어 있습니다.
해당글은 직접 경험을 바탕으로 정리한 것을 공유하는 글입니다.
혹시 잘못된 정보거나 부족한 정보에 대해 피드백을 주신다면 감사하겠습니다.
오늘은 AWS를 이용하여 배포하고 HTTPS 인증을 받는 과정을 써보려고 한다. 그동안 과금 문제로 닫아두었던 프로젝트 파일들을 이용할 예정이다.
몇 천원도 안되는 가격이지만 백수에게는 그마저 부담스럽다…
무튼 클라이언트와 서버가 미리 준비되어 있기 때문에 배포에 관련해서만 다룰 것이다.
AWS를 이용하지 않고 다른 무료 플랫폼을 찾아 무료로 배포해보려고 했지만
정적인 웹이 아닌 동적인 웹페이지를 완전 무료로 배포하는데는 한계가 있는것 같다.
그래서 AWS로 배포하는 방법을 복습할겸
NOTION에 정리했던 문서를 블로깅할겸 작성해 나가겠다.
1. Freenom을 이용하여 DNS를 무료로 설정
Freenom을 이용하는데 앞서 간단하게 DNS에 대해서 알아보도록 하겠다.
DNS(Domain Name System)란
IP주소(예: 192.0.2.44)를 사람이 읽기 쉬운 어떤 문자로 변환하는 것을 말한다
우리는 평소에 DNS를 이용하기 때문에 숫자로된
IP주소가 아닌 문자들로 구성된 주소로 원하는 페이지에 이동이 가능한 것이다.
이제 Freenom으로 이동하여 진행해 보자.
Freenom
해당 페이지로 이동하여 회원가입 후 Register a new domain 클릭
아래 빨간네모에 원하는 주소명을 입력하면 이용가능한 최상위 도메인이 나온다.
원하는 도메인을 선택 후 가장 아래 Checkout 버튼을 눌러주자
Freenom은 최고 1년까지 무료로 DNS를 이용할 수 있다.
추가로 이용하고 싶다면 1년마다 갱신을 해줘야 한다.
하지만 무료이다 보니 DNS 유지에 대해서 말이 많다.
좋은 단어로 구성된 DNS명 경우 하루아침에 빼앗아 가는 경우도 있다고 하니
부담 없는 프로젝트에서 이용하길 바란다.
어쨋든 우리는Period에서 무료로 가장 길게 이용할 수 있는 12달을 선택하여주자.
continue를 누르고 다시 확인 버튼을 누르면 생성이 완료된다.
Services에 있는 My domains에 내가 선택한 DNS가 들어왔는지 확인해보자.
2. AWS S3에 클라이언트를 업로드
AWS는 회원가입시 12개월 동안 프리티어 모드로 이용이 가능하다. 단 회원가입시 신용카드가 필요하니 미리 준비해야한다. 그리고 처음에는 몰랐지만 프리티어라고 해서 완전 무료가 아니다. 어느 할당량 이상으로 사용하게 되면 자동으로 요금이 결제가 된다.
요금 설명에 있는 프리티어 한계양을 보면 적은양이 아닌데 프로젝트때 4명이서 이용했는데 몇 천원정도 요금이 청구 되었었다. 정확한 계산법은 잘모르겠다…
어쨋든 소액의 결제는 될수도있으니 너무 놀라지 말자!
자세한건 결제탭 청구서에서 확인이 가능하며 알림 설정도 가능하다!
그럼 S3에 대해서 간략하게 알아보겠다.
Amazon S3(Amazon Simple Storage Service)란?
인터넷
스토리지서비스이다. 용량에 관계 없이 파일을 저장 가능하고웹(HTTP 프로토콜)에서 파일로 접근 가능하다. S3자체로도 블로그나 포트폴리오 페이지 같은정적 웹서비스가 가능하다.동적 웹페이지와 정적 웹페이지가 섞여 있을때
동적 웹페이지는 EC2로정적 웹페이지는 S3로 이용하면 성능과 비용을 모두 효율적으로 할 수 있다.EC2와 EBS로 구축하는것 보다 비용이 저렴하다.
S3는 스토리지 서비스이다.
이 글을 쓰면서 스토리지와 DB의 차이가 궁금하여 찾아보았다.
스토리지란
컴퓨터에 데이터를 저장하는 저장소의 역할을 수행 즉 파일이 담긴다
DB란?
통합하여 관리되는 데이터의 집합체를 의미 중복된 데이터를 없애고, 자료를 구조화하여, 효율적인 처리를 할 수 있다 그래서 여러 업무에 여러 사용자가 데이터 베이스를 이용 가능하다
스토리지와 DB 차이
스토리지는 파일 형태라면 무엇이든 담을 수 있지만 DB에 파일을 담기 위해서는 어떤 가공을 통해 담아야 한다
예를 들어 게시판에 글을 작성하면 DB에 저장되지만 첨부한 업로드는 스토리지에 담긴다
이제 본격적으로 S3세팅 과정을 진행해보도록 하겠다.
AWS콘솔에서 S3에 접속하면 버킷이라는 항목이 나오는데 우린 여기서 버킷만들기 버튼을 눌러주자버킷의 이름은 고유해야하기 때문에 중복되지 않을 고유한 이름으로 작성하고
외부에서 접속이 가능하게 해야하기 때문에 퍼블릭 엑세스 차단을 해제하고 진행하도록 하자
이제 버킷이 생성되었을 것이다.
미리 준비한 클라이언트 빌드 파일들을 버킷으로 업로드해 사용할 예정이기 때문에 해당 버킷으로 접속하여 속성탭에 있는 정적 웹 사이트 호스팅을 편집해주자
이제 권한탭으로 이동하여 버킷 정책에 편집 버튼을 눌러 나오는 화면에서
정책 생성기버튼을 클릭하여 다음 작업을 이어간다
아래 사진에서 Actions에서는 GetObject를 선택하였다.
Amazon Reasource Name은 해당 input아래 예제가 적혀있으니 참고하여 적길바란다
모든 작업이 완료 되었다면 Add Statement 버튼을 클릭하여 Generate Policy로 정책을 생성해 준다. 이후 나온 정책을 복사하여 버킷 정책 편집 페이지에 붙여넣고 저장해주자
이제 클라이언트 build 폴더의 내용을 업로드 한다
build폴더를 업로드할때 파일들이버킷최상위로 업로드 해야한다예를 들어
버킷에build라는 폴더 안에 파일들이 존재한다면 버킷엔드포인트에서 정상적으로 웹페이지가 출력되지 않을 것이다.
3. CloudFront 설정
S3에서 제공해주는 엔드포인트로도 배포가 가능하지만 CloudFront를 이용하는 이유는 다음과 같다
- HTTPS 배포
- 엣지 로케이션을 이용한 더 빠른 속도
- S3 직접 공유보다 저렴한 비용
안타깝게도 S3에서 제공하는 주소는 HTTPS가아닌 HTTP주소라 보안에 취약하다.
하지만 CloudFront를 이용하면 HTTPS로 쉽게 배포할수 있게 도와준다.
그리고 S3를 이용해 직접 배포하는 경우 S3 버킷으로 설정한 지역의 저장소로만 전세계 사용자가 요청을 보내 먼 곳에서 요청이 올수록 속도가 느려지지만
CloudFront를 사용하면 전세계 모든 엣지 로케이션에 캐싱을 해두고 유저와 가장 가까운 엣지에 요청을 보내도록하여 S3로 직접 배포하는 것보다 속도가 빠르다.
또한 CloudFront의 요금이 S3 요금보다 저렴하여 비용절감 효과도 있다
그럼 AWS 콘솔에서 CloudFront를 찾아 접속하면 Create Distribution이라는 버튼을 클릭하여
아래와 같이 세팅하여 준다.
Origin Domain Name을 클릭하면 방금 S3에서 만든 버킷 주소를 선택할 수 있다
Origin ID도 위 버킷 주소가 클릭되면 자동으로 작성된다.
Viewer Protocol Policy에서 현재 HTTPS 주소가 없다면 첫번째를 선택하고 HTTPS 주소가 존재한다면 두 번째로 선택해서 바로 HTTPS로 리다이렉트 시켜주자
쭉 내리다보면 Default Root Object 항목에 index.html을 반드시 넣어주자
React를 이용한 프로젝트일 경우 react-route-dom을 이용한다면 다음 설정이 필요하다
방금 생성한 Distribution을 클릭하여 Distribution Settings로 이동한다
그리고 Error Pages탭으로 이동하여 Create Custom Error Response 버튼을 클릭해 해주자
아래와 같이 설정해 주자
추가로 Error code 403으로도 동일하게 추가 페이지를 작성해주자
이제 클라이언트 배포는 거의 마무리 되어 간다
글이 너무 길어져 나머지는 2편에서 이어가도록 하겠다.