0

최근 AWS Route 53 (brianpatrickhummel.com)에서 도메인을 구입하여 개인 포트폴리오를 호스팅했습니다. 포트폴리오 사이트는 S3 버킷과 Cloudfront를 CDN으로 사용하여 실행됩니다. 포트폴리오 사이트에서 방문자는 iframe 요소를 사용하여 사이트 내에서 실행 한 일부 앱을 미리 볼 수 있으며 Heroku 배포 앱은로드하는 데 10-20 초가 걸리는 것으로 나타났습니다. 평균이며 CDN 서비스가 없습니다.맞춤 도메인이있는 Heroku 사이트의 AWS Cloudfront로

따라서 AWS Cloudfront를 CDN으로 사용하여 연구를 시작했습니다. 지금과 같은 구성으로하는 사용자 정의 도메인 추가 한 Heroku가 응용 프로그램으로 시작 ". Heroku가 제공하는 DNS 대상을 가리 키도록 앱의 DNS 공급자를 구성"

Domain Name: burger.brianpatrickhummel.com 
DNS Target: burger.brianpatrickhummel.com.herokudns.com 

마지막 단계가하는 것입니다 이 단계와 Cloudfront 배포를 적절히 구성하는 사이에 혼란 스러움을 겪었습니다. Cloudfront, Route 53 또는 둘 다에서 특정 DNS/CNAME 변경 위치를 알 수 없습니다.

가 특히이 세 가지 기술 (Heroku가, CloudFront를, 국도 53)에 관련된 많은 온라인 documention가 아닌 내가 아무 소용이 세 기사 사이에 수신 거부 많은 시간을 보냈어요 :

Heroku - Using Amazon CloudFront CDN

Configuring Amazon Route 53 DNS for Your Heroku App

필자는 필요한 변경 사항이 매우 단순하며이 특정 구성에 경험이있는 사람들로부터 통찰력을 얻었 음을 확신합니다.

--- UPDATE ---

나는 내 Heroku가 모두 성공적으로 CloudFront를 통해 라우팅, 나는 애플 리케이션의 모든 것을 실현 앱은 가지고 이제 마지막 질문이 POST HTTP 요청을 생성하는 구성 요소에는 403 - 금지 오류가 발생합니다. 이 각각의 AJAX의 상대적인 URL와 아무 상관이 있나요 호출

CloudFront를 항상 응답이 GET과 HEAD 요청을 캐시 : 나는이 (가) CloudFront를 문서에서 다음을 참조

