How to Create Static Website on S3, Using Lambda & Cloudfront?

Creating Static Website on S3, Using Lambda & Cloudfront
June 10, 2021

Some websites require basic standard authentication to protect private data. If the website runs on the server, adding authentication is not much challenging. But when it comes to serverless like S3, creating an authentication layer is a bit complicated.

This blog will show how to protect a static website on s3 using Lambda and Cloudfront.

Create a static file site on S3.

  1. Create a sample HTML file named index.html
  2. Create an S3 bucket with a unique name.
Creating a static file site on S3
  1. After giving the bucket name, click on next, till you reach Set permissions
  2. On Set, the Permissions tab unchecks Block all public access.
  3. Click on Next and then click on Create a Bucket.

Enabling S3 for a website.

  1. Click on the bucket you have just created.
  2. Upload the index.html page and make it public.
  3. Go to the properties tab and click on Static Website Hosting.
  4. Click on Use this bucket to host a website and in the index document field, enter HTML
Enabling S3 for a website
  1. Save it and copy the Website endpoint.
  2. Now you can copy and paste the endpoint in a browser and see the website page.

Configuring Cloudfront for S3 website

  1. Go to Cloudfront and Click on Create Distribution.
  2. Under the Web Section, click on Get Started.
  3. On Create Distribution windows, in Origin Domain name, search for your bucket and select.
  4. Select “Yes” for Restrict Bucket Access, and under Origin Access Identity, click on Create new Identity.
  5. For Grant Read Permissions on Bucket, click Yes, Update Bucket Policy.
  6. Scroll down to Default Root Object and type HTML.
Configuring Cloudfront for S3 website
  1. Click on Create a Distribution, and it will take around 15 min to get deployed.

Creating a Lambda function for Authentication.

Now we have to configure the actual logic that will handle the Authentication.

  1. Go to Lambda and Create a function.
Creating a Lambda function for Authentication
  1. Scroll down to function code, paste the following code into the window, and click save.
exports.handler = (event, context, callback) => {

// Get the request and its headers

const request = event.Records[0].cf.request;

const headers = request.headers;


// Specify the username and password to be used

const user = \'user\';

const pw = \'password\';


// Build a Basic Authentication string

const authString = \'Basic \' + new Buffer(user + \':\' + pw).toString(\'base64\');


// Challenge for auth if auth credentials are absent or incorrect

if (typeof headers.authorization == \'undefined\' || headers.authorization[0].value != authString) {

const response = {

status: \'401\',

statusDescription: \'Unauthorized\',

body: \'Unauthorized\',

headers: {

\'www-authenticate\': [{key: \'WWW-Authenticate\', value:\'Basic\'}]



callback(null, response);



// User has authenticated

callback(null, request);


3. Scroll up to the top and click on Add triggers. Select Cloudfront from the drop-down list and click on Deploy to Lambda@Edge

4. Select your Cloudfront distribution ID, and under Cloudfront event, select Viewer request.

Deploy to Lambda @ Edge

5. Confirm deployment to Lambda@Edge by checking the box and clicking deploy.

Now we are all ready to test the S3 website authentication.

Copy the domain of the Cloudfront and paste it into the browser. It will ask you for authentication. Based on the above code, the credentials are “user” and “password.”

Confirm deploy to Lambda @ Edge by checking the box and click on deploy

Using the above solution, you can leverage lambda to authenticate the static website hosted on S3. It could be beneficial if you want to restrict website accessibility.

Written by – Atin Mittal

Cloud Computing Insights and Resources

Top 8 Reasons to Learn DevOps Cloud Services

Two of DevOps’ most important goals are simplifying the systems development life cycle and enabling unrestricted delivery of superior software. …

Top 8 Reasons to Learn DevOps Cloud Services Read More »

How Enterprises Can Overcome the Growing Shortage of Cloud Skills

Digital transformation is on the rise, and businesses are transitioning to cloud-based technologies to deliver a seamless experience to their …

How Enterprises Can Overcome the Growing Shortage of Cloud Skills Read More »

cloud based e learning & its benefits

What is Cloud-Based e-Learning & its 5 Major Benefits 

There are many different kinds of e-learning software, and cloud-based learning is one of them. We will not only outline …

What is Cloud-Based e-Learning & its 5 Major Benefits  Read More »