18
Create a serverless website on AWS with Serverless plugins
The Serverless Framework allows us to create serverless websites. These websites use the S3, CloudFront, Route 53, and Certificate Manager AWS services. We can set up all four on AWS using Serverless plugins.
A serverless website is a website that runs without a server. It may seem impossible because every website needs a server. Object storage services (e.g., S3) allow serving HTML files and their supporting files. The browser just needs the HTML files, and it will fetch all the related files based on the HTML code. Think of simple HTML websites with dynamic code (e.g., PHP or Python).
You will need static web page files (i.e., HTML, JavaScript, CSS, and image files). If the website correctly displays in a browser by double-clicking the file on your computer, it will work as a serverless website.
You will need an AWS account. You will need a credit card to sign up for AWS. AWS accounts are free, but you pay for any services that you use. Fortunately, serverless websites are very cheap. I host three serverless websites for $0.05 per month.
You will probably want a custom domain to have a readable website address. You can buy one on AWS or use a domain name provider. This post assumes you already have a custom domain.
You will need the Serverless Framework to follow along with the rest of this post. Use the Serverless docs to install and set up the Serverless Framework.
Route 53 is the AWS service that deals with domain names and DNS records. We will need to set up a Route 53 hosted zone to create the domain name records required to route the custom domain name to the serverless website.
We will use a Serverless Framework plugin to create the hosted zone: the serverless-hosted-zone plugin.
To install it:
cd to-my-serverless-project
npm install --save-dev serverless-hosted-zoneTo add it to the serverless.yml configuration file:
plugins:
# add to the previous entries
- serverless-hosted-zone
custom:
# add to the previous entries
# see the documentation for all the options
hostedZone:
name: customdomain.com. # Note the trailing dotTo create the hosted zone:
sls create-zoneNow we have a hosted zone in our AWS account for the customdomain.com domain name.
The AWS Certificate Manager service allows us to create a free certificate. That way, we can use HTTPS for our serverless website (and make Google and our website visitors feel happy and safe).
We will use a Serverless Framework plugin to create the hosted zone: the serverless-certificate-creator
plugin.
To install it:
npm i --save-dev serverless-certificate-creatorTo add it to the serverless.yml configuration file:
plugins:
# add to the previous entries
- serverless-certificate-creator
custom:
# add to the previous entries
# see the documentation for all the options
customCertificate:
certificateName: customdomain.com
idempotencyToken: customdomaincom
hostedZoneNames: customdomain.com. # Note the trailing dotTo create the certificate:
sls create-certThe plugin creates the certificate and registers the DNS records in the hosted zone.
We will assume you already have the static HTML files you want to use for your serverless website. We will create an S3 bucket and a CloudFront distribution for our website. S3 is the object storage where we upload and serve our website files. CloudFront is a Content Delivery Network (CDN) to efficiently serve the website files. We will associate the certificate to the CloudFront distribution.
We will use a Serverless Framework plugin to create the S3 bucket and CloudFront distribution: the fullstack-serverless
plugin.
To install it:
npm install -g serverlessTo add it to the serverless.yml configuration file:
plugins:
# add to the previous entries
- fullstack-serverless
custom:
# add to the previous entries
# see the documentation for all the options
fullstack:
domain: customdomain.com
certificate: arn:aws:acm:us-east-1: # use the actual ARN
bucketName: customdomain.com # the desired bucket name
distributionFolder: my-website-files-dir # assumes it is in the same directory
indexDocument: index.html
errorDocument: error.html
singlePageApp: true
compressWebContent: trueTo deploy your static HTML website:
# no-generate-client option because only using static files
# omit if you are using a reactive framework (e.g., React, Vue, Nuxt, Next)
serverless client deploy --no-generate-clientIf you bought your domain name within AWS Route 53, there is nothing left to do. AWS created automatically created the customdomain.com. hosted zone for you and the plugin checked for it.
If you bought it somewhere else, you should update the DNS records with that provider and point it to the CloudFront distribution.
You may have noticed the plugin output a DNS name (e.g., abc1d2efghij4.cloudfront.net.), or you can go to the AWS console to get the CloudFront distribution DNS name. Go to your DNS provider and create an ALIAS record pointing to abc1d2efghij4.cloudfront.net. so anyone that visits https://customdomain.com will see your new serverless website.
With three Serverless Framework plugins, we created a serverless website to serve static HTML files. We can use this same approach to serve a Single Page Application designed with a reactive framework (e.g., React or Vue). We should point our domain name to our new serverless website if we purchased the domain outside of AWS.
Join my mailing list to receive updates about my writing.
Visit miguelacallesmba.com/subscribe and sign up.
Stay secure,
Miguel
Miguel is a Principal Security Engineer and is the author of the "Serverless Security" book. He has worked on multiple serverless projects as a developer and security engineer, contributed to open-source serverless projects, and worked on large military systems in various engineering roles.
Photo by KOBU Agency on Unsplash
18