Use IBM Cloud Object Storage to serve static website content

Use IBM Cloud Object Storage to serve static website content

Putting a reverse proxy, like NGINX, in front of an IBM Cloud Object Storage (COS) instance gives you the ability to use your own URL, adds custom caching controls, and allows you to gather more detailed statistics about who is accessing your content. This post will show you how to set that up using NGINX running in a Bluemix container.

Requirements

I’m going to assume you have the following:

1. A Bluemix account. (If not, try Bluemix for free.)

2. A domain name

3. Some static content

Overview

Figure 1: HTTP request flow

Uploading content to Cloud Object Storage

First, order some Cloud Object Storage, S3 API if you don’t have it already. To learn more about the features and benefits of IBM Cloud Object Storage c

To easily work with COS, I like to use S3cmd. To get it to work with COS instead of AWS-S3, use the following ~/.s3cfg file (replacing the secret_key and access_key where appropriate). I’ve omitted most of the default values; these are just the ones I had to change:

[default]<br>
access_key = <strong>&lt;ACCESS KEY GOES HERE&gt;</strong><br>
gpg_command = /usr/local/bin/gpg<br>
host_base = s3-api.us-geo.objectstorage.softlayer.net<br>
host_bucket = %(bucket)s.s3-api.us-geo.objectstorage.softlayer.net<br>
secret_key = <strong>&lt;SECRET KEY GOES HERE&gt;</strong><br>
use_https = True<br>

Now create a bucket and upload some content. Heads up: Each bucket must be globally unique. It’s good practice to have a unique prefix for my buckets to make this easier:

s3cmd  mb s3://<strong>UNIQUE-PREFIX-static-website</strong><br>
s3cmd -P -r <strong>/path/to/my_website</strong> s3://<strong>UNIQUE-PREFIX-static-website<br>
</strong>

The -P flag indicates the content will be made public. Currently, COS doesn’t support bucket-level policies to restrict the content based on IP address. You can use NGINX to set the proper authentication headers with the ngx_aws_auth module.

You should now be able to go to your COS URL and see your content. It will be formatted something like this:

http://UNIQUE-PREFIX-static-website.s3-api.us-geo.objectstorage.softlayer.net/my_website/index.html

NGINX

For my NGINX server, I use a Docker container running on Bluemix. (If you’re interested, learn more about Bluemix Containers while you’re at it.)

There are two main files we are going to work with. The Docker file and the site.conf files.

The Docker file

# cf ic run -m 256 -p 80 -p 443 --name nginx-1   registry.ng.bluemix.net/<strong>namespace</strong>/nginx-basic<br>
FROM nginx:latest<br>
MAINTAINER NGINX Docker Maintainers "docker-maint@nginx.com"<p></p>
<p>COPY ./nginx.conf /etc/nginx/nginx.conf<br>
COPY ./site.conf /etc/nginx/conf.d/</p>
<p>EXPOSE 80 443<br>
CMD ["nginx", "-g", "daemon off;"]<br>
</p>

The site.conf file

server {<br>
    listen 80 default_server;<br>
    server_name yoursite.com;<p></p>
<p>    add_header Strict-Transport-Security "max-age=31557600; includeSubDomains";<br>
    add_header X-Frame-Options "SAMEORIGIN" always;<br>
    add_header X-Content-Type-Options "nosniff" always;<br>
    add_header X-Xss-Protection "1";</p>
<p>    location / {<br>
        set $s3_bucket        '<strong>UNIQUE-PREFIX-static-website</strong>.s3-api.us-geo.objectstorage.softlayer.net';<br>
        set $url_full         '$1';<br>
        index index.html;</p>
<p>        proxy_http_version     1.1;<br>
        proxy_set_header       Host $s3_bucket;<br>
        proxy_set_header       Authorization '';<br>
        proxy_hide_header      x-amz-id-2;<br>
        proxy_hide_header      x-amz-request-id;<br>
        proxy_hide_header      Set-Cookie;<br>
        proxy_ignore_headers   "Set-Cookie";<br>
        proxy_buffering        off;<br>
        proxy_intercept_errors on;<br>
        resolver               8.8.8.8 valid=300s;<br>
        resolver_timeout       10s;</p>
<p>        proxy_pass             http://$s3_bucket;<br>
    }<br>
}<br>
</p>

From here, we need to build our Docker container and push it to the Bluemix repository. Start the container, then request and bind an IP address:

cf ic build -t nginx-basic .<br>
cf ic run -m 256 -p 80 -p<code> 443 --name nginx-2 registry.ng.bluemix.net/<strong>namespace</strong>/nginx-basic<br>
cf ic ip request<br>
cf ic ip bind &lt;The IP you got&gt; &lt;ID of docker container&gt;<br>
</code>

Now set the DNS for your website to the IP you requested—and you’re ready to start serving static content!

Learn more about the features and benefits of IBM Object Storage here.