DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workkloads.

Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Enhance Your Communication Strategy: Deliver Multimedia Messages With AWS Pinpoint
  • How To Set up a Push Notification Service in 30 Minutes or Less
  • A Beginner’s Guide To Building Microservices With AWS Lambda
  • Microservices With Apache Camel and Quarkus (Part 4)

Trending

  • Java Virtual Threads and Scaling
  • Evolution of Cloud Services for MCP/A2A Protocols in AI Agents
  • AI, ML, and Data Science: Shaping the Future of Automation
  • Measuring the Impact of AI on Software Engineering Productivity
  1. DZone
  2. Data Engineering
  3. Databases
  4. Building a Static Website on Amazon S3 With Microservices

Building a Static Website on Amazon S3 With Microservices

Learn how to build a static website made up of microservices developed with the help of an API gateway and AWS Lambda.

By 
Muhammad Ali user avatar
Muhammad Ali
·
Aug. 03, 18 · Tutorial
Likes (4)
Comment
Save
Tweet
Share
15.7K Views

Join the DZone community and get the full member experience.

Join For Free

Background

The trend of hosting static websites on Amazon S3 is a becoming very popular. This approach has been adopted by many organizations due to its advantages over traditional server-based hosting. Static websites are websites that do not require any runtime environment like JRE, .NET, etc. and are mostly based on HTML, CSS, JS, and other static resources (audio/video files, documents, etc.). AWS provides all the necessary services and tools that enable you to build and manage static websites on the AWS cloud very easily.

Like other cloud-based hostings, there is no CAPEX investment. However, there is a negligible operational cost for hosting the static website. You can find more benefits here.

First, we will discuss some of the main architectural components of the system. This discussion will help you understand all the building blocks and workings of the system. The architecture you choose to build for your website will depend entirely on your requirements. At the end of the blog, we will also provide a step-by-step guide on building a static website on AWS.

Architecture

S3

The first mandatory service required is S3. It is a secure and durable object storage service that enables you to store your files in cloud-based storage units called buckets. Every file inside a bucket has a unique URL associated with it that can be used to access it if the user has the privileges. As a first step, you would need to upload the complete contents of a static website into an S3 bucket. Enabling web hosting and making the bucket public will enable it to serve the content of your website. More details can be found here.

Route53

When you have hosted your website on S3, you will have an AWS region-based default website endpoint which you can directly use to access the website. You also have the option to map your custom domain to point to your static website default endpoint, and this is where Route53 comes into play. Details on how to use Route53 for this purpose can be found here.

Cognito (Optional)

To provide an authentication mechanism for your website, you can use AWS Cognito. You can create a pool of users and provide a login to the users in that pool. Cognito user pools offer functionality for federated identity providers (for example, login via Facebook and Google), password recovery, and user authorization security in the cloud.

Microservices Development (Using Lambda, API Gateway, and RDS)

You can develop microservices using a combination of API Gateway and AWS Lambda. These microservices can be used directly by your website to GET and POST data from a data source. Hence, your static website can also have the functionality of a dynamic webpage. For example, on an event (e.g. click of a button, form submission, etc) you can use Jquery Ajax to call the microservice to load data and display on the web page.

S3 website architecture.png

You can create microservices for complete CRUD operations and more with the help of these services within your website to make your site act fully dynamic. Similarly, you can create microservices which interact with other AWS services like SES in case you want to send email notifications through the website.

Basically, you use the AWS SDK to write Lambda functions that provide functionality for your microservice. Through Lambda, you can communicate with any AWS service. API Gateway integrates with Lambda to provide you with an API endpoint.

Step-by-Step Guide

Basic Configurations

  1. Go to the S3 console and create a new bucket with default settings

  2. Go the propertiesof your bucket and choose the option "Static website hosting."

  3. Enable the option "Use this bucket to host a website."

  4. Provide the names of the HTML to be displayed as the homepage and the HTML file that will be displayed in case an error occurs on your site.

Optionally, provide redirection rules if you want to route requests conditionally according to specific object key names, prefixes in the request, or response codes to some other object in the same bucket or external URL.

Enable Static website hosting S3.png

Now, go the Permissionssection of your bucket and add the following into your Bucket Policy section:

{
   "Version":"2018-07-15",
   "Statement":[{
       "Sid":"PublicReadForGetBucketObjects",
         "Effect":"Allow",
         "Principal": "*",
       "Action":["s3:GetObject"],
       "Resource":["arn:aws:s3:::your-bucket-name/*"
       ]
     }
   ]
 }

Bucket Policy S3 static website.png

Replace your-bucket-name with the name of your bucket.

To enable your S3 static website to respond to requests like GET and POST coming from an external application hosted on a certain domain, you would need to configure CORS in your bucket settings. To do this, add the following into the CORS configuration section of Permissions:

<!-- Sample policy -->
<CORSConfiguration>
       <CORSRule>
              <AllowedOrigin>*</AllowedOrigin>
              <AllowedMethod>GET</AllowedMethod>
              <MaxAgeSeconds>3000</MaxAgeSeconds>
              <AllowedHeader>Authorization</AllowedHeader>
       </CORSRule>
       <CORSRule>
              <AllowedOrigin>*</AllowedOrigin>
              <AllowedMethod>POST</AllowedMethod>
              <MaxAgeSeconds>3000</MaxAgeSeconds>
              <AllowedHeader>Authorization</AllowedHeader>
       </CORSRule>
</CORSConfiguration>

CORS configuration S3 static website.png

Upload your code. For this tutorial, create two simple HTML files by the name of index.html and error.html and upload them to the bucket.

S3 static website index and error file.png

To launch and test the site, the endpoint can be retrieved from Properties > Static website hosting.

Enrich Your Website by Adding Dynamic Behavior

You can use a combination of HTML5 and CSS3 to graphically enrich your website. You can also use Jquery Ajax to call an API (microservice) and dynamically fetch data from a data source and display it on your website. Similarly, by invoking API endpoints using Ajax, you can store any kind of user’s data back to your data source, like any other web application. If your requirement is to use AWS only for all your development needs, you can use a combination of API Gateway and Lambda to build APIs, a tutorial for which can be found here.

CORS Settings in API Gateway Endpoints

It is important to note that when developing APIs (microservices) using an API Gateway and Lambda, make sure to do the following:

  1. Enable CORS in the API gateway at the time of creating a new resource.

    CORS settings in API-Gateway.png

  2. When writing the lambda function (which you will integrate with the API Gateway endpoint to provide functionality to your microservice), make sure to add an additional parameter into the response header by the name of Access-Control-Allow-Origin with the value “*”

If you are the following the tutorial I mentioned before for developing microservices, for this purpose, you can observe the following line of code in the example function handler given in that tutorial:

headerJson.put("Access-Control-Allow-Origin", "*");


Conclusion

If your website is mainly informational, does not expect too many changes, and the goal is to achieve easy management and low cost, then S3 should be your first choice. Also, using a service-oriented architecture, as shown above, can dynamically display data and post data back to any data source, which gives you the power to make your website achieve many functionalities.

AWS microservice

Opinions expressed by DZone contributors are their own.

Related

  • Enhance Your Communication Strategy: Deliver Multimedia Messages With AWS Pinpoint
  • How To Set up a Push Notification Service in 30 Minutes or Less
  • A Beginner’s Guide To Building Microservices With AWS Lambda
  • Microservices With Apache Camel and Quarkus (Part 4)

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!