Multi-Cloud Synergy: Deploying a Serverless Static Website with OCI and AWS
As the digital era is unfolding, new possibilities in cloud services are enabling us to redefine what we thought was possible. Embracing the power of multi-cloud architecture isn’t just about leveraging different platforms; it’s about pioneering a path towards a more efficient, accessible, and innovative digital future. It’s a testament to the advancements in cloud technology and how we can harness them to our advantage
Today, I’d like to share with you my journey of deploying my own website page using a blend of services from Oracle Cloud Infrastructure (OCI) and Amazon Web Services (AWS). This is more than just a tech-savvy endeavor; it’s a cost-effective multi-cloud marvel.
Architecture
The DNS traffic for my domain shadabmohammad.comwill be served from Amazon Route53 where it is running as a hosted zone. The DNS resolution will send the traffic towards to an OCI API Gateway which has a deployment defined to map to an OCI Object storage bucket which hosts my static file index.html and images. So let’s begin…
Deployment
Step 1: Utilize OCI Object Storage for Hosting Static HTML Files
At the heart of our project, we use OCI Object Storage for hosting the static HTML files of our portfolio. Oracle offers an “Always Free tier” for their object storage, providing us with 20GB at no cost. You’ll need to create a bucket in the OCI console and upload your HTML files. OCI Object Storage enables us to host our website data without the need for traditional web servers, embracing the serverless model.
I created a simple index.html file and uploaded to a public bucket which is hosted on OCI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadab Mohammad - Solution Architect</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
color: #333;
}
.header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.content {
margin: 15px;
}
img {
max-width: 200px;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
.section {
margin-bottom: 20px;
}
a {
color: #007BFF;
text-decoration: none;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
.website-icons {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.website-icons a {
margin: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="header">
<h1>Shadab Mohammad</h1>
<p>Elevating Technology, Inspiring Change</p>
</div>
<div class="content">
<div class="section">
<img src="shadab_pic_picture_me_professional.jpg" alt="Shadab Mohammad">
<div class="website-icons">
<a href="https://easyoradba.com" target="_blank">💻 EasyOraDBA</a>
<a href="https://awsdba.cloud" target="_blank">🚀 AWSDBA</a>
<a href="https://simplesqldba.com" target="_blank">🔧 SimpleSQLDBA</a>
<a href="https://github.com/shadabshaukat" target="_blank">🌐 Github</a>
</div>
</div>
<div class="section">
<h2>About Me</h2>
<p>
I am a Cloud Solutions Architect with expertise in designing, building, and managing cloud computing systems. With a deep understanding of cloud technologies and a proven track record of successful cloud implementations, I am skilled at helping organizations maximize the benefits of the cloud, such as increased flexibility, scalability, and cost-efficiency. Whether working with public, private, or hybrid cloud environments, I am able to leverage my expertise in designing and implementing solutions that meet the unique needs of each individual organization.
</p>
</div>
<div class="section">
<h2>Experience</h2>
<p>
Please visit my <a href="https://www.linkedin.com/in/shadabmohammad/" target="_blank">LinkedIn</a> for my detailed professional experience.
</p>
</div>
<div class="section">
<h2>Contact</h2>
<p>
To get in touch or know more about my work, please visit my <a href="https://blog.shadabmohammad.com" target="_blank">Blog</a>.
</p>
</div>
</div>
</body>
</html>Create OCI Bucket
Step 2: Deploy OCI API Gateway for Routing URLs
Next, we utilize OCI API Gateway to route URLs to our custom domain. This is essentially the bridge between the user’s request and our static website content. When setting up the API Gateway, you’ll need to point it to the Object Storage bucket containing your static files. This service acts as an intelligent traffic director, ensuring that all requests are handled smoothly and efficiently.
Create an OCI API Gateway
Add a Deployment to it
Do rate limiting on the API’s to avoid excess requests
Use “No Authentication”
Add PATH as /{object*}with GET method. Use backend type as HTTP and the Object Storage URL as below :
https://objectstorage.ap-sydney-1.oraclecloud.com/n/sdpxrcjhpsnk/b/shadabmohammad.com/o/${request.path[object]}This ensures that any path within the bucket can be traversed using a wildcard.
Step 3: Secure with SSL Certificates from ZeroSSL and Add to OCI API Gateway
Security is paramount in our digital age, and to ensure the safety of our site, we acquire SSL certificates from ZeroSSL, entirely free of charge. These certificates ensure secure data transmission between our server and clients, adding an extra layer of trust for our users. Setting up the SSL is straightforward with ZeroSSL and integrating it with our API Gateway ensures all data served is encrypted.
I created a 90-day free certificate for my domain shadabmohammad.comfrom ZeroSSL and downloaded the certificate zipfile.
Add ‘certificates’ from OCI console.
Unzip the zip file downloaded from zero-ssl and upload the SSL certificates on OCI Certificate service.
Go to OCI Console > Certificates > Create Certificate
Go to API Gateway and select the newly added certificate for your domain
Step 4: Integrate with Amazon Route53 for DNS Traffic
To round out our multi-cloud solution, we employ Amazon’s Route53 to handle DNS traffic. By pointing an A record from Route53 to our OCI API Gateway, we can ensure seamless connectivity for our users. Route53 offers robust, scalable, and reliable DNS routing, further solidifying our multi-cloud portfolio page.
Check the public IP of OCI API Gateway and add it as a A record to AWS hosted zone for shadabmohammad.com
You can now check my Static page using the Domain name : https://shadabmohammad.com/index.html
OCI Object Storage URL : https://objectstorage.ap-sydney-1.oraclecloud.com/n/sdpxrcjhpsnk/b/shadabmohammad.com/o/index.html
Step 5: Calculate the Cost-Effective Total
When it comes to cost, this solution offers a budget-friendly price tag that may surprise you. Here’s a breakdown:
- OCI Object Storage: $0 (Always free tier 20GB)
- OCI API Gateway: $4.50
- SSL Certificates from ZeroSSL: $0
- AWS Route53: $0.50 (for 1 hosted zone)
The grand total? $5 USD for 1 million access requests with rate limiting + 10TB of free egress traffic.
Not only have we created a server-less, robust and scalable solution, but we’ve done it without breaking the bank. In summary, by deploying a static website page using services from OCI and AWS, we’ve showcased the potential of multi-cloud solutions. These solutions are highly scalable and efficient, and also provide a cost-effective way to host and serve content. So, here’s to pushing boundaries and redefining what’s possible!
Join me, and let’s create a more accessible and innovative digital future together. If you like the article and would like to get notified on further blog posts, please follow me and click on the clap icon below.
References:
[1] Adding Path Parameters and Wildcards to Route Paths in OCI API Gateway — https://docs.oracle.com/en-us/iaas/Content/APIGateway/Tasks/apigatewayaddingparamswildcards.htm#Adding_Path_Parameters_and_Wildcards_to_Route_Paths
[2] How to Host Static Website in the OCI Object Storage — https://medium.com/oracledevs/how-to-serve-website-static-files-from-the-oci-object-storage-bd79ca0805c7
[3] How to change OCI API Gateway Hostname and attach custom SSL certificate — https://medium.com/oracledevs/how-to-change-oci-api-gateway-hostname-and-attach-custom-ssl-certificate-bd513f1d5188
