전체 글 30

패스틀리(Fastly), Image Optimizer 서비스의 유용한 옵션

지난번 포스팅에서는 Image Opimizer(이하 IO)에 대해서 간단하게 소개해 드렸습니다. 이번 포스팅에서는 IO에서 사용 가능한 몇가지 옵션에 대해서 소개해 드리도록 하겠습니다. 지난번 포스팅 에서 말씀드린 것과 같이 IO가 활성화가 되어 있고, IO를 적용할 이미지에 대해서 x-fastly-imageopto-api request header를 설정하는 것으로 이미지를 최적화 하여 요청하는 클라이언트에게 제공하는 것이 가능합니다. IO에는 URL에 쿼리스트링을 설정하는 것으로 다양한 효과를 사용할 수 있습니다. 링크를 클릭하시면 해당 옵션이 적용된 이미지를 확인하실 수 있습니다. bg-color: bg-color 매개변수는 패딩을 적용하거나 투명 픽셀을 교체할 때 사용할 이미지의 배경 색상을 설정..

패스틀리(Fastly), Image Optimizer 서비스에 대해서

PC시대를 벗어나 모바일 시대로 들어오면서 많은 웹사이트들의 큰 고민 중의 하나는 웹사이트에서 가장 많은 크기를 차지하는 웹 이미지를 어떻게 효과적으로 클라이언트들에게 전달할까라는 것이다. 집에서 데스크 탑이나 노트북을 통해서 wi-fi나 wired를 통해서 웹사이트를 이용할 때에는 제한 없는 전송량 사용량과 높은 속도에 대한 퀄리티 때문에 웹사이트에서 이미지를 볼 때 극히 특별한 케이스를 제외하고는 너무 느려서 접속 못하겠다라는 일은 많지 않았을 것이다. 그렇지만, 모바일 시대로 접어들면서 많은 클라이언트들은 PC보다 성능이 떨어지는 모바일 기기를 사용하여 웹사이트에 접속 하는 일이 많아 졌고, 특히 모바일 망을 통해서 접속 시에는 wi-fi나 wired에 비해서 굉장히 떨어지는 인터넷 환경에서 해당 ..

패스틀리(Fastly), Host header에 따라 Origin서버 Routing하는 방법

패스틀리에서 서비스를 만들면 하나의 서비스에서 여러개의 도메인을 운영할 수 있습니다, 이 경우에 복수의 도메인이 한대의 오리진만을 사용하는 경우도 있습니다만, 한 서비스에서 복수의 도메인과 여러 대의 오리진을 운영하는 경우도 있습니다. 이 경우에 Client에서 요청되는 Host header에 따라서 해당 리퀘스트를 적절한 오리진으로 Routing해서 운영해야 할 경우가 있습니다만, 이런 경우 활용 할 수 있는 설정에 대해서 안내해 드리도록 하겠습니다.  위와 같이 복수개의 도메인을 복수개의 Origin과 같이 한 서비스에서 사용해야 하는 경우가 있습니다, 이럴 경우 여러가지 케이스가 있겠지만 예를들면 www.foo.com  의 Host header로 요청이 오면 origin.foo.com 으로 www...

패스틀리(Fastly), NG WAF에서 특정 IP차단하는 Rule만들기

패스틀리 NG WAF에는 여러가지 조건을 활용하여 이에 일치하는 클라이언트의 리퀘스트에 대해서 제어를 하는 것이 가능합니다. NG WAF에는 Corp와 Site라는 개념이 있고, 이에 따라서 Corp rules와 Site rules에 클라이언트의 리퀘스트를 제어하는 Rule를 만들 수 있습니다.  Corp에 대해서는 예를들면 A라는 회사를 위한 NG WAF계정이 있다면, Corp는 이 회사 계정 자체를 지칭하는 의미로 Corp rules에 설정되는 Rule의 경우에는 이 계정에 귀속된 모든 도메인에 대해서 적용이 됩니다. 예를들면 ABC라는 Corp가 있고 WAF를 적용해야 하는 Domain이 100개가 있다고 가정할 경우, 100개의 모든 도메인에 동일하게 적용해야 할 Rule이 있다면 Corp rul..

패스틀리(Fastly), NGWAF 소개