$(document).on("click", ".saveButton", function() { 
    var thisId = $(this).attr("id"); 
    $.ajax({ 
    method: "POST", 
    url: "/save/" + thisId 
    }).done(function() {} 

합니다. OPTIONS 요청에 대한 응답을 캐시하도록 CloudFront를 구성 할 수도 있습니다. CloudFront는 다른 메소드를 사용하는 요청에 대한 응답을 캐시하지 않습니다.

요청을 성공적으로 보내는 데 문제가되는 것보다 Heroku 앱의 서버에서 응답을 처리하는 데 더 문제가 있습니까?

- - 업데이트 2
나는이 HTTP/HTTPS CloudFront를 문서에서이 문을 기반으로 함께 할 수있다 생각 해요 :

CloudFront를 DELETE를 리디렉션하지 않습니다

, HTTP에서 HTTPS 로의 OPTIONS, PATCH, POST 또는 PUT 요청. HTTPS로 리디렉션하도록 캐시 동작을 구성하면 CloudFront는 HTTP 상태 코드 403 (금지됨)으로 해당 캐시 동작에 대한 HTTP DELETE, OPTIONS, PATCH, POST 또는 PUT 요청에 응답합니다.

Heroku가이 상태 :

당신은 당신이 단순히 아마존에서 제공 한 유통 도메인에 HTTPS를 사용하여 SSL을 사용하여 CloudFront를 자산 서비스를 제공하고자하는 경우. 이를 위해 CNAME을 만들 수 있지만 CNAME을 통해 Cloudfront 애셋을 게재하고 SSL에는 첨부 된 비용이 있습니다.

AWS CloudFront를 배포 캐시 동작 설정에서

, 당신은 세 가지 옵션에서 뷰어 프로토콜 정책에 대한 를 선택할 수 있습니다

당신이 CloudFront를 시청자가 사용하여 웹 콘텐츠에 액세스 할 수 있도록하려면 두 HTTP 또는 HTTPS를 지정하려면 HTTP 및 HTTPS를 지정하십시오. CloudFront에서 모든 HTTP 요청을 HTTPS로 리디렉션하려면 HTTP에서 HTTPS로 리디렉션을 지정하십시오. CloudFront에 HTTPS가 필요하게하려면 HTTPS 만 지정하십시오. HTTPS 시청자에

리디렉션 HTTP는 두 프로토콜을 사용할 수 있지만, HTTP를 요청은 자동으로 HTTPS 요청으로 리디렉션됩니다

CloudFront를의 문서주의에 간다. CloudFront는 새로운 HTTPS URL과 함께 HTTP 상태 코드 301 (Moved Permanently)을 반환합니다. 그러면 뷰어는 HTTPS URL을 사용하여 CloudFront에 요청을 다시 제출합니다.

뷰어가 HTTP 요청을 HTTPS 요청으로 리디렉션하면 CloudFront가 두 요청에 대해 요금을 부과합니다. HTTP 요청의 경우 요청은 CloudFront에서 뷰어로 반환하는 헤더 및 요청에 대해서만 청구됩니다. HTTPS 요청의 경우 청구는 요청 및 원점에서 반환 된 헤더 및 객체에 대한 요금입니다.

HTTPS 만 시청자는 HTTPS를 사용하는 경우에만 콘텐츠에 액세스 할 수 있습니다. 사용자가 HTTPS 요청 대신 HTTP 요청을 보내면 CloudFront는 HTTP 상태 코드 403 (금지됨)을 반환하고 객체를 반환하지 않습니다.

좋은 슬픔, 나는 그것이 개인 웹 사이트를 호스팅하는 것이 얼마나 복잡한 지 전혀 몰랐습니다! Route53 다음, 당신 DNS 서비스 (하지 CloudFront를) 때문에

답변

1

도메인 이름 : burger.brianpatrickhummel.com

당신은 국도 53, CloudFront를이를 가리 킵니다 ...하지만 당신이 그렇게하기 전에, 당신은 새로운 CloudFront를 분포를 만들고 구성해야 해당 호스트 이름을 분배의 대체 도메인 이름으로 사용하십시오.

DNS 대상 : burger.brianpatrickhummel.com.herokudns.com 기원 도메인 이름과 같은

구성이 배포 CloudFront를 작성.

캐시 동작 설정에서 Heroku가 요청한 사이트를 이해할 수 있도록 Host 헤더를 허용 목록에 추가하십시오.

+0

정보 주셔서 감사합니다! 원산지 도메인 이름으로 Heroku DNS Target을 사용하여 Cloudfront 배포를 만들고 CNAME으로 Heroku App Domain Name을 추가 한 다음 Cloudfront CNAME, 유형 : A, 별칭과 일치하는 이름으로 Route 53 Record Set를 만들었습니다. 네, 그런 다음 별칭 대상으로 Cloudfront Distribution을 선택했습니다 ......... 완벽하게 작동했습니다 !! Route 53 Record Set Type을 CNAME으로 설정하는 것에 대해 언급하는 사람들이있었습니다. Type A를 선택했는데 작동하는 것처럼 보입니다. CNAME을 사용하려고 시도했을 때 Alias ​​Target 드롭 다운 메뉴에 선택할 수있는 옵션이 없었습니다. –

+0

우수. 별칭이 '예'로 설정된 'A'레코드가 올바른 선택입니다. Alias를 No로 설정하면 CloudFront 끝점 호스트 이름을 상자에 입력하여 CNAME을 사용할 수 있지만 ** 원하지는 않습니다 **. Alias ​​= Yes의 'A'레코드는 조회하는 데 약 2 배 빠르며 CloudFront, S3 또는 ELB와 같은 AWS 서비스를 가리키는 A 레코드 별칭에 대한 쿼리에는 요금이 부과되지 않지만 CNAME 쿼리는 무료가 아닙니다. 실제로 청구 금액에 0.00 달러의 항목이 있으며 무료 "계층"이 아닙니다. 이는 항상 무료입니다. –

0

나는 CloudFront를, 국도 53 음 모두

, 나는 특정 DNS/CNAME 변경을 어디까지 불확실 해요 Route53에 CNAME 레코드를 만들 것입니다. 하위 도메인을 CloudFront로 가리키는 Route53에 CNAME 레코드를 만들려고합니다. 그런 다음 대체 도메인 이름 필드를 구성하여 해당 도메인을 제공해야한다는 것을 CloudFront가 인식하도록 구성해야합니다.

0

여기

도메인 이메일로 SSL 인증을 확인

당신은 국도 53에 이미 있기 때문에

,

는 ACM

에서 무료로 SSL을 받기 내가 할 것 단계이다 주소.

ACM Confirmation

뿐만 아니라 CloudFront를에서 SSL과 엔드 포인트 및 CNAME에 할당이 아래와 같이 녹색으로 보이는 있는지 확인

당신은 또한 CNAME을 볼 수

자동 Route53에 생성됩니다

이 SSL 엔드 포인트.

burger.brianpatrickhummel.com을 핑 (ping)하면, 파문을당한 앞에서 응답해야합니다. CloudFront를에

Cloudfront SSL

이제 설정 기원 필요한 모든 캐시 설정으로 엔드 포인트를 가리 키도록합니다. 캐시 설정이 필요하지 않은 경우이 설정을 모두 0으로 설정하면 cloudfront에서 아무 데이터도 캐시하지 않습니다.

Cloudront 패턴에서 끝점에 *가 있어야 모든 URL 패턴과 일치하므로 끝점으로 전달할 수 있습니다.

엔드 포인트를 보호해야하는 경우 Cloudfront에서 추가 헤더를 전달하고 공개 엔드 포인트가 아닌 클라우드 프런트에서 요청을 처리 할 수 ​​있습니다.