snapJob Part V : Serving files with nginx

Part IV of this project ("Scalling node.js, and ensure high availability using "cluster") can be found here.

The architecture behind the web site we intend to create requires a front end application, which will be a single webpage using bootstrap, angular.js, and other stuff. This page will call a web service, so we are simply not in a regular php architecture, where a web page is processed, and then returned to the browser. Here, we serve a static web page that does all the job of binding data to the view on the client side.
It means that we need to serve only static files, such as an html files, javascript files, images, ...

node.js can serve static pages... but there is a better way to do it : use a real file server, that does caching and all other stuff : nginx.

Our current RESTFul API uses swagger to provide a nice and clean web interface for testing our service. But the html file provided by swagger, the javascript files, and other images can be moved to a file server, leaving only the real processing job to node.js.

So let's install nginx (on Ubuntu) :

sudo apt-get install nginx

Root folder for websites served by nginx, by default, are located in /usr/share/nginx/html. We will simply add a subfolder called api here, and copy the following files in it with admin  :

• css/*
• images/*
• lib/*
• index.html
• o2c.html

As we will serve static files on another http port that the node.js server is, it means that we need to change on thing in the inde.html file. Replace :

    $(function () {
      window.swaggerUi = new SwaggerUi({
      url: "/api-docs",
      dom_id: "swagger-ui-container",
      supportedSubmitMethods: ['get', 'post', 'put', 'delete'],
      onComplete: function(swaggerApi, swaggerUi){

with :

    $(function () {
      window.swaggerUi = new SwaggerUi({
      url: "http://localhost:8080/api-docs",
      dom_id: "swagger-ui-container",
      supportedSubmitMethods: ['get', 'post', 'put', 'delete'],
      onComplete: function(swaggerApi, swaggerUi){

Then restart nginx :

service nginx restart

Now if we browse http://localhost/api/, we can see this :

"Can't read from server. It may not have the appropriate access-control-origin settings."

It means we have to allow external applications, such as the swagger ui html file, to access our RESTApi in the node.js application.

To do this, we have to add this lines in snapJob.js :

swagger.setHeaders = function setHeaders(res) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Content-Type", "application/json; charset=utf-8");
};

First header is important, second one is less important, but as we serve json content, it's a good idea to keep it.

Also, these lines were removed, as our node.js application will not serve any static files anymore :

app.use('/lib', express.static(path.join(__dirname, 'lib')));
app.use('/css', express.static(path.join(__dirname, 'css')));
app.use('/images', express.static(path.join(__dirname, 'images')));

and this one too :

app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');
});

Now it we hit http://localhost/api, we have exactly the same behaviour as before, except that static files are served from gnix, which is better because nginx just rocks :)

Pretty nice, huh ? That wasn't so hard after all...

Presentation of the project can be found here.
Source code for this application can be downloaded from here.

Next part : snapJob - Part VI : Usage of Apache Kafka to send logs to logstash and propagate application configuration changes