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
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
CondFront control panel

Thanks

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

Further reading