You already know what is a single-page application and how to build one in ClojureScript and re-frame.
We’ll now describe a cost-effective way to host SPAs on Exoscale’s secure, multi-datacenter object-storage.
Host a single-page application or static website on Object Storage: a secure, reliable alternative.
We’ve learned to build an SPA, now what could be the easiest way to share it with the rest of the world? We’ll need a reliable, secure place to host the static files.
Object Storage makes a nice alternative to setting up a web server for hosting static files, boasting the following advantages:
- no need to forecast traffic to correctly provision CPU/RAM resources – the Object Storage engine scales in the background as loads increase (those implementation details are handled by the Object Storage hosting provider)
- web servers are prone to security vulnerabilities – Object Storage is more secure (and since you only place publicly available files there anyways, a security breach is not a concern)
- the operating burden of configuring a load balancer, web server, maintaining SSL certificates, and updating the underlying operating system is greatly more time consuming than using Object Storage
- Object Storage is orders of magnitude cheaper than provisioning VMs with webserver and load balancers to handle the same load (compare Object Storage pricing of 0.018 EUR per GB per month to pricing of ~10 EUR per month per GB of RAM for the VM-hosted alternative.)
Deploy a single-page application on Exoscale’s Object Storage
To demonstrate the process we will use the ping-times SPA we’ve built. If you want to jump straight-in you can clone the GitHub repo here. You can of course follow along with your own application or static website.
In the case of the ping-times application, you will locate the compiled files intended for your production deployment in the
public/resources/ directory of the project.
If you haven’t already, make sure to run
$ ls -F ~/ping-times/resources/public/ app.js img/ index.html style.css
Create an Exoscale account and set up your account credentials
Publishing a static website or a single-page application on the Object Storage is really straightforward.
In our example, we’ll use the aws-cli command line tool to interface with Exoscale’s S3 compatible simple Object Storage and upload our application.
Being compatible with the S3 protocol, you can use whatever tool works with S3 to interface with Exoscale’s Object Storage. This includes applications like CyberDuck (for MacOS and Windows) if you prefer a GUI.
In order to setup aws-cli we’ll need to create the following two configuration files in the
$ cat ~/.aws/config [profile exoscale] region = de-fra-1
$ cat ~/.aws/credentials [exoscale] aws_access_key_id = YOUR_EXOSCALE_API_KEY aws_secret_access_key = YOUR_EXOSCALE_SECRET_KEY
In this example we’ve chosen to publish our demo application in our recently opened Object Storage zone in Germany, Frankfurt: a reliable location with great access times to Europe and beyond, that benefits from strict privacy laws governing European data.
Create a shell alias for quick access
With those config files in place, we can create a shell alias called
sos-de that lets us access our chosen datacenter more easily and save it to our
$ printf "alias sos-de=\'aws s3 --profile exoscale --endpoint-url https://sos-de-fra-1.exo.io\'\n" >> ~/.profile
Create a new bucket
Now, let’s create a dedicated bucket with the
mb command to test it out:
$ sos-de mb s3://YOUR__BUCKET_NAME make_bucket: YOUR__BUCKET_NAME
It worked! We now have a working client configuration.
Upload your files and deploy your single-page application to the Object Storage
Let’s sync our local files to our bucket on Exoscale:
$ sos-de sync ~/ping-times/resources/public s3://ping-times --acl "public-read" upload: ping-times/resources/public/app.js to s3://ping-times/app.js upload: ping-times/resources/public/index.html to s3://ping-times/index.html upload: ping-times/resources/public/style.css to s3://ping-times/style.css
Here we use the
sync command that allows us to mirror a local directory to a directory on SOS. We use the
--acl "public-read" flag to indicate that these files are accessible to anyone (which is required for websites that are publicly accessible).
To verify that it worked, you can open your browser to
https://sos-de-fra-1.exo.io/YOUR__BUCKET_NAME/index.html and see your app in action!
If you run into any trouble, feel free to contact us directly for support.
Also, make sure to visit our Object Storage documentation for detailed instructions and API reference.
Let us know what you build!