저자의 말: 오랫동안 개발 작업을 해오셨다면 인터넷의 주요 문제는 속도라는 것을 아실 것입니다. 간단합니다. 속도가 중요하며 빠를수록 좋습니다. 성능을 향상시키는 쉬운 방법은 CDN을 사용하는 것입니다. 우리는 이미 CSS-Tricks 웹사이트에서 이 주제를 여러 번 다루었습니다. 단순함은 데이터베이스를 다시 작성하고 콘텐츠를 수동으로 편집할 필요가 없다는 것입니다. 그러나 우리 중 많은 사람들이 이 영역의 성능에 충분한 주의를 기울이지 않습니다. 호스팅, 서버 및 cPanel, 이런!

다행스럽게도 CDN 통합은 그리 어렵지 않습니다. 이상적으로는 Google PageSpeed ​​​​트럼펫과 같은 모든 서비스와 서비스를 설정합니다. 고성능귀하의 사이트는 결과적으로 검색 결과에서 더 높은 순위를 차지하고, 수입이 증가하고, 인기가 높아지며... 글쎄, 당신은 아이디어를 얻을 것입니다.

이 문서에서는 사용자 지정 웹 애플리케이션에서 CDN을 설정하는 과정을 살펴본 후 CDN을 최대한 활용하는 데 도움이 되는 몇 가지 요령에 대해 알아봅니다. 제가 말했듯이 설정은 쉬워야 합니다. 이제 시작하여 웹을 더 빠르게 만들어 봅시다!

CDN 배포를 위한 특수 플러그인이 있는 WordPress와 같은 CMS에서 작업하는 사람들을 위해 CDN을 설정하는 것이 지금 설명하는 것보다 훨씬 간단할 수 있다는 점을 추가해야 합니다. 모든 사람이 그런 사치를 누리는 것은 아니라고 가정하고 더 많은 것을 살펴 보겠습니다. 전통적인 방식.

당신은 CDN에서 나를 잃었습니다

CDN이 무엇인지, CDN이 필요한 이유 등 기본 개념을 살펴보면 문제가 되지 않을 것입니다. 이것부터 시작합시다.

자바스크립트. 빠른 시작

CDN은 사이트 서버에서 정적 파일을 가져와 해당 서버에 캐시합니다. 브라우저가 사이트에 액세스하면 사이트가 아닌 CDN을 통해 정적 콘텐츠가 로드됩니다. CDN 서버는 전 세계에 위치하므로 훨씬 빠릅니다. CDN 자체는 프록시 원칙에 따라 작동하여 사용자에게 가장 가까운 서버를 결정하므로 더 빠르고 편리한 콘텐츠 전달이 보장됩니다. 약어는 Content Delivery Network 또는 Content Delivery Network를 나타냅니다.

그렇다면 브라우저는 사이트 서버가 아닌 CDN을 통해 파일을 다운로드할 시기를 어떻게 결정합니까? 정적 파일의 URL은 CDN을 가리키도록 다시 작성됩니다.

예를 들어 하위 도메인에 대한 CDN을 설정하려고 합니다. CSS-Tricks 웹사이트의 주소는 cdn.css-tricks.com일 수 있습니다. 따라서 파일에 대한 모든 링크는 하위 도메인으로 이동됩니다.

대략적으로 말하면 귀하의 사이트에 있는 파일 주소는 다음과 같습니다.

http://www.css-tricks.com/image.jpg http://www.css-tricks.com/style.css http://www.css-tricks.com/script.js

http : //www.css-tricks.com/image.jpg http: //www.css-tricks.com/style.css http: //www.css-tricks.com/script.js

... 다음과 같이 됩니다:

http://cdn.css-tricks.com/image.jpg http://cdn.css-tricks.com/style.css http://cdn.css-tricks.com/script.js

http: //cdn.css-tricks.com/image.jpg http: //cdn.css-tricks.com/style.css http: //cdn.css-tricks.com/script.js

