아마존닷컴은 10년전 (1995년) 웹 서버와 데이터베이스 백엔드를 가지는 모놀리식(Monolithic) 애플리케이션으로 시작하였습니다. 5년전(2001년) 아마존은 주요한 아키텍쳐 변화가 있었는데 2 티어(tier)기반에서 서로 다른 애플리케이션 기능을 제공하는 분산 서비스 플랫폼으로 변화하였습니다. 여러분이 지금 Amazon.com의 첫화면에 들어온다면, 그 페이지를 생성하기 위해 100여개가 넘는 서비스를 호출하여 만들고 있습니다.
- 위의 인터뷰는 아마존의 CTO 버너 보겔스의 인터뷰 내용입니다. AWS는 아마존이 사용하던 인프라를 그대로 서비스로 만들어 놓은 것입니다. 그렇기에 아마존 닷컴의 아키텍처와 같이 블록처럼 조립해서 쓸 수 있게 서비스를 구성해 놓았습니다.
- 🔥 AWS를 사용한다는 것은 단순히 클라우드 사용을 넘어 개발 방식도 클라우드 철학에 맞게 변해야 한다는 것을 알 수 있습니다.
- 결론은 분리해야 할 부분은 !무!조!건! 분리하는 것입니다.
CloudFront는 CDN 서비스와 유사한 기능을 합니다. S3(정확히는 그 안의 index.html)를 사용해서 www.example.com 도메인으로 글로벌 서비스를 해야하는 상황입니다. 어떻게 해야할까요? S3의 버킷은 생성할때 리전이 정해져있습니다. 서울리전에 있는 버킷을 호스팅 기능을 이용해서 미국에 서비스 한다고 하면 엄청나게 사이트가 늦게 뜰꺼에요~ 그러면 똑같은 S3 버킷을 서비스하는 나라의 가까운 리전 마다 생성해줘야 할까요 ❓ 그럼 비용이 더 들겠죠 좋은 방법이 있어요!! CloudFront를 사용하는 거에요 😀
AWS Cloud 홈페이지부터 들어가 봅시다 참고로 서울 리전이 설정되어 있는 링크입니다.
https://console.aws.amazon.com/cloudfront/v3/home?region=ap-northeast-2
console.aws.amazon.com
중요한 점만 얘기하자면 다음과 같습니다.
- 서버 구현 필요없이 아마존 S3의 내구성 뛰어난 스토리지 사용!!!
- 각 리전마다 캐싱 데이터를 뿌려 해외에서도 내 웹사이트 로드 속도가 떨어지지 않게 해줌!
- HTTPS 지원으로 웹사이트의 안정성 확보..!! (+GeoLocation 등 보안에 민감한 기능 사용 가능)
이용할 이유가 이미 충분한 것 같네요. 특별히 api를 직접 구현하지 않고 공공 api 등을 이용한 사이트라면 플라스크 웹프레임워크조차 필요없습니다!! 와우 저희 프로젝트 사이트도 즐겨찾기 기능을 빼면 자바스크립트로 모든 구현이 가능하니 해당되는 얘기네요 와우네...
단계는 다음과 같습니다.
(우선 가비아에서 .shop 프로모션을 활용해 첫 1년만 550원! 간단한 도메인을 하나 구매합니다.)
- 아마존 S3에 콘텐츠 업로드 및 퍼블릭으로 설정!
- 클라우드프론트 배포 생성
- 클라우드프론트 깃헙 액션과 연결
- 도메인 연결!!
일단 S3에 올릴 index.html 선생님은 미리 만들어왔어요~~
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="오늘 뭐 먹지?">
...
<!-- 트위터 -->
...
<!-- 폰트어썸 아이콘 사용! -->
<script src="https://kit.fontawesome.com/aba5c3ead0.js" crossorigin="anonymous"></script>
<!-- 커스텀 css! -->
<link rel="stylesheet" href="/static/css/purify.css">
<link rel="stylesheet" href="/static/css/bulma.css">
<link rel="shortcut icon" href="/static/images/favicon.webp">
<!-- 커스텀 JS! -->
<script defer rel="script" src="/static/js/core.js"></script>
<!-- UUID 라이브러리! -->
<script src="https://unpkg.com/uuid@latest/dist/umd/uuidv4.min.js"></script>
<!-- 제이쿼리! -->
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<!-- PopperJS! -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<title>오늘 뭐 먹지?</title>
</head>
<body>
...
...
...
</body>
</html>네 저희 프로젝트 파일입니다 바디 부분은 싹 뺐어요 양해바랍니당
우선 S3에 버킷을 만들어줍니다. 나중에 도메인을 붙일 생각이기 때문에 해당 도메인 이름으로 버킷을 만들어주세요!! 저는 모종의 이유로 미국 동부 버지니아 북부 리전으로 만들었었는데, 중요한 부분은 아닌 것 같습니다. 서울로 만들어주세요!
그리고 버킷의 퍼블릭 액세스 차단 설정을 해제해 줄 것입니다! 나중에 좀 더 세세하게 조정해도 괜찮지만 우선은 이렇게 해주세요! "모든 퍼블릭 액세스 차단"만 해제해주고 나머지들은 해제되지 않은 상태로, "현재 설정으로 인해 이 버킷과 그 안에 포함된 객체가 퍼블릭 상태가 될 수 있음을 알고 있습니다"에 체크하고, 버킷 만들기 클릭해주세요!
루트 위치에 index.html을 업로드해줍니다. 그런데 여기서부터 저는 강의 내용과 조금 다르게, templates 폴더를 만들고 그 안에 index.html을 넣어주었어요! 또 static에 css와 js, fonts, images 폴더를 만들고 각각의 로컬 파일들을 업로드했어요!
폴더 구조는 여러분들의 마음입니다만, 루트에 업로드하지 않았다면, 위치를 잘 기억해주셔야 하고(다신 볼 수 없는 건 아니지만요), 개발 중인 html/js/css와 위치가 같아야 합니다! 저는 플라스크 이용 중이라 폴더 구조가 이렇습니다
앗 그런데 자바스크립트랑 CSS는 어떻게 배포에 껴놓죠? => 그건 이따가 말할게욥 좀 야매라...(야매인지 아닌지도 모름)
그리고 여기서 잊으시면 안되는것...!!! 사용할 파일들을 모두 " 작업▼ " 버튼을 눌러 퍼블릭으로 설정해줍니다.
그리고 후다닥 클라우드프론트로 갑시다!!
참고로 AWS 우상단에 항상 리전이 표시되고 있습니다. 항상 주시해주세요 저 이거 때문에 몇번 새로 만듦..
원본 도메인부터 클릭하라네요. AWS S3에 있는, index.html이 있는 버킷을 선택해줍니다!
나머지 설정은 거의 디폴트값 그대로 사용할 예정입니다. 혹시 이미 아마존에서 인증받은 SSL 인증서가 있다면 연결해주세요 저는 이따가 하겠습니다
"거의" 그대로 쓰겠다고 한 것은 루트 객체를 손댈 것이라 그렇습니다. index.html로 해주시면 되는데, 제가 한 것처럼 처음에 templates/static 파일 구조를 만드신 분들은 거기에 따라 경로도 적어주세요!
사실 이게 끝입니다(?) 클라우드프론트 배포는 이미 끝난 것이예요. 배포(distribution)의 세부정보에 있는 도메인을 클릭해 접속해보세요!!
그런데 index.html 파일에 모든 스크립트와 스타일시트를 인라인으로 때려박지 않았다면, css, js, ttf 등을 연결해야 합니다 그거 우리가 어디에 뒀죠? 같은 버킷에 넣어뒀죠.
나중에 도메인을 달고 나면, 이 부분이 그냥 알아서 위와 같이 같은 버킷 안에 static에 있는 그 파일이구나! 하고 알아챌 것입니다. 근데 지금은 몰라요. 지금은 배포 도메인의 하위 도메인에 그런 곳은 없으니까 연결이 안됩니다. 그러니까 https://s3.amazonaws.com/smallmeal.shop/static/fonts/BMHANNAPro.ttf 이렇게 s3아마존의 해당 객체 위치로 설정해주세요!! 우리가 클라우드프론트에 연결한 것은 index.html 뿐이니까요!
여기까지가 일단 index.html을 업로드하고 클라우드프론트를 이용해 배포하기-까지의 결과입니다. 그리고 다음 과정으로 바로 가 볼게요.
AWS Route 53 서비스에 접속합니다. 위와 마찬가지로 리전이 미리 설정되어 있네욥 양해바라요
https://console.aws.amazon.com/route53/home?region=ap-northeast-2
console.aws.amazon.com
호스팅 영역에 들어가봅니다. 아마 처음 오셨다면 아무것도 없을 겁니다. 호스팅 영역을 생성해주세요.
S3 버킷에 사용한 것과 같은 도메인 이름을 기입합니다. 퍼블릭 호스팅영역으로 호스팅영역을 생성해줍니다.
오른쪽의 값, 특히 NS(네임서버) 유형의 값 네개를 가지고 네임서버를 AWS로 바꿔봅시다. (가비아 먹튀)
https://domain.gabia.com/manage/changeinfo 여기로 들어가서, 구매한 도메인 명을 클릭하고, 네임서버를 클릭해 변경에 들어갑니다. 순서 상관없이 네개의 네임서버를 아마존에서 주운 값으로 모두 바꿔줍니다. (기존엔 가비아 3개였을 것이예요) 그대로 복사해서 붙이면 맨 끝에 점(.)을 떼달라고 할겁니다. 떼주세요.
설정을 완료하면 다시는 가비아에 볼 일이 없습니다 닫아주세요(매정)
꼭 가비아에서 구입해야 하는 것은 아니고 Namecheap이라는 글로벌한 사이트도 있고, 후이즈, 카페24에서도 구매할 수 있고, 사실 AWS에서 구매하면 이 네임서버 바꾸는 과정이 없는 가장 깔끔한 진행이 가능합니다. 그냥 가비아가 지금 .shop 도메인을 550원(VAT 포함)에 팔고 있어서 이용해먹은 것이예요. 돈이 많고 시간이 없으시면 아마존에서 구매하셔도 됩니다 좀 부럽네요.
이제 AWS Certification Manager (ACM)에 접속합니다. 인증서 요청을 해봅시다.
https://console.aws.amazon.com/acm/home
console.aws.amazon.com
구매한 도메인 (아버지를 아버지라 부르지 못하는 도메인)을 도메인 이름에 입력합니다. 앞에 www나 https:// http:// 이런거 붙이시면 아니되고, 와일드카드 하나만 붙여줍니다. *.구매한도메인이름.shop 을 기입해주세요. 앞에 어떤 서브도메인이 들어오든 대충 다 받아줘 이런 말입니다. (대신 1차 서브 이상의 도메인은 안받아줌)
이메일이 아닌 DNS 검증을 누릅니다. 다음에 나오는 태그 추가는 스킵합니다(하셔도 상관은 없습니다.).
확인 및 요청을 누르고, 나타나는 화면에서 "도메인" 아래의 "*.구매한도메인.shop" 부분 왼쪽에 ▶ 버튼을 클릭해, "Route 53에서 레코드 생성"을 눌러줍니다. 앞의 과정을 잘 밟아왔다면 Route 53에 여러분의 도메인이 등록되어 있기 때문에 굳이 복잡한 과정 없이 CNAME 값을 전달했을 것입니다. 그리고 "계속"을 누르고 진행하시면 약간의 시간 뒤에 검토가 승인됩니다. 만약에 기다리고 기다려도 검토가 안되고 있다면, 앞의 과정을 잘 밟아왔는지 체크해주시고, 그런 다음에 Route 53의 호스팅 영역에 들어가 CNAME 값을 여기에 나타난 값으로 직접 수정해주어야 합니다!
네 위 과정까지 잘 오셨다고 판단하고 다음 과정으로 갑니다.
Route 53 페이지를 열고, 해당 도메인 상세페이지를 열어 CNAME이 잘 붙어있는지 확인하고, 레코드 생성을 클릭해줍니다.
레코드 이름은 아무것도 입력하지 않은 상태에서, 레코드 유형은 A 유형으로, 트래픽 라우팅 대상은 CloudFront 배포에 연결해야 합니다. 그런데 여기서 바로 나타나지 않을 수 있습니다. 나타나지 않는다면 일단 S3 웹사이트 엔드포인트와 연결하겠다고 하고 index.html이 있는 버킷을 연결해줍니다. 다시 여기로 올 거니까 창은 닫지 말아주세요!
CloudFront에서 직접 도메인을 등록할 겁니다. CloudFront의 우리의 배포를 클릭해 설정을 편집해 줍니다.
앞에 ACM에서 발급받은 인증서를 사용자 정의 SSL 인증서에서 조회합니다. 선택한 후, 대체 도메인 이름에 제가 한 것처럼 www와 *을 서브도메인으로 입력해줍니다. (sub은 무시해주세요..) 그리고 저장한 뒤 다시 레코드 설정으로 가봅시다. 이제 보이나요?? 앞의 레코드 이름을 빈칸으로 두지 않고 www를 입력한 뒤 조회해보세요.
네 여기서 선택만 해주면 오늘의 할 일 끝입니다. 왜 여기서 끊냐면 도메인이란 것이 제대로 네임서버에서 레코드와 연결되는 것이 한국인이 원하는 속도로 되지가 않습니다. 두고 다른 일하시다가 보거나 저처럼 여기까지만 해놓고 한숨 자도 좋습니다. 그리고 글을 여기서 끊어야 제가 구글님으로부터 광고비 50원이라도 더 받을 수 있습니다... 우리존재화이팅 다음 과정 작성하면 링크 연결하겠습니다!!!
'Linux,Cloud' 카테고리의 다른 글
| [AWS] AWS ELASTICBEANSTALK :: Flask 웹사이트 HTTPS로 배포하기 (0) | 2021.10.14 |
|---|---|
| [AWS] AWS ElasticBeanstalk(EB)으로 파이썬 플라스크 사이트 배포하기 (2) | 2021.10.14 |
| [Github] CloudFront + Github 연동으로, 도메인+https+자동재배포까지 해결하자!! (0) | 2021.10.12 |
| 우분투 18.04 몽고디비 세팅하기 (0) | 2021.10.08 |
| 우분투 18.04 초기 서버 설정하기 + 간단한 리눅스 명령어 모음 (0) | 2021.10.08 |
댓글