How to launch a fast, cost-optimized serverless site with continuous deployments using Bitbucket, AWS S3, Route53, and CloudFront

Paul Kamau
Jan 21, 2019 · 12 min read
source: unsplash

Intro

Traditional architecture for static websites involved acquiring a domain through popular name registrars, signing up for hosting packages based on guesses of disk space, or provisioning your own server, making estimates on storage need and network capacity and then loading your own code or installing the latest version of WordPress to run your site.

Why Serverless architectures work

Let’s quickly start with some definitions.

  • Enhanced scalability: Infrastructure bottlenecks that are unable to handle user traffic are automatically addressed.
  • Accelerated performance: Latency due to throttled computing resources and network capacity are non-existed.
  • Focus on core competencies: Developers and business can focus establish expertise on their product and less on infrastructure development.
  • Optimized cost: Operational expenses are applied directly to product research, development and market release and less on infrastructure.

Here’s what we’re building

We’ll create a CI/CD pipeline that begins with a single commit of your code into your master branch, this will begin a cascade of events as follows:

  1. Your code and assets will be stored on Amazon S3 eliminating any guesses for storage capacity and availability
  2. Route53 will be used to ensure that all requests to your domain are routed to the designated AWS services and infrastructure.
  3. Amazon CloudFront service will ensure that your site has global distribution and easily accessible from the closest Edge location to the user.

Here’s how that looks like:

Let’s begin

Bitbucket | Pipeline configurations and deployments

Bitbucket pipelines is an integrated CI/CD services that allow developers to build, test and deploy their code based on the configuration.

  1. Modify the global account variables

Let’s quickly set this up

  1. Prepare our repository with site content and the .yml files
the .yml files live at the root of the folder “static_site”.
bitbucket_pipelines.yml file
s3_website.yml file
pipeline configs for bitbucket

Stage your code

All the pieces are set up, but not completely ready. Go right ahead and commit your code to the master branch. The pipeline will fail because the S3 bucket and credentials are currently not set up yet.

failed deployments due to missing components

Continuous Deployments courtesy of Bitbucket Pipelines

After your bucket and S3 access is granted to bitbucket and the branch deployment tag set to automatic, then the bitbucket pipeline will automatically begin as soon as your code is committed to your master branch.

Bitbucket pipeline deployment status

Amazon Web Services (AWS)

AWS provides on-demand delivery of computing power, database storage, applications, and other IT resources on a pay-as-you-go pricing.

  1. S3
  2. Route 53
  3. Certificate Manager
  4. CloudFront
  5. Cost Explorer

Identity and Access Management

AWS IAM enables you to manage access to AWS services and resources securely. Using IAM, you can create and manage AWS users and groups, and use permissions to allow and deny their access to AWS resources.

AWS S3

S3 is the oldest and most popular service from AWS. It is an object storage service that offers industry-leading scalability, data availability, security, and performance.

  1. Configure the bucket properties to allow for “Static web hosting”
  2. Acquire the Endpoint URL that will be used in CloudFront

Let’s quickly build what we need

  1. Creating buckets on S3 is a breeze. To do this, navigate to services > s3 > click on “create a bucket” > enter the bucket name e.g. “mysite.com” (note: this is a unique value across all of AWS) > select a region closest to your audience for example “US East (N. Virginia) > click “create”.
S3 bucket for “mysite.com”

Route 53

Amazon Route 53 is a highly available and scalable cloud Domain Name System (DNS) web service. Amazon Route 53 effectively connects user requests to infrastructure running in AWS — in our case — S3 buckets — and can also be used to route users to infrastructure outside of AWS.

  1. Create the Record set types that will work with CloudFront

Let’s begin.

  1. Create a hosted zone for our domain
  1. Manually add your existing domain to the hosted zone list on Route53

Certificate Manager

AWS Certificate Manager is a service that lets you easily provision, manage, and deploy public and private SSL/TLS certificates for use with AWS services and your internal connected resources.

SSL Cert Email from AWS

CloudFront

Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency, high transfer speeds, all within a developer-friendly environment.

  1. Redirect your domain from your name providers to AWS route53 and CloudFront

Let's begin

  1. Create distribution
CloudFront dashboard
the CloudFront distribution for your content
Update your DNS settings on your domain to point to the CloudFront distribution name

Bringing it all together

So finally, with all these pieces in place, the final orchestration from the initial request made to the end user viewing the site content would look like this:

Managing cost over time with CostExplorer

spend summary for AWS, CloudFront, S3, and Route53 over months

Conclusion

The rise in adoption of serverless architectures, with inbuilt scale, cost optimization and performance acceleration, among other benefits, will have a transformational impact on businesses, developers and architects across a wide range of systems and applications

https://paulkamau.com

teamRuggedIO

Official release / update announcements for all Rugged I/O…