마지막 기사에서는 Cloudfront에서 CSS 및 JavaScript의 덩어리를 제공하는 웹 앱을 설정하는 방법을 살펴 보았습니다. 앱이 브라우저에서 실행되면 앱의 루트 HTML 파일에서 요청 된 자산이 Cloudfront에서 CDN으로 당기도록 VITE에 통합했습니다.
Cloudfront의 Edge Caching은 혜택을 제공하지만 이러한 여러 위치에서 앱의 리소스를 제공하는 것은 자체 비용이없는 것이 아닙니다. 마지막 블로그 게시물의 구성으로 실행되는 내 웹 앱의 WebPagetest 추적을 살펴 보겠습니다.
이 게시물은이 문제를 해결하는 방법을 보여줄 것입니다. 우리는 Cloudfront에서 전체 웹 앱을 호스팅하고 Cloudfront를 기본 웹 서버에 적용 할 수없는 데이터, 인증 등의 요청에 따라 Cloudfront를 전달하는 방법을 살펴 보겠습니다.
이것은 마지막 기사에서 본 것보다 실질적으로 더 많은 작업이며, 웹 앱의 정확한 요구에 따라 지침이 다를 수 있으므로 마일리지가 다를 수 있습니다. 우리는 DNS 레코드를 변경할 것이며, 웹 앱에 따라 특정 자산이 캐시되는 것을 방지하기 위해 일부 캐시 헤더를 추가해야 할 수도 있습니다. 우리는이 모든 것에 들어갈 것입니다!
마지막 기사에서 우리가 다루는 설정 이이 기사에서 우리가하는 일 때문에 어떤 혜택을 제공하는지 궁금 할 것입니다. 연결 시간이 길어지면 CDN을 잊어 버리는 것이 더 좋았을 것입니다. 대신 웹 서버의 모든 자산을 더 오래 기다리지 않으십니까? 나는 이것을 내 자신의 웹 앱으로 측정했으며 위의 CDN 버전은 실제로 더 빠르지 만 많이는 아니었다. 초기 LCP 페이지로드는 약 200-300ms 더 빠릅니다. 그리고 그것은 단지 초기 부하를위한 것임을 기억하십시오. 이 연결이 설정되면 Edge Caching은 모든 후속, 비동기로로드 된 덩어리에 훨씬 더 많은 값을 추가해야합니다.
우리의 최종 목표는 Cloudfront의 전체 웹 앱을 제공하는 것입니다. 즉, 도메인을 쳤을 때 현재 링크 된 웹 서버 대신 클라우드 프론트에서 결과가 나오기를 원합니다. 즉, DNS 설정을 수정해야합니다. 이를 위해 AWS Route 53을 사용할 것입니다.
나는 MyDemo.technology를 예로 사용하고 있는데, 이는 내가 소유 한 도메인입니다. 여기에 모든 단계를 보여 드리겠습니다. 그러나 당신이 이것을 읽을 때, 나는 내 웹 앱 에서이 도메인을 제거 할 것입니다. 따라서 나중에 실제 CNAME 레코드를 보여주기 시작하면 더 이상 존재하지 않습니다.
Route 53 홈페이지로 이동하여 호스팅 된 영역을 클릭하십시오.
호스팅 영역 생성을 클릭하고 앱의 도메인을 입력하십시오.
우리는 아직 아무것도 달성하지 못했습니다. 우리는 AWS 에이 도메인을 관리하기를 원한다고 말했고 AWS는 트래픽을 통해 라우팅 할 이름 서버를 제공했습니다. 이를 발효하려면 도메인이 등록되는 곳으로 가야합니다. 자신의 사용자 정의 이름 서버를 입력 할 수있는 장소가 있어야합니다.
내 도메인은 Godaddy에 등록되어 있으며이 기사의 스크린 샷에 반영됩니다. UI, 설정 및 옵션은 레지스트라에서 보는 것과 다를 수 있습니다.
경고 : 변경하기 전에 원래 이름 서버와 모든 DNS 레코드를 기록하는 것이 좋습니다. 그렇게하면 무언가가 실패하면 시작하기 전의 일로 돌아가는 데 필요한 모든 것이 있습니다. 그리고 모든 것이 잘 작동하더라도 여전히 다른 레코드를 Route 53, 즉 MX 레코드 등으로 다시 제공하고 싶을 것입니다.
웹 앱을 호스팅하기 위해 클라우드 프론트 배포를하겠습니다. 우리는 마지막 게시물의 기본 사항을 다루었으므로 바로 얻을 것입니다. 지난번과의 큰 변화는 Origin 도메인을 위해 입력 한 것입니다. 최상위 도메인 (예 : your-app.net)을 넣지 마십시오 . 필요한 것은 앱이 호스팅되는 기본 도메인입니다. 그것이 Heroku라면 Heroku가 제공하는 URL에 들어갑니다.
다음으로 보안 HTTPS 연결을 통해이 사이트를 사용하려는 경우 기본 프로토콜을 변경하십시오.
이 부분은 중요합니다. 웹 앱이 인증, 데이터 호스팅 또는 다른 항목을 실행중인 경우 Get 외에 다른 동사를 활성화하십시오. 이 부분을 건너 뛰면 인증, 데이터를 돌연변이하는 게시물 요청이 거부되고 실패합니다. 웹 앱이 자산에 서비스를 제공하는 것 외에는 아무것도하지 않고 모든 것들이 외부 서비스로 처리됩니다. 훌륭한 설정이 있으며이 단계를 건너 뛸 수 있습니다.
캐시 키 및 원점 요청 설정을 지난 시간에 비해 상당히 변경해야합니다.
최소 TTL이 0 인 캐시 정책을 만들어야하므로 다시 보내지 않는 비 캐싱 헤더가 올바르게 존중됩니다. 모든 쿼리 문자열을 활성화 할 수도 있습니다. 여러 그래프 QL 요청이 다른 쿼리 문자열과 함께 나오면서 무시되었을 때 이상한 행동을보고 있었는데,이 모든 요청은 Cloudfront의 관점에서 동일하게 나타납니다.
내 정책은 다음과 같이 보였습니다.
원산지 요청 정책의 경우 필요한 경우 인증 및 데이터 쿼리와 같은 작업을 위해 쿼리 문자열 및 쿠키를 보내야합니다. 명확하게 말하면, 쿠키 및 쿼리 문자열이 Cloudfront에서 웹 서버 (예 : Heroku 또는 이와 유사한)로 전송 될지 여부가 결정됩니다.
내 것 같아요 :
마지막으로, 응답 헤더 정책의 경우 목록에서 "Preflight with Preflight"를 선택할 수 있습니다. 결국, 첫 두 사람은 설정 방법에 따라 다른 이름을 갖습니다. 하지만 내 것 같습니다.
도메인을이 클라우드 프론트 분포에 연결합시다. 불행히도, 이것은 당신이 기대하는 것보다 더 많은 일입니다. Amazon이 알고 있지 않기 때문에 실제로 도메인을 소유하고 있음을 AWS에 증명해야합니다. 우리는 Route 53에서 호스팅 된 영역을 만들었습니다. 그리고 우리는 그것이 우리에게 준 Nameservers를 가져 와서 Godaddy에 등록했습니다 (또는 당신의 도메인이 등록 된 사람). 그러나 아마존은 아직 이것을 모른다. 우리는 실제로이 도메인의 DNS를 제어한다는 것을 아마존에 보여 주어야합니다.
먼저 SSL 인증서를 요청합니다.
다음으로 인증서 링크를 요청하겠습니다.
이제 공개 인증서 옵션을 요청할 옵션을 선택하겠습니다.
도메인을 제공해야합니다.
그리고 제 경우에는 인증서가 보류 중입니다.
그래서 나는 그것을 클릭 할 것입니다 :
이것은 우리 가이 도메인을 소유하고 제어 함을 증명합니다. 별도의 탭에서 Route 53으로 돌아가 호스팅 된 영역을여십시오.
이제 우리는 cname 레코드를 만들어야합니다. 레코드 이름 의 첫 번째 부분을 복사하십시오. 예를 들어, cname이 _xhyqtrajdkrr.mydemo.technology 인 경우 _xhyqtrajdkrr 부분을 넣으십시오. 레코드 값 의 경우 전체 값을 복사하십시오.
Domain Host, Godaddy 또는 누구와 함께 AWS 이름 서버를 등록했다고 가정하면 AWS는 곧 DNS 항목을 핑하여 방금 요청한 응답을보고, 인증서를 확인하고 인증서를 확인할 수 있습니다.
처음에 설정 한 이름 서버에 시간이 걸릴 수 있습니다. 이론적으로는 최대 72 시간이 걸릴 수 있지만 보통 1 시간 안에 업데이트됩니다.
도메인에서 성공할 수 있습니다.
… 인증서뿐만 아니라 :
멍청이 ! 거의 끝났습니다. 이제이 모든 것을 클라우드 프론트 분포에 연결합시다. Cloudfront 설정 화면으로 돌아갈 수 있습니다. 이제 Custom SSL 인증서 에 따라 우리는 우리가 만든 내용 (그리고 과거에 만든 다른 사람들)을 볼 수 있습니다.
그런 다음 앱의 최상위 도메인을 추가하겠습니다.
남은 것은 Route 53에 도메인을이 클라우드 프론트 분포로 라우팅하도록 지시하는 것입니다. 그래서 Route 53으로 돌아가서 다른 DNS 레코드를 만들어 봅시다.
IPv4에 대한 A 레코드와 IPv6에 대한 AAA 레코드를 입력해야합니다. 둘 다, 우리는 최상위 도메인 만 등록하기 때문에 레코드 이름을 비워 두십시오.
레코드 유형을 선택하십시오. 다음으로 레코드를 별칭으로 지정한 다음 별칭을 클라우드 프론트 분포에 매핑하십시오. 클라우드 프론트 배포를 선택할 수있는 옵션을 열어야하며, 이전에 Cloudfront에 도메인을 등록 했으므로 해당 분포와 선택시 분포 만 볼 수 있습니다.
우리는 IPv6 지원에 필요한 AAAA 레코드 유형에 대해 정확히 동일한 단계를 반복합니다.
웹 앱을 실행하고 실제로 작동하는지 확인하십시오. 그것은!
좋아, 우리는 기술적으로 여기서 끝났지 만 웹 앱의 정확한 요구를 충족시키기 위해해야 할 일이 여전히 남아있을 가능성이 있습니다. 다른 앱은 다른 요구를 가지고 있으며 지금까지 보여준 것은 더 나은 성능을 위해 Cloudfront를 통해 물건을 라우팅하기 위해 공통 단계를 안내했습니다. 더 많은 사랑이 필요한 앱에 고유 한 것들이있을 가능성이 있습니다. 따라서 설정 중에 발생할 수있는 몇 가지 추가 항목을 다룰 수 있습니다.
먼저, 당신이 가진 게시물이 원산지로 올바르게 전송되어 있는지 확인하십시오. Cloudfront가 쿠키를 원점으로 전달하도록 올바르게 구성되었다고 가정하면 이미 작동해야하지만 확인에는 해가 없습니다.
더 큰 관심사는 웹 앱으로 전송되는 다른 모든 GET 요청입니다. 기본적으로 Cloudfront가 수신하는 모든 GET 요청은 캐시 된 경우 캐시 된 응답으로 웹 앱에 제공됩니다. 이것은 비참 할 수 있습니다. Get과 함께 전송 된 모든 REST 또는 GraphQL 엔드 포인트에 대한 데이터 요청은 CDN에 의해 캐시됩니다. 그리고 서비스 작업자를 운송하는 경우, 현재 버전이 백그라운드에서 전송되고 변경 사항이 있으면 업데이트되는 정상적인 동작 대신 캐싱됩니다.
Cloudfront에 특정 물건을 캐시 하지 말라고 지시하려면 "캐시 제어"헤더를 "No-Cache"로 설정하십시오. Express와 같은 프레임 워크를 사용하는 경우 데이터 액세스에 대한 미들웨어를 다음과 같이 설정할 수 있습니다.
app.use ( "/draphql", (req, res, next) => {
res.set ( "캐시 제어", "없음");
다음();
});
app.use (
"/GraphQL",
expressgraphql ({
스키마 : executableschema,
Graphiql : True,
rootValue : 루트
})
);서비스 작업자와 같은 경우 정적 미들웨어 전에 해당 파일에 대한 특정 규칙을 넣을 수 있습니다.
app.get ( "/service-worker.js", express.static (__ dirname "/react/dist", {setheaders : resp => resp.set ( "캐시-제어", "no-cache")));
app.get ( "/sw-index-bundle.js", express.static (__ dirname "/react/dist", {setheaders : resp => resp.set ( "캐시-콘트롤", "no-cache"}));
app.use (express.static (__ dirname "/react/dist", {maxage : 432000 * 1000 * 10});등. 잘못 될 수있는 것이 너무 많아서 모든 것을 철저히 테스트하십시오. 그리고 각 변경 후에는 Cloudfront에서 완전히 무효화하고 웹 앱을 다시 실행하기 전에 캐시를 지우고 캐시에서 올바르게 제외 된 것을 테스트하기 전에 캐시를 지우십시오. Cloudfront의 Invalidations 탭에서이를 수행 할 수 있습니다. 그것을 열고 값을 위해 /*를 넣고 모든 것을 지우십시오.
이제 우리는 모든 것을 실행 했으므로 WebPagetest에서 추적을 다시 실행합시다.
그리고 마찬가지로, 우리는 더 이상 자산에 대해 봤던 것처럼 더 이상 설정 연결이 없습니다. 내 웹 앱의 경우 LCP에서 500ms가 상당히 개선되었습니다. 그것은 확실한 승리입니다!
CDN에서 전체 웹 앱을 호스팅하면 모든 세계에서 최고를 제공 할 수 있습니다. 우리는 정적 자원에 대한 에지 캐싱을 얻지 만 연결 비용은 없습니다. 불행히도,이 개선은 무료로 제공되지 않습니다. 필요한 프록시를 올바르게 설정하는 것은 완전히 직관적이지 않으며, CDN의 캐시에서 성취 할 수없는 요청을 피하기 위해 캐시 헤더를 설정해야합니다.
위 내용은 웹 앱을 호스팅하기 위해 Cloudfront 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
