Get Your Landers Up And Running On A CDN – The Simplest, Lowest-Cost Way Ever!

One of the more confusing parts of getting started in AM is setting up your hosting environment. That’s arguably even more complicated these days – not only do you need to set up a server, but you’ll also need to set up a Content Delivery Network (CDN) to make sure your landers get to every geo as fast as possible.

However, things are getting easier. Zeno and Vortex recently put me on to the simplest, cheapest way to get your landers set up on a CDN I’ve ever seen.

We’ll be using Amazon’s S3 and Cloudfront services. S3 used to be horrendously techie and very hard to use, but it’s had a total revamp lately, and it’s now incredibly easy and fast. No coding, not even any dedicated tools – just set and go in your web browser.

Let’s Go!

Who This Tutorial Is For

This tutorial gives you a fast, easy onramp to getting your landers onto a decent CDN so that you can get on with testing your campaigns. It’ll mostly be useful for new affiliates, although anyone wanting to move to a CDN-based approach can use it to achieve solid results.

This server setup is a Minimum Effective Dose approach. It gives the fastest, most cost-effective approach to a hosting solution that’s good enough that you don’t need to worry about it. You can get started and concentrate on learning more core aspects of AM, or rapidly upgrade your single-server approach. If you want to go beyond that to optimise your setup, see “Addendum: Other CDNs” below.

You’ll need to be using voluum or another hosted tracker for this to work. If you’re using a self-hosted tracker like Prosper or thrive, you’ll still need a full-on server.

What You’ll Need And What You Won’t

You’ll need to have a landing page that you’d like to deploy ready to go. That can be for any kind of campaign – pop, mobile, whatever. The landing page can’t have any PHP or other server-side code on it, but Javascript is fine.

You’ll need to have registered a domain name. You’ll also need an Amazon account.

And that’s it! You don’t need any coding or even HTML knowledge, and you don’t need any tools – all of this setup is done through the Web.

Stages Of The Tutorial

Firstly, we’ll set up an S3 bucket. That’s confusing Amazon-speak for setting up a folder on the Web where you can store your files, much like Dropbox – in fact, it’s the service Dropbox runs on. You can actually use this “bucket” to make your landing pages accessible directly to your visitors, but that’s not a very good idea, as S3’s Web serving is pretty slow.

Secondly, we’ll upload your lander to this “bucket”. We don’t need an FTP tool for this – it’s all doable in the browser.

Thirdly, we’ll set up a “distribution” on Cloudfront, Amazon’s CDN. Because we’re doing all this within the Amazon infrastructure, this is very quick and easy. It’ll take about 15 minutes to propagate through Amazon’s systems: after that, anything you put in your “bucket” will be accessible anywhere in the world through the CDN, which will ensure that the files are served from a server close to your visitors.

Finally, we’ll connect your domain name to all this, meaning that if you upload a file called “lander.html” to your bucket, it’s then accessible on the web at http://www.youdomain.com/lander.html .

And that’s all we need to do to set up a reasonably optimised CDN-based solution for landing pages.

Stage 1: S3 Bucket

This is actually the most complicated stage of the entire process, but even this doesn’t take more than 8 minutes or so.

Go to https://aws.amazon.com/s3/ and sign up or sign in. You should end up (after the signup process) at a page that looks like this:

Yeah, Amazon has a lot of stuff – but we don’t need most of it. Click on the S3 button. You’ll go to a mostly empty page with a button called “Create Bucket” in the top left.

Click it, and you’ll be presented with this screen:

In “Bucket Name”, put your domain name – so, “www.mydomain.com” or whatever you have.

TIP: You don’t actually have to use your domain as the bucket name – it just makes it easier to organise things. So if your domain’s already taken as a bucket name, choose whatever you like.

The Region you choose isn’t relevant – choose the default or pick your favourite area!

Click “Create”. Now you’ll be presented with a screen like this:

There are two things to do here. Firstly, click on “Static Website Hosting”, and choose “Enable Website Hosting” from the panel that appears. Set the index page to “index.html” and the error page to “404.html”. Then hit “Save”.

Copy the website address it gives in this section to a text file – we’ll need it later.

The second thing is a little more complex, and is about the only complex part of the operation. Click on “Permissions”, and then click on “Add Bucket Policy” on the panel that appears. You’ll see a textbox appear in the middle of the screen.

What we’re going to do here is set all files in the bucket to be accessible from the Web by default. If we don’t do this, we’ll have to set “make public” individually on everything we upload, which is a huge pain in the ass and very easy to screw up. Unfortunately, this is the one part of the process that doesn’t have a nice easy graphical interface – instead, we have to copy some code. Fortunately, it’s the same code every time.

TIP: You don’t need to understand this code at all! If you don’t understand what it’s doing, don’t give it a second thought: this is some Deep Techie stuff and its precise meaning isn’t relevant to what we want to do. Just copy-paste it, change the bucket name to your bucket name, and it’ll work: no coding or understanding of the code required.

