Hosting Resources for Web Applications on the IBM Cloud
Continue learning about the serverless capability of IBM Cloud to host resources like HTML and JavaScript files.
Join the DZone community and get the full member experience.
Join For Freerecently i open sourced a complete serverless web application which can be deployed on the ibm cloud. this short article describes how static web resources like html and javascript files can be hosted in the cloud in a serverless fashion.
this diagram shows the architecture of the full application. in this article i focus on the components in the red rectangle:
ibm cloud object storage
allows storing files in the cloud and accessing them anonymously over
http
. for my angular sample application, i’ve created a
script
that creates an object storage instance, creates a bucket and uploads the files generated by
ng build
.
after this the files can be accessed via urls like https://s3.us-south.objectstorage.softlayer.net/serverless-web-unique-name/main.bundle.js .
this works well for all resource types, except for the single page application’s entry point
index.html
. unfortunately, object storage doesn’t allow yet to use parameters in urls which are often used in web applications.
because of this, my sample loads all resources from object storage except the
index.html
file. in order to host that file in the cloud, i use
ibm cloud functions
.
this is the code of the function which contains the text from index.html. note that you have to replace the paths to your resources with the base url of your object storage bucket. i’ve created another script to do this.
function main() {
return { body: `
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>openwhiskangular</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="xxx-replace-me-xxx/inline.bundle.js"></script><script type="text/javascript" src="xxx-replace-me-xxx/polyfills.bundle.js"></script><script type="text/javascript" src="xxx-replace-me-xxx/styles.bundle.js"></script><script type="text/javascript" src="xxx-replace-me-xxx/vendor.bundle.js"></script><script type="text/javascript" src="xxx-replace-me-xxx/main.bundle.js"></script></body>
</html>
`}
}
in order to expose this function, i’ve created an api via ibm cloud functions api management . after this, the index.html file can be retrieved via urls like this one: https://service.us.apiconnect.ibmcloud.com/gws/apigateway/api/xxx/serverless/html .
this works functionally, but the long url is often not what you want to use in production environments. fortunately, it’s possible to use custom domains for openwhisk apis. check out the documentation and the blog from james thomas for details.
in summary, you need to upload your ssl/tls certificates in a certification manager instance since http traffic is not supported with custom domains. after this, you can define to use your custom domain for a specific space in a specific location.
if you want to try this functionality yourself, create an ibm cloud lite account (free, no credit card required) and follow the steps outlined in my repo .
Opinions expressed by DZone contributors are their own.
Comments