How to use Iconic with Amazon S3 and CloudFront

Iconic is an incredible icons system. But this not as simple as downloading it, uploading it on a S3 bucket, setting up a CloudFront and here “here you go!”.
Here’s how I setup all that stuff to make it works with as a CDN for this blog.

I will not dive into technical infos. You will find all you needs in the links at the end of this article. I recommand Gerard Vivancos’ article. It explain very well all you need to know.

Settings

S3 Bucket

Editing the CORS configuration in bucket's permissions panel

Original CORS configuration

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

New configuration

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="https://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>*.alienlebarge.ch</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Setting CloudFront

CondFront control panel

Thanks

Thanks to the Iconic team for the wonderfull work and support !