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

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.

Object Storage Bucket

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.

Dist files

Tip: If you want to use the oci-cli to upload your files, make sure to specify the --content-type auto parameter to make sure the Content-Type gets set correctly.

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.

  1. 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 one is not already created.

Oracle API Gateway

Task 5: Set Up Oracle API Gateway deployment

Once the Oracle API Gateway is successfully created, navigate to Deployments and create a new deployment.

  1. Select Create from scratch and set Path prefix to “/”. This will be the base path of the URL.

    Gateway Deployment

  2. Setup TLS, CORS, and so on here or click Next to move to the next step.

  3. Select No Authentication and click Next. We do not need to add any authentication for our static website.

    Deployment Auth

Task 6: Add Routes

In the API Deployment wizard, add routes that will extend the base path for our deployments.

  1. Enter /{req*} in the path field.

    Deployment path

  2. Select GET from the Methods drop-down list.

  3. Select Edit added multiple backends.

    Deployment multiple backends

  4. Select Path in the selector field.

    Deployment path

  5. Click Define Backend.

  6. 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.

    backend define

  7. 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[req]} page in the URL field and click Create. Your URL will look something like this

    https://{namespace}.objectstorage.{region}.oci.customer-oci.com/n/{namespace}/b/{bucket-name}/o/${request.path[req]}

  8. Click Create.

    backend define

  9. Create similar rules for css, html, txt, json files as needed.

    backend define all

  10. 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:

  1. If you do not see the application get loaded, check if your security list or network security group in your VCN allows traffic to the Oracle API Gateway.

  2. Don’t forget to add all the different file types your application has in the backend definition.

  3. 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.