포스팅 하는 내용의 출처는 아래의 블로그임을 알려드립니다. 이번에는 아래 내용의 블로그를 번역해서 포스팅하도록 하겠습니다. https://qiita.com/AtsushiFukuda/items/16b143a849d442d182da Fastly 次世代 (Signal Sciences) WAF について - QiitaはじめにFastly の次世代 WAF (以降 NG-WAF)は CDN などの Edge Cloud Platform を提供する Fastly が2020年に買収した Signal Scien…qiita.com NG WAF에 대해서Fastly의 차세대 WAF (이하 NG-WAF)는 CDN등의 Edge Cloud Platform 를 제공하는 Fastly가 2020년에 매수한 Signal Sciences사의 솔루션을 베..

무료로 제공하는 TLS Certificate로 패스틀리(Fastly) CDN을 설정해 보자

예전에는 Trial account에서는 Fastly에서 제공하는 무료 TLS certificate(Let's Ecrypt)를 사용하지 못하고 사용하기 위해서는 Paid Account로 전환을 해야 했지만, 이제는 Trial Account에서도 2개의 도메인까지는 Let's Ecrypt혹은 Fastly에서 발급하는 Certainly라는 인증서를 사용할 수 있습니다. 이번 포스트에서는 어떻게 인증서를 발급하고 그것을 서비스로 연결을 해서 사용할 수 있을지에 대해서 알아 보도록 하겠습니다. 먼저 새롭게 생긴 기능 부터 소개하도록 하겠습니다. 그 동안 UI에도 많은 변화가 생겨서 최초 Service를 생성할 때에 기본적인 항목들을 설정할 수 있게 되었습니다. 위의 화면을 기준으로 관련 항목에 대해서 차례대로 설..

패스틀리(Fastly), Compute@Edge를 사용해 보자 #6

이번 포스팅에서는 JavaScript compute@edge를 활용해서 부정한 User-Agent를 차단하는 code를 알려드리도록 하겠습니다. 아래의 코드와 Fiddle를 참고해 주세요. 감사합니다. https://fiddle.fastly.dev/fiddle/2b347a66 Fiddle - Fastly fiddle.fastly.dev addEventListener('fetch', (event) => event.respondWith(handleRequest(event))); async function handleRequest(event) { // Get the request from the client. const req = event.request; const userAgent = req.headers..

패스틀리(Fastly), Compute@Edge를 사용해 보자 #5

이번에도 GeoIP block 관련해서 JS Compute@Edge로 구현하는 방법에 대해서 포스팅합니다. Edge Dictionaries에 포함되어 있으며, value가 block인 Geo country만 블럭 됩니다. 지난번 포스팅과 같이 Fiddle에 보시면 오른쪽 위에 URL을 입력하는 부분의 밑에 Data populated라는 메뉴가 있으며 해당 메뉴에 Edge Dictionaries 로 구현할 Key와 Value를 입력하실 수 있습니다. 관련 main code는 아래와 같으며, 첨부의 fiddle 도 참고해 주시길 바랍니다. 감사합니다. https://fiddle.fastly.dev/fiddle/d2ae5acd Fiddle - Fastly fiddle.fastly.dev /// addEvent..

패스틀리(Fastly), Compute@Edge를 사용해 보자 #4

이번에는 GeoIP block 관련해서 JS Compute@Edge로 구현하는 방법에 대해서 포스팅합니다. Edge Dictionaries에 포함되지 않는 Geo Country는 블럭됩니다. Fiddle에 보시면 오른쪽 위에 URL을 입력하는 부분의 밑에 Data populated라는 메뉴가 있으며 해당 메뉴에 Edge Dictionaries 로 구현할 Key와 Value를 입력하실 수 있습니다. 관련 main code는 아래와 같으며, 첨부의 fiddle 도 참고해 주시길 바랍니다. 감사합니다. https://fiddle.fastly.dev/fiddle/b318387a Fiddle - Fastly fiddle.fastly.dev /// addEventListener("fetch", event => ev..

패스틀리(Fastly), Compute@Edge를 사용해 보자 #3

이번 시간에는 간단하게 Request를 보낸 Client의 Geolocation정보를 출력하는 것을 해보도록 하겠습니다. Fastly에서 제공하는 Javasript-compute SDK에서 어떤 기능이 제공되는지 확인할 수 있습니다. https://js-compute-reference-docs.edgecompute.app/docs/fastly:geolocation/getGeolocationForIpAddress getGeolocationForIpAddress | @fastly/js-compute The getGeolocationForIpAddress() function is used to retrieve geolocation information about the given IP address. js-c..