Host a Static Website using AWS S3 (Serverless Website Hosting)

You can use Amazon S3 to host a static website. On a static website, individual webpages include static content. They might also contain client-side scripts.

By contrast, a dynamic website relies on server-side processing, including server-side scripts, such as PHP, JSP, or ASP.NET. Amazon S3 does not support server-side scripting, but AWS has other resources for hosting dynamic websites. To learn more about website hosting on AWS, see Web Hosting.

https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html

Note

You can use the AWS Amplify Console to host a single-page web app. The AWS Amplify Console supports single-page apps built with single-page app frameworks (for example, React JS, Vue JS, Angular JS, and Nuxt) and static site generators (for example, Gatsby JS, React-static, Jekyll, and Hugo). For more information, see Getting Started in the AWS Amplify Console User Guide.

Amazon S3 website endpoints do not support HTTPS. If you want to use HTTPS, you can use Amazon CloudFront to serve a static website hosted on Amazon S3. For more information, see How do I use CloudFront to serve HTTPS requests for my Amazon S3 bucket? To use HTTPS with a custom domain, see Configuring a static website using a custom domain registered with Route 53.

Host a Static Website using AWS S3

There are several ways to host static website on S3 (Serverless website hosting)
1.) without custom DNS
like http://www.my-awesome-site.com.s3-website-us-east-1.amazonaws.com/
Enable static website hosting for your bucket

Enabling website hosting on S3 bucket

https://docs.aws.amazon.com/AmazonS3/latest/userguide/EnableWebsiteHosting.html

Tutorial: Configuring a static website on Amazon S3

https://docs.aws.amazon.com/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html

2.) with custom DNS http://www.my-awesome-site.com

Tutorial: Configuring a static website using a custom domain registered with Route 53

https://docs.aws.amazon.com/AmazonS3/latest/userguide/website-hosting-custom-domain-walkthrough.html

How to Host your Static Website with AWS

https://www.freecodecamp.org/news/a-beginners-guide-on-how-to-host-a-static-site-with-aws/

with SSL https://www.my-awesome-site.com required CloudFront for SSL integration

Requiring HTTPS for communication between CloudFront and your Amazon S3 origin

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/using-https-cloudfront-to-s3-origin.html

3.) Host a static website using AWS Amplify

Host your simple marketing website or web application on AWS

https://aws.amazon.com/getting-started/hands-on/host-static-website

Note

Amazon S3 does not support HTTPS access to the website. If you want to use HTTPS, you can use Amazon CloudFront to serve a static website hosted on Amazon S3.

For more information, see How do I use CloudFront to serve a static website hosted on Amazon S3? and Requiring HTTPS for communication between viewers and CloudFront.

Totally Serverless Architecture for any web or mobile application or distributed systems

Here how to build totally Serverless Cloud Application
— In NodeJS/Python with AWS Lambda + AWS DynamoDB + API Gateway + AWS S3 + AWS CloudFront

Serverless

Build and run applications without thinking about servers

A simple web application using the following AWS Services:

AWS DynamoDB : NoSQL database
AWS Lambda : backend to access database
AWS API Gateway to create the REST API that the web application
AWS S3 to host the web application
AWS CloudFront : CDN to deliver the web application from AWS Edge Locations
Front-end App : Single page application – build on ReactJS – JS based application
https://github.com/maheshvnit/react-app-frontend

Here is the Architecture Diagram for totally serverless:

Good step by step guide provided here (Credits goes to Mr. Esteban Herrera):
https://www.pluralsight.com/guides/building-a-serverless-web-app-on-aws-services

https://aws.amazon.com/serverless/

https://aws.amazon.com/lambda/

https://aws.amazon.com/api-gateway/

Click to access AWS-Serverless-Applications-Lens.pdf

Serverless Architectures

https://martinfowler.com/articles/serverless.html

Developer Tools for Serverless Applications
https://aws.amazon.com/serverless/developer-tools/

Some Serverless Frameworks:
Claudia.js : https://claudiajs.com/

 

AWS Serverless Express : https://github.com/awslabs/aws-serverless-express

Serverless Framework : https://serverless.com/

 

Its single page application build on ReactJS.

In this App
— No servers used
— No RDMS Databases

This is totally serverless

Build on Front-end Technologies
Like ReactJS with Javascript/HTML/CSS
And backend on NodeJS and Database used DynamoDB

