AWS Serverless URL Shortener - Part 2

Posted • 3 minute read

Part 2 of this guide goes over the finishing touches, including a GUI for the URL shortener & enabling https.

Amazon Certificate Manager

As long as you have your url hosted in Route53, you can utilise Amazon’s free https service.

To start with, navigate to Amazon Certificate Manager and ensure you’re in the North Virginia - US East region (API Gateway only allows certificates from this region).

If you’re like me and are only using this domain name for this url shortener, you may not have emails setup for the domain.
This handy S3 method will do the job for the required domain authorisation.

Then, inside API Gateway, navigate to Custom Domain Names and select Create Custom Domain Name:

AWS Serverless URL Shortener - Part 2 https://d33wubrfki0l68.cloudfront.net/b9980dc4b51c90f130f1851252d933acd6997185/48d5f/images/uploads/apigateway-3.png

In the settings enter:

  • Your Domain Name
  • Select Edge Optimized
  • Select your ACM Certificate for your domain

Then under Base Path Mappings, enter / as Path, the destination as your API with production selected:

AWS Serverless URL Shortener - Part 2 https://d33wubrfki0l68.cloudfront.net/24e4d797db99a7477bc42d45ad29b0e024371f6c/bd09b/images/uploads/apigateway-4.png

Testing

Now you should be able to create a test short url, try a curl request like below:

1
2
>
> curl -X POST https://yoururl.com/ -H 'x-api-key: XXXXXXXXXXXXXXXXXXX' -d '{"url":"http://www.website.com"}'

You should get a https short url returned, try entering the url into a browser and it should redirect to the long url.


GUI

Whilst curl requests are fine, another requirement of this tool was for the sales staff to be able to create short urls adhoc. This meant creating a gui, fortunately as we’ve developed a full API and AWS allows static site hosting via S3, this is an easy task.

In S3, create a new bucket with a name similar to shortener.yoururl.com, this will be the gui’s web address. Leave the rest of the settings as default.

AWS Serverless URL Shortener - Part 2 https://d33wubrfki0l68.cloudfront.net/ee2d255904279f4d006e3b6834fe582e7563280f/ea459/images/uploads/s3-1.png

Navigate to the bucket’s properties and enable Static website hosting Under Index document enter index.html

AWS Serverless URL Shortener - Part 2 https://d33wubrfki0l68.cloudfront.net/a4a7b7a5f8721eabc8ad1c03b6edfe5ad4d0f955/5b753/images/uploads/s3-2.png

Download the website from here Edit the index.html on line 23 to your url:

AWS Serverless URL Shortener - Part 2 https://d33wubrfki0l68.cloudfront.net/94aba9365b2f541f3479d0c0b552a371d0b1966d/d6d3f/images/uploads/s3-3.png

Then upload the site to your bucket.

Navigate to Route53 to create the url for your bucket. Create an A record with the same name as your newly created bucket, Select Alias and then enter the S3 website endpoint:

AWS Serverless URL Shortener - Part 2 https://d33wubrfki0l68.cloudfront.net/c36971e08416befc9bc054b8d8a20b08aeb2e440/d605f/images/uploads/s3-4.png

You should then be able to navigate to the url, enter your API key and a url (remember to include http:// or https://) and it will return a shortened url:

AWS Serverless URL Shortener - Part 2 https://d33wubrfki0l68.cloudfront.net/2cb5e2f757beaa54a30c86b3841d431c87ad5256/abecb/images/uploads/s3-5.png

Reporting

Whilst you can go into the Dynamodb table and lookup clicks for a short url, we wanted something programatic so other systems could poll data.

Navigate to API Gateway and create a sub method of {token} called clicks:

AWS Serverless URL Shortener - Part 2 https://d33wubrfki0l68.cloudfront.net/7595ede10326e3025305777e3c6b86e893676911/f52c0/images/uploads/apigateway-5.png

Then upload this lambda function and link it as the Integration Request.

Now when you submit a curl request like:

1
curl -X POST https://yoururl.com/token/clicks -H 'x-api-key: XXXXXXXXXXXXXXXXXXX' -d

The lambda function will return the number of clicks for that short url.