Copy-paste the following into that textbox (changing “MYBUCKET” in the code to the name of your S3 Bucket):

Code:
{
  "Version":"2012-10-17",
  "Statement":[{
	"Sid":"PublicReadGetObject",
        "Effect":"Allow",
	  "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::MYBUCKET/*"
      ]
    }
  ]
}

Then hit “Save” at the bottom.

That’s our bucket set up!

Now, let’s upload our first landing page.

Stage 2: Uploading A Landing Page

Click on your bucket name on the left-hand side of the page – you’ll go to a screen like this:

Click on “Actions”, then click on “Upload”.

In the new window that comes up, click on “Add Files”, and select all the files for your landing page – including images and any Javascript or styles. Then click “Start Upload” at the bottom right.

And that’s it: your landing page is now publicly accessible. Go to the website address you saved in Stage 1, with the filename of your lander at the end of it: for example,

Code:
www.mydomain.com.s3-website-us-west-1.amazonaws.com/landingpage.html

Remember that the filename is case-sensitive!

You should see your lander there!

Next, we add in the CDN magic.

Stage 3: Cloudfront Setup

At the top left of the page, click on “Services”, then hover over “Storage And Content Delivery”. You should see “Cloudfront” listed – click on it.

Click “Create Distribution” at the top left – it’s the big blue button.

You’ll be taken to a page where you choose between “Web” and “RTMP” – choose “Web” by clicking “Get Started” underneath the “Web” section.

You’ll be taken to this page, which more or less screams “If you are not actually wearing a propeller hat RIGHT NOW, Go No Further!”. Don’t panic; it’s far simpler than it looks:

Click in the text box next to “Origin Domain Name”. You’ll see it bring up a list of your S3 buckets – choose the one you just created.

And you’re done. No, really. All the other options are, well, optional. Scroll down to the bottom and click “Create Distribution” on the bottom-right.

The Cloudfront page will come up again, looking a bit like this:

“In Progress” will change to “deployed” in about 15 minutes, at which point your files will be accessible. But in the meantime, let’s set up your DNS!

Firstly, in your Cloudfront panel, click on your distribution, go to “Distribution Settings”, then click “Edit” at the top left.

In “Alternate Domain Names(CNAMEs)”, add the domain name you intend to use (including www. if you plan to send traffic to, for example, www.mydomain.com). Hit “Yes, Edit” at the bottom right. Again, this will take about 15 minutes to take effect.

Copy the “domain name” from here to a text file – you’ll use it in the next stage.

Setting Up Your DNS

You should set up a CNAME record for your www.domainname, with the domain name you copied from Cloudfront as the record in question.

How exactly you do that will vary from DNS provider to DNS provider, but in 99% of all cases they should have good documentation available showing exactly how to do it.

Our #1 recommended approach here is to use Amazon’s own DNS provider, Route 53 – which has the advantage of being super-fast.

If you’d prefer not to do that, you can also use another DNS provider. Here are some non-affiliate specific tutorials on how to add a CNAME record on:

If you have problems with any other DNS providers, let me know below and I’ll help out!

And That’s It!

Once you’ve gone through all these steps, wait about half an hour, and check that the Cloudfront distribution is now listed as “deployed”.

Now, go to your domain name followed by your landing page filename – http://www.mydomain.com/landingpage.html .

You should see that immediately appear. It’s now being served through the CDN, so no matter where in the world you are, it should also load fast – at least the second time you load it and beyond.

To check out how fast your lander now loads from around the world, you can use a tool like https://www.dotcom-tools.com/website-speed-test.aspx .

And that’s it! We’ve set up your “server” (your S3 bucket) and configured a CDN to work with it. From now on, you can just use the Upload tool in stage 2 to upload your landers to your Bucket, and they’ll appear on the Web instantly, all ready with CDN goodness to serve any geo in the world.

One quirk – if you need to delete a file from Cloudfront, it’s tricky to do. If you have to, you can submit an Invalidation Request, but that takes 30 minutes or so to work. The simplest workarounds for the deletion problem are:

  • If you’re testing your lander and aren’t ready to send traffic to it yet, check it through your S3 bucket address, NOT your domain name or Cloudfront address. This means it doesn’t get loaded into Cloudfront, and will change whenever you change it. Only use your domain name when you’re ready to go.
  • If you do need to change something on Cloudfront quickly, just upload the updated version of whatever you changed as a slightly different filename – Landingpage_v2.html, for example. That will then be fetched by Cloudfront as normal.

I hope that was useful! If you have any questions, comments, or suggestions on how to improve the process – I’m comparatively new to Amazon’s services – do comment below!

This entry was posted in compaigns, techniques, Uncategorized. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.