So scalability point is highly scalable.

As no servers used all AWS services used are automatically highly scalable.
— AWS Lambda – for backend
— API Gateway – REST Web service
— DynamoDB – Database
— S3 – application source static web hosting
— Cloudfront : CDN for application hosting

Note:
One issue found in actual building :
Problem : In Setting up API Gateway
– PUT method
– Integration Request – body mapping template
– below body template will not work

{
“id”: $input.params(‘id’),
“title” : $input.json(‘$.title’),
“authorId” : $input.json(‘$.authorId’),
“length” : $input.json(‘$.length’),
“category” : $input.json(‘$.category’),
“watchHref” : $input.json(‘$.watchHref’)
}

– Error on put method test:
{“message”: “Could not parse request body into json: Unrecognized token \’web\’: was expecting (\’true\’, \’false\’ or \’null\’)\n at [Source: (byte[])\”{\r\n \”id\”: web-component-fundamentals,\r\n \”title\” : \”Web Component Fundamentals2\”,\r\n \”authorId\” : \”cory-house\”,\r\n \”length\” : \”5:03\”,\r\n \”category\” : \”HTML5\”,\r\n \”watchHref\” : \”http:\/\/www.pluralsight.com\/courses\/web-components-shadow-dom\”\r\n}\”; line: 2, column: 13]”}

– replace above body template with this below body template
{
“id”: “$input.params(‘id’)”,
“title” : $input.json(‘$.title’),
“authorId” : $input.json(‘$.authorId’),
“length” : $input.json(‘$.length’),
“category” : $input.json(‘$.category’),
“watchHref” : $input.json(‘$.watchHref’)
}
– then it will work

Here is the solution

https://www.davidmadelin.com/2017/01/09/api-gateway-single-quotes/

https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-mapping-template-reference.html#input-examples-mapping-templates

More link to study:

Tutorials

Serverless — the future of software architecture?
https://read.acloud.guru/serverless-the-future-of-software-architecture-d4473ffed864

Going Serverless: Migrating an Express Application to Amazon API Gateway and AWS Lambda
https://aws.amazon.com/blogs/compute/going-serverless-migrating-an-express-application-to-amazon-api-gateway-and-aws-lambda/

Create Lambda and API Gateway (Nodejs) — AWS Serverless to RDS MySQL
https://medium.com/@hk_it_er/create-lambda-and-api-gateway-nodejs-aws-serverless-to-rds-mysql-6a75243e61cc

Create RDS MySQL — AWS Serverless to MySQL
https://medium.com/@hk_it_er/create-rds-mysql-aws-serverless-to-mysql-699a27dfd14a

Building your First Serverless App in Node.js with AWS Lambda + S3 + API Gateway
https://medium.com/the-node-js-collection/building-your-first-serverless-app-in-node-js-with-aws-lambda-s3-api-gateway-4d87e808d9cc

Express.js and AWS Lambda — a serverless love story
https://medium.freecodecamp.org/express-js-and-aws-lambda-a-serverless-love-story-7c77ba0eaa35

Build a simple app using Node JS and MySQL.
https://dev.to/achowba/build-a-simple-app-using-node-js-and-mysql-19me

https://github.com/achowba/node-mysql-crud-app

From AWS:
https://docs.amazonaws.cn/en_us/apigateway/latest/developerguide/api-gateway-create-api-step-by-step.html

https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/create-deploy-nodejs.rds.html

https://docs.aws.amazon.com/lambda/latest/dg/vpc-rds.html

Others

https://dzone.com/articles/querying-rds-mysql-db-with-nodejs-lambda-function

https://notebookbft.wordpress.com/2018/01/09/querying-rds-mysql-db-with-nodejs-lambda-function/

https://www.edureka.co/community/1188/http-request-not-working-with-aws-lambda-please-help

https://stackoverflow.com/questions/47404325/aws-lambda-http-post-request-node-js?rq=1

https://dev.to/scottlepp/http-request-with-aws-lambda-nodejs-810-and-standard-http-library-2cee

https://dev.to/scottlepp/extending-traditional-software-with-serverless-microservices-442m

https://dev.to/brightdevs/how-to-convert-an-express-app-to-aws-lambda–44gc

https://attacomsian.com/blog/express-js-aws-lambda-claudia-serverless-app