Hosting static website and accessing AWS Data from webpages

Lets just create some webpages. From those webpages we will try to access and update data from DynamoDB table in AWS.

In this case we have a DynamoDB table in AWS that has details like "AccountID" and "AccountName" for each "UUAA" (unique identifier of the clients projects). From the webpages we should be able to consult the details of a particular UUAA and also we should be able to update a new entry in the database.

To achieve this, we will use java script in webpages to invoke an API of API Gateway. This API in turn will invoke the lambda which will consult/update data in DynamoDB table.

Lets just create the required infrastructure using the cloud formation templates in the github repo.

https://github.com/rahulgupta87/aws-static-website

This will configure following resources in AWS:

1. S3 bucket to host static web pages.

2. API Gateway with an API. API with 2 methods inside GET & POST. GET for view data and POST to update the data.

3. 2 lambdas. One for view and another for update. An IAM role for lambda is also created.

4. A DynamoDB table.

   
   

Clone the GitHub repo and execute the below command to initiate creation of stack in cloud formation, which will configure all the services needed.

aws cloudformation deploy \
  --template-file main-template.yaml \
  --stack-name my-stack-name \
  --parameter-overrides ProjectName=my-portal \
  --capabilities CAPABILITY_NAMED_IAM

Let's host this webpages in a S3 bucket. After creation of S3 bucket using cloud formation , we need to enable "Static website hosting" in properties. Specify "Index document" as your home webpage, in this case index.html.

This will generate a URL from which we can access our website: http://<S3-BUCKER´T_NAME>.s3-website-us-east-1.amazonaws.com 

Now we will create some HTML based web pages. In this case basically 3 pages:

index.html - main index page for the website

view.html - from this we can consult the details of UUAA

update.html - from this page we should be able to update a new UUAA registry in the database.

These files (with all other images and css files) can also be found in the github repo.

https://github.com/rahulgupta87/aws-static-website/tree/main/website

Upload all the website related files in the link above to the S3 bucket.

That's it. Your static website is up and running.

Load your website URL in the browser and test view and update pages. http://<S3-BUCKER´T_NAME>.s3-website-us-east-1.amazonaws.com