Vite 빌드에 CDN 캐싱 추가

CDN (Content Delivery Network)을 활용하면 사용자에게 가까운 정적 자산을 캐싱하여 웹 사이트 성능을 크게 향상시킵니다. CDN은 전 세계적으로 분산 된 에지 서버에 컨텐츠를 배포함으로써이를 달성합니다. 사용자가 사이트에 액세스하면 CDN은 요청을 가장 가까운 서버로 지시합니다. 자산이 이미 (이전 방문 또는 다른 사용자로부터) 캐시 된 경우 즉시 제공됩니다. 그렇지 않으면 CDN은 Origin 서버에서 가져 와서 캐시를 한 다음 전달합니다.

이 튜토리얼은 AWS Cloudfront를 예로 사용하여 JavaScript, CSS, 글꼴 파일 및 기타 정적 자산을 제공하기위한 배포를 구성하고 Vite 빌드 프로세스와 통합하는 방법을 보여줍니다. 보다 강력한 접근 방식을 위해서는 Serverless Framework 또는 AWS CDK와 같은 인프라로 코드 도구를 사용하는 것을 고려하십시오. 그러나 단순화하기 위해 AWS 콘솔을 사용하겠습니다.

AWS Cloudfront 분포 구성

1. AWS 콘솔의 Cloudfront 홈페이지로 이동하십시오.
2. "배포 만들기"버튼을 클릭하십시오.
3. 생성 화면에서 원점 도메인 (자산이 상주하는 위치)을 지정하십시오. 대부분의 기본 설정이 적합합니다.
4. 결정적으로 "응답 헤더 정책"드롭 다운에서 "Cors-With-Preflight"를 선택하십시오.
5. "배포 생성"을 클릭하십시오. 그러면 새 배포가 나타납니다.

클라우드 프론트와 Vite를 통합합니다

CDN을 설정하는 것이 필수적이지만 웹 사이트는 자산을 검색하도록 구성되어야합니다. 이 통합은 다양한 빌드 시스템 (웹 팩, 롤업 등)에서 유사합니다.

1. vite.config.ts 파일에서 빌드가 생산을위한 것인지 확인하십시오.

 const isproduction = process.env.node_env === "생산";

2. 생산에서 CDN을 사용하도록 VITE를 구성하십시오.

 내보내기 DefuleConfig ({
  기본 : 제작? process.env.react_cdn : "",
});

REACT_CDN 환경 변수를 CloudFront Distribution의 URL (예 : https://distributiondomainname.cloudfront.net )으로 설정하십시오.

Vitepwa 호환성

Vitepwa 플러그인을 사용하는 경우 base 속성이 올바르게 설정되어 있는지 확인하십시오.

 vitepwa ({
  기본 : "/",
});

잘못된 설정으로 인해 web.manifest 에서 오류가 발생할 수 있습니다.

CDN 기능 확인

설정 후 사이트 자산에 대한 네트워크 요청을 검사하십시오. h2 프로토콜을 관찰해야합니다. 응답 헤더를 검사하십시오. Cloudfront 관련 데이터가 CDN의 참여를 확인하는 것을 찾을 수 있습니다.

Vite로 캐시가 발생합니다

Vite는 지문을 통해 캐시 파열을 자동으로 처리합니다. 자산 파일 이름 (예 : home-abc123.js )에 해시 코드를 추가합니다. 자산이 변경되면 해시가 변경되어 CDN이 업데이트 된 버전을 가져 오도록 강요합니다.

CDN 캐싱 확장

CDN 캐싱 혜택은 JavaScript, CSS 및 글꼴을 넘어 확장됩니다. 이미지 저장에 S3을 사용하는 경우 클라우드 프론트 배포를 구성하는 것이 좋습니다. 이것은 에지 캐싱을 제공 할뿐만 아니라 S3가 부족한 HTTP/2 지원을 가능하게합니다.

고급 CDN 전략

이 튜토리얼은 기본 CDN 통합을 다룹니다. 최적의 성능을 얻으려면 CDN에서 전체 사이트에 서비스를 제공하여 동적 컨텐츠에 대해서만 Origin 서버와 상호 작용할 수 있습니다.

결론

CDN은 Edge Caching 및 HTTP/2 지원을 제공하여 웹 사이트 성능을 향상시키는 강력한 도구입니다. 이 안내서는 CDN을 설정하고 VITE와 통합하는 프로세스를 단순화하여 귀중한 성능 최적화 기술을 장착합니다.

위 내용은 Vite 빌드에 CDN 캐싱 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!