Note:
- This tutorial requires access to Oracle Cloud. To sign up for a free account, see Get started with Oracle Cloud Infrastructure Free Tier.
- It uses example values for Oracle Cloud Infrastructure credentials, tenancy, and compartments. When completing your lab, substitute these values with ones specific to your cloud environment.
Set Up OCI Object Storage and Oracle API Gateway for Static Website Hosting
Introduction
If you have a web application you want to host on Oracle Cloud Infrastructure (OCI) and want to set up static website hosting, in this tutorial, we walk through configuring static hosting of a rich Ahead-of-Time (AOT) compiled JavaScript web application using OCI Object Storage and Oracle API Gateway. The same approach can be applied to any scenario in which you want to serve a static file over HTTP, whether for a simpler app or static webpages and provide a reliable online experience to your users on the OCI platform, all at a lower cost.
Objectives
Understand how to leverage OCI Object Storage and Oracle API Gateway to host static websites for efficiently deploying and managing web content on Oracle Cloud Infrastructure.
Prerequisites
- Access to an Oracle Cloud Tenancy.
- An AOT complied application (Supported frameworks and libraries are Angular 2+, ReactJs, NestJs, VueJs, Ionic, and so on)
Task 1: Create an Oracle Object Storage Bucket
Let’s begin by creating a new bucket in OCI Object Storage. This bucket will be used to host your static website.
Task 2: Upload your distribution files in the Bucket
Upload your application distribution files into the bucket created in the previous task. Your application distribution files are typically located in the /dist
folder of your application directory and are the output of the webpack build.
Task 3: Create Pre-Authenticated-Request
To allow the Oracle API Gateway to serve the distribution files over the internet, you need to create a pre authenticated request PAR for your object storage bucket where distribution files are stored.
We will use this when configuring the API Gateway.
Task 4: Create Oracle API Gateway
The Oracle API Gateway service enables you to publish APIs with private endpoints that are accessible from within your network, and which you can expose with public IP addresses if you want them to accept internet traffic. The endpoints support API validation, request and response transformation, CORS, authentication and authorization, and request limiting. For more details, see Overview of Oracle API Gateway.
- Navigate to OCI Menu, Developer Services, API Gateway and click Create.
Note: : You will need a Virtual Cloud Network to deploy this Oracle API Gateway, create a VCN if it’s not already created.
Task 5: Set Up Oracle API Gateway deployment
Once the Oracle API Gateway is successfully created, navigate to Deployments and create a new deployment.
-
Select Create from scratch and set Path prefix to “/”. This will be the base path of the url.
-
Setup TLS, CORS, and so on here or click Next to move to the next step.
-
Select No Authentication and click Next. We do not need to add any auth for our Static website.
Task 6: Add Routes
In the API Deployment wizard, add routes that will extend the base path for our deployments.
-
Enter /{req*} in the path field.
-
Select GET from the Methods drop-down list.
-
Select Edit added multiple backends.
-
Select Path in the selector field.
-
Click Define Backend.
-
Create a default rule, enter Name as default, Match Type as Any of, and select the Make default checkbox, select backend as HTTP and enter the object storage url for the index.html page in the Url field and click Create.
-
Create a
js
file rule, enter Name as js-rule, Match Type as Wildcard and *.js as the wildcard expression, select backend as HTTP and enter the object storage bucket url followed by {request.path[request]} page in the Url field and click Create. Your URL will look something like thishttps://{namespace}.objectstorage.{region}.oci.customer-oci.com/n/{namespace}/b/{bucket-name}/o/${request.path[req]}
-
Click Create.
-
Create similar rules for css, html, txt, json files as per your need.
-
Click Next and complete the creation of Oracle API Gateway and wait for it to get updated.
Task 7: Test
Retrieve the deployment URL and enter it into your web browser and this should display your application.
Notes:
If you do not see the application get loaded, check if you have added the right policy for the Oracle API Gateway to access the Object Storage Bucket.
Don’t forget to add all the different file types your application has in the backend definition.
Only AOT (Ahead of Time) compiled applications and static websites can be set up using this technique. Make sure your application is compiled in native Javascript code.
Acknowledgments
Author - Mayank Kakani (OCI Cloud Architect)
More Learning Resources
Explore other labs on docs.oracle.com/learn or access more free learning content on the Oracle Learning YouTube channel. Additionally, visit education.oracle.com/learning-explorer to become an Oracle Learning Explorer.
For product documentation, visit Oracle Help Center.
Set Up OCI Object Storage and Oracle API Gateway for Static Website Hosting
F87240-02
October 2023
Copyright © 2023, Oracle and/or its affiliates.