Skip to content

Instantly share code, notes, and snippets.

@kylefdoherty
Last active August 12, 2016 21:29
Show Gist options
  • Save kylefdoherty/5d1629455e93447c262c5defcb81ef22 to your computer and use it in GitHub Desktop.
Save kylefdoherty/5d1629455e93447c262c5defcb81ef22 to your computer and use it in GitHub Desktop.

Nginx Tutorial

Nginx is a webserver but also can act as a reverse proxy (sits in front of another server), a load balancer, or a load balancer. Read more here

Setup Nginx on Ubuntu

  1. Spin up an Ubuntu machine with vagrant or create one on digitalocean or somewhere else.
  2. sudo apt-get update & sudo apt-get install nginx
  3. Visit server's IP to see if Nginx is running (you'll see the welcome page if it is)
  • if you aren't sure what your server's IP run ip addr show eth0 | grep inet | awk '{ print $2; }' | sed 's/\/.*$//'
  1. Setup your /etc/nginx/nginx.conf.
  • Note: there are two terms that you need to know when working with the config file.
    1. Context - what we're configuring i.e. events, http, etc.
    2. Directive - configuration options being set in the config file (generally within a context)

a. First lets delete everything in /etc/nginx/nginx.conf and add the following (without the comments if you like):

# events is an example of a context. We aren't going to give it any directives 
# but we need it to be present for the file to be valid

events {}

# http is another context as is server, while everything within it are directives

http {
  server {

    # including the mime types that nginx comes with - you can see these at /etc/nginx/mime.types
    
    include mime.types;

    # which port it needs to listen on - NGINX assumes port 80 if you don't define it
    
    listen 80;

    # set the sever name - in this case its an IP but generally it will be a domain
    
    server_name http://172.16.104.130/;

    # tell nginx where the root of the site/app is
    
    root /sites/initializr-template;
  }
}
  1. Add a website for Nginx to serve

As you can see we've set root /sites/initializer-template; so now we need to put something there so nginx can serve it up. The bootstrap initializer template is an easy one to use. On your Ubuntu server create a directory /sites/ and clone the initializer-template into it.

Now reload Nginx with service nginx reload. If you don't have any errors in your config it will say ok and you can see the unstyled site by visiting the IP address.

If it tells you it failed then you have errors. You can use the command nginx -c /etc/nginx/nginx.conf -t to have it tell you what's wrong. 5. Add the include mime.types; as the first directive in your server context

You've probably noticed that none of the css is showing up on the site. If you open up dev tools and view source you can see that they're there and beign served but the problem is the only mime type Nginx knows about is text/plain. You can see this yourself by fetching one of the files with curl curl -I http://172.16.104.130/css/style.css.

You'll get back something like this:

  HTTP/1.1 200 OK
  Server: nginx/1.4.6 (Ubuntu)
  Date: Fri, 12 Aug 2016 21:13:38 GMT
  Content-Type: text/plain
  Content-Length: 7392
  Last-Modified: Fri, 12 Aug 2016 20:20:36 GMT
  Connection: keep-alive
  ETag: "57ae2f94-1ce0"
  Accept-Ranges: bytes

After adding the include mime.types; Content-Type will be the correct type for each file type.

  1. Location Blocks

a. Prefix Match - matches any uri starting with the match. ``` #nginx.conf

  ...
  
  server {
    ...
    
    location /greet {
      200 'Hello Amigo'
    }
  }
```
Here the prefix match is greet and returns a 200 success code and a string to the browser. Since this is a prefix match any uri that starts with greet will match meaning /greets, /greeting, and /greeting/stuff will all match.

b. Exact Match - is just like it sounds and will only match the exact location. An exact match is created with an = sign.

```
  location = /greet {
    200 'Hello Amigo'
  }
```

c. Regex Match - again like it sounds it uses regex to create the match. They use a ~ OR *~ if you want it to be case insensative.

   location ~ /greet {
     200 'Hello Amigo'
   }
 ```


d. Preferential Match - this takes preendence over a regex match but not an exact match. 

  location ^~ /greet {
    200 'Hello Amigo'
  }
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment