Kontaktujte nás

Jak vytvořit profesionální CDN za pár hodin

Jak vytvořit profesionální CDN za pár hodin

DevOps, Front-end

19. 11. 2020

CDN je skvělá vychytávka. Pomůže oddělit statický obsah od samotné aplikace nebo zvládne z jednoho úložiště efektivně distribuovat soubory lidem po celém světě. Zní to jako spousta práce? Ukážeme si, že s Amazon Web Services to může zabrat pouhých pár hodin. A navíc bez programování.

Nepotřebuji CDN pro malý projekt

Hlavní výhodou CDN (Content Delivery Network) je schopnost cachovat data v různých geografických lokacích, a tím snížit odezvu serveru. To už samo o sobě zní dobře. Možná si ale říkáte, že tuhle vlastnost pro svoje menší a střední weby nevyužijete.

Velikost webu nám nemusí pro vytvoření CDN za pomocí služeb Amazon Web Services nutně vadit. Je velmi výhodné na aplikačním serveru neřešit ukládání souborů či velikost pronajatého diskového prostoru. Mít soubory (například obrázky) uložené na samostatném serveru je navíc značně pohodlné pro lokální vývoj. Všichni členové týmu mají přístup ke stejnému statickému obsahu, aniž by museli složitě synchronizovat data.

A pokud se rozhodnete pro expanzi do další země – nebo rovnou do celého světa – nemusíte vůbec nic řešit. Máte k dispozici optimalizovanou CDN napojenou na desítky datových center po celém světě.

Serverless

AWS (Amazon Web Services) nabízí řadu služeb s takzvaným serverless přístupem. To znamená, že služba abstrahuje náročnou správu serveru a vy se můžete starat o to, co vás opravdu zajímá. Odpadají náklady na provoz serveru, mzdu serverového experta a především na opravu chyb. Při vývoji vlastního řešení bývá totiž infrastruktura často náchylná na chyby.

A není to drahý?

Naše typická česká nátura nás vede k tomu, abychom si položili tuto otázku jako jednu z prvních. A to je dobře, cena je samozřejmě důležitá. Při použití serverless přístupu platíte pouze za prostředky, které opravdu využijete. V případě úložiště souborů platíte za každý uložený gigabajt a u výpočetních funkcí platíte za každých 100 milisekund výpočtu.

A v tom je právě ta výhoda. AWS navíc nabízí tzv. „free tier“ – bezplatné kapacity pro různé služby do určitého limitu používání. S malým projektem na tyto limity pravděpodobně ani nedosáhnete, a tím pádem máte CDN naprosto zdarma. V případě větších projektů může být provoz naopak dražší než u konkurence, ale to je právě kompenzace za režii spojenou se správou serveru.

S3 a CloudFront

Jednou z pravděpodobně nejpoužívanějších služeb na AWS je S3 – prosté úložiště souborů. Toto úložiště v administraci založíte na pár kliknutí. Obrovskou výhodou S3 je škálovatelnost – úložiště se rozšiřuje zcela automaticky, podle toho, kolik dat na něj uložíte. Samotné úložiště ale k ničemu není. Soubory chceme uživatelům posílat inteligentním způsobem.

K tomu slouží služba CloudFront. Jedná se o službu poskytující CDN pro vaše S3 úložiště. Soubory, které CloudFront poskytne, zacachuje a replikuje na servery po celém světě. I když se vaše úložiště nachází v Evropě, člověk v Jihovýchodní Ásii se k němu dostane se stejnou odezvou jako vy v Česku.

Jak vytvořit profesionální CDN za pár hodin

Změna velikosti obrázku za běhu

Dostáváme se k hlavnímu důvodu, proč jsme začali pro ukládání obrázků v MadFox Design používat AWS. V dnešní době jsou v kurzu responzivní obrázky. Vytvářet a uchovávat někdy i desítky různých verzí jednoho obrázku může ale celé používání responzivních obrázků značně znepříjemnit.

Proveďme si tedy krátké shrnutí. Máme pro obrázky snadno rozšiřitelné úložiště. Máme inteligentní CDN, které obrázky cachuje a replikuje do celého světa. My ale potřebujeme generovat obrázky v různých velikostech a formátech. Nemohlo by to za nás dělat také AWS? Samozřejmě, že mohlo. Od toho je tu Lambda@edge.

Za pomoci Lambda@edge můžeme spouštět výpočetní funkce pro CloudFront. Při vyžádání obrázku si pomocí parametrů nastavíme, v jaké velikosti obrázek chceme. Spustí se funkce, která prověří, jestli je už obrázek v takové velikosti na serveru uložený. Pokud není, dokáže ho sama vygenerovat a soubor odešle. Pokud už má obrázek v požadované velikosti k dispozici, nedělá nic. Možná to zní složitě, ale bavíme se tu o 100 řádcích kódu v Javascriptu.

S responzivními obrázky jsme si pohráli například při realizaci projektu Travel Fever.

Jak vytvořit profesionální CDN za pár hodin

Závěrem

Máme CDN poskytující statické soubory efektivně po celém světě a dynamický image resizer, který nám poskytuje obrázky v libovolné velikosti na vyžádání. Tohle všechno jsme dokázali zvládnout téměř bez programování. Nejlepší na tom je, že jakmile jsme si jednou vytvořili potřebné služby a naprogramovali image resizer, můžeme stejné nastavení použít na libovolném množství projektů. A to s úžasnou škálovatelností a pružností.