S3, route53도 처음 해봐서 이렇게 남겨야 담에도 두고두고 쓸 수 있을것 같다 ,,
오늘 할것 : .co.kr로 접근하면 .kr인 원래의 페이지로 리다이렉션 할것이고 이걸 aws로 관리할것이다 !!
알고보면 되게 쉬울수도 있지만 처음에는 이게 무슨 소린가 했었다..
우선 S3는 정적파일관리로 'static file을 저장하는 저장소'이다.
파일을 만들고 S3에 올려야한다.
S3
버킷을 생성하고 그 안에 파일을 넣어 보관한다.
- 이렇게 버킷이름을 설정하고 퍼블릭액세스차단설정을 풀어준 후 아래 경고 메세지에 체크를 한다!
- 그리고 정적 웹 사이트 호스팅을 활성화로 변경해준다.
그럼 아래 나온 주소로 들어가보면 내가 만든 사이트가 주소로 만들어진다!!
CF (Cloud Front)
Amazon Cloud Front란 .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스입니다.
CloudFront를 통해 서비스하는 콘텐츠를 사용자가 요청하면 지연 시간이 가장 낮은 엣지 로케이션으로 요청이 라우팅되므로 가능한 최고의 성능으로 콘텐츠가 제공됩니다.
CF는 중계기 같은 역할을 한다고 보면 쉬울것 같다. 미국에서 server를 제공하는데 너무 멀기때문에 느리거나 트래픽이 생길수 있어서 예를 들어 일본같은데에 중계기를 놔두면 우리는 가까운 나라것을 가져다가 쓰면 더 빠르고 원활하게 사용할 수 있다.
우리가 만든 처음 주소를 도메인에 적는다 ! (나같은 경우는 .kr)
Request of Import a Certificate with ACM 버튼을 눌러서 SSL Certificate를 발급 받는다.
그리고 Default Root Object에는 index.html을 적어주면된다.
왜냐면 index.html이 기본 파일로 S3에 설정해놨기 때문이다.
Route53
Route53은 DNS(Domain Name System)으로 routing을 하는 용도라고 생각하면 된다.
route 53 - 호스팅 영역으로 들어가고 호스팅 생성을 누른다!
설정할 도메인 주소를 입력하고 호스팅 영역 생성을 누르면
이렇게 레코드의 값이 1차부터 4차까지 뜨게 된다. (이건 카페 24를 통해서 IP로 바꿀것이다)
카페 24에 접속 후 도메인관리 - 네임서버 변경으로 들어가면 '네임서버 변경하기'가 있다
그럼 route53 레코드를 생성하고 받은 값을 순서대로 하나씩 넣으면 IP로 바뀌고 새로운 IP가 생성되는데까지 시간이 좀 걸린당 ...
암튼 우리가 할건 .kr로도 사이트가 뜨게 할것이고 .co.kr로 접속해도 똑같은 사이트가 나오게 할것이다
A Record
서버가 생성되는 동안 route 53을 들어가서 A레코드와 CNAME레코드를 만들거다!
레코드 생성을 누르고
레코드 유형 을 'A-IPv4 주소 및 일부 AWS 리소스로 트래픽 라우팅' 으로 설정을 하고
별칭을 누르고
트래픽 라우팅 대상 은 CloudFront배포에 대한 별칭으로 설정한다.
아! 그리고 CloudFront는 미국 동부 (버지니아 북부)에만 있다 . 저걸로 선택 !
배포선택에는 클릭하면 관련된 주소가 나온다 그걸 사용하면되고 레코드 생성 !!!
C Name Record
Cname 도 동일한 방식으로 진행하면 된다 !
이렇게 .co.kr 과 .kr 총 2개의 route 53 호스팅을 만들어주면 된다
그리고 .co.kr로 접근할수도 있으니까 .co.kr로 되는 주소의 버킷을 S3에 만들고 그 안에 리다이렉션할 html 파일을 넣어주면 된다.
자바스크립트를 이용해서 작성했다 !
근데 여기서 문제가 생겼다 ... .kr로는 접속이되는데 .co.kr로 하면 먹통이었다 ..
개발자 도구를 켜서 확인해보니 CORS(Cross-origin)이라는 오류가 떴다!!
https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html#cors-example-1
cors에 대한걸 aws가 정리해 둔 문서다
S3 버킷 에서 권한을 들어가면 CORS가 있다.
거기엔 json 형식으로 파일을 넣어줘야 하는데
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"//Url"
],
"ExposeHeaders": []
}
]난 이런식으로 넣어줬더니 오류가 해결 됐다!!
처음해서 너무 어렵고 이해가 잘 안됐는데 회사에서 잘 알려줘서 해낼수 있었다 크크 ...
담부턴 헤메지 않기위해 정리를 해보았다
근데 정말 뒤죽박죽인거같다 .. 하다가 감이 생기면 다시 정리해봐야겠다
