Using nginx to develop your website for use with CDN (1)

About CDN’s

Content delivery networks (CDN) are useful for a number of things. They can lower latency for your website, increase your scalability by handling most of your static content and often offer some DDoS protection as well. If you have a website that is a bit more than a simple static html page, there are some things you need to know before you start using one of these services.

A CDN is basically a caching reverse proxy on a global scale. Let me go over these terms in a bit more detail. A proxy server is a webserver that takes an http request and delegates it to the actual webserver. It acts on your browsers behalf and is thus configured in your browser. It can provide anonymity, restrain access (e.g. in a corporate setup) or make sites on different networks available since all requests are delegated to the proxy instead of directly to the website.

A reverse proxy works from the other side: it sits in front of the website. While your browser thinks it goes to some webserver, it actually goes to the reverse proxy which then delegates it to the actual webserver. Since traffic goes through the proxy server, it might as well cache some of the content and thus alleviate some of the load on that webserver. A CDN basically does the same thing but in addition has these reverse proxies all over the world. It can thus serve the cached content from a server geographically close to your browser.

Idea
Since a CDN will cache (parts of) your website you will want to test if it behaves the way you expect.
So, if you set up a local reverse proxy you should be able to test most of the behavior of your site as-if it was behind a CDN. The website I’m working on uses Tomcat running with mod_jk in Apache. In production we’ll probably be using CloudFlare which is based on nginx. So to stay closer to production, and to avoid mixing our own configuration with that of the CDN, I’ll set up nginx in front of Apache. The nginx configuration should mimick a CDN, while we can modify Tomcat and Apache as we see fit since that is in our domain.

Setup

I already have an Apache and Tomcat configured on an Ubuntu server. Apache is running on port 80 and connected to tomcat via mod_jk. But now I want to place nginx in front of it. These are the steps I did:

1. Configure Apache to listen to 127.0.0.1:8081. You need to change the

   /etc/apache2/ports.conf

   .
   Look for the Listen tag. You might also need to change the VirtualHost config of your site in

   /etc/apache2/sites-enabled/yoursite

2. Restart apache:

   sudo service apache2 restart

3. Install nginx:

   sudo apt-get install nginx

4. Create the reverse proxy setup by creating a file /etc/nginx/sites-available/reverse-proxy with the following content

   proxy_cache_path /var/cache/nginx/yoursite levels=1:2 keys_zone=yoursite:60m inactive=24h max_size=1g;
   
   server {
           # error_log    /var/log/nginx/yoursite.log debug;
           listen   80; ## listen for ipv4; this line is default and implied
           listen   [::]:80 default ipv6only=on; ## listen for ipv6
   
           server_name apvm;
   
           location / {
                   proxy_set_header X-Real-IP  $remote_addr;
                   proxy_set_header X-Forwarded-For $remote_addr;
                   proxy_set_header Host $host;
                   proxy_pass http://127.0.0.1:8081;
                   proxy_cache yoursite;
                   proxy_cache_lock on;
                   proxy_cache_valid  200 302  60m;
                   proxy_cache_valid  404      1m;
           }
   }

5. Enable the reverse-proxy configuration:

   sudo ln -s /etc/nginx/sites-available/reverse-proxy /etc/nginx/sites-enabled/reverse-proxy

6. Create the necessary directories:

   sudo mkdir -p /var/cache/nginx/yoursite
   sudo mkdir -p /var/log/nginx

7. And restart nginx:

   sudo service nginx restart

If all goes well you should be able to see your website being served by nginx now. Using firebug:

Note that if you are developing, you might want to flush the cache. The easiest way is:

sudo rm -rf /var/cache/nginx/yoursite

In a next blog post I’ll describe possible problems and how to solve them.

Read more:

• http://nginx.org/
• http://stackoverflow.com/questions/224664/difference-between-proxy-server-and-reverse-proxy-server