브라우저는 사이트 서버가 아닌 CDN에 요청을 보냅니다. 이는 서버에서 가장 큰 부하를 차지하고 사이트를 더 빠르게 만듭니다.

잠깐, 한 사이트에 두 대의 서버가 있다고요?

어느 정도 이는 사실이지만 이것이 두 대의 서버를 관리한다는 의미는 아닙니다.

요점은 CDN이 서버와 사용자 브라우저 사이의 가상 계층으로 사용된다는 것입니다. 이 계층은 서버에 대한 브라우저 요청을 포착하고 서버를 대신하여 캐시된 파일로 응답합니다.

어떤 경우에는 정적 파일을 CDN에 직접 업로드하여 서버의 부하를 완전히 제거할 수 있습니다. 이 기사에서는 두 개의 서버에 파일을 업로드하고 작업할 필요가 없도록 서버에서 CDN 정적 파일을 가져와 캐싱하는 프로세스를 살펴보겠습니다. 다른 주소.

사용자 정의 애플리케이션에 CDN을 설치하는 방법

많은 서비스가 있지만 가장 일반적으로 사용되는 것은 Amazon AWS 및 MaxCDN입니다. 오늘은 MaxCDN 서비스에 대해 살펴보겠습니다.

1단계: CDN 선택 및 사이트 등록

귀하의 사이트에 CDN이 필요하다고 판단되면 등록해야 합니다. 여러 가지 방법이 있지만 각각의 장단점을 따지지 않기 위해( 좋은 주제다음 기사에서는) 다양한 서비스를 제공하겠습니다.

등록의 주요 목적은 다운로드 영역을 만드는 것입니다. CDN의 다운로드 영역은 지원되는 모든 파일이 포함된 버킷으로 생각할 수 있습니다. 파일을 처음 요청할 때 지정한 디렉터리에서 데이터를 자동으로 가져옵니다. 사용자의 경우 CDN의 하위 도메인이나 CDN을 가리키는 사용자 지정 도메인에서 파일이 다운로드됩니다. 휴지통에 있는 데이터는 지정된 기간이 지나면 자동으로 삭제됩니다.

2단계: CDN에 대한 URL 만들기

CDN URL은 설정 후 모든 파일이 다운로드되는 주소입니다. 경험상 좋은 규칙은 파일을 쉽게 검색하고 데이터베이스에 있는 모든 기존 파일의 주소를 바꿀 수 있도록 URL에 간단한 이름을 사용하는 것입니다.

다른 하위 도메인과 마찬가지로 cname 레코드를 지정해야 합니다. DNS 설정당신의 호스트.

3단계: 파일을 CDN으로 지정

CDN 주소에 대한 변수를 생성하는 방법과 이를 사용하여 URL 앞에 정적 리소스를 프로그래밍 방식으로 삽입하는 방법을 살펴보겠습니다. 이것이 필요한 이유: ​​(1) 마크업에서 실수하기가 더 어려워지고 (2) 변경해야 할 URL 작업이 더 쉬워집니다.

이를 위해서는 정적 리소스 URL의 왼쪽에 추가할 CDN에 대한 전역 변수가 필요합니다. 나중에 작업하기 쉽도록 PHP와 JS 모두에서 변수를 생성하겠습니다. 이 변수는 원하는 경우 CDN을 쉽게 비활성화하는 데에도 도움이 됩니다. 서버에 주소를 반환하려면 값을 /로 바꾸면 됩니다.

다음 예는 단지 예일 뿐이므로 사용해서는 안 됩니다. 실제 사용 사례는 다를 수 있습니다.

안녕하세요 월드! /* 스크립트 내부에서 CDN을 사용하기 위한 전역 자바스크립트를 정의해 보겠습니다. */ var cdnURL = ""; js/main.js">

무료 프로그램과 유용한 팁의 세계 2024 whatsappss.ru