Intro

Welcome back to our introductory tutorial on Nginx. Yesterday we learned how to host a static website using Nginx and now we're going to shift to how we can use Nginx in tandem with a web service that dynamically renders its pages server side.

As we have already discussed before, there are certain things Nginx excels at and other things it does not do so well at or can't do at all. One of those things it does not do well is acting as an application server. However, this doesn't mean all is lost for Nginx if your architecture does include Rails or some other web application server. Instead, we will use today to show how we can still make all of this work together.

The goal will be to set up a basic Node.js app then host it on a newly created FreeBSD server. Then we will position Nginx in front of the app to act as a proxy for our static content. This will help lighten some of the load on our Node server by having Nginx serve the static assets up to the client when they are requested. The end result being, we can have our Node app doing what it does best while we have Nginx doing what it does best. Enough chit chat, let's begin.

Setting up our server.

First off, before go too far, we need to create a new FreeBSD droplet on Digital Ocean and configure it just like we did previously. Let's get this done.

ssh freebsd@your_nginx_ip_address
sudo passwd
sudo pkg search nano
sudo pkg install nano
sudo chown freebsd /etc/rc.conf

Good, now let's open the /etc/rc.conf file.

# Firewall Configuration
firewall_enable="YES"
firewall_quiet="YES"
firewall_type="workstation"
firewall_myservices="22 80"
firewall_allowservices="any"
firewall_logdeny="YES"

nginx_enable="YES"

# ntpd config
ntpd_enable="YES"
ntpd_start_on_sync="YES"
sudo service ipfw start
sudo service ntpd start
sudo tzsetup
sudo nano /etc/sysctl.conf
net.inet.ip.fw.verbose_limit=5
sudo service nginx start

Great, now let's get our Node environment configured in FreeBSD.

sudo pkg install node
sudo pkg install npm
sudo npm install -g express-generator
sudo npm install -g pm2

Good, now let's scaffold us a simple Express app.

mkdir /var/www/
cd /var/www
express --view=pug myapp
npm install

Now we need to make sure this app works. Let's first run the app raw then we will shift to having it run with PM2.

npm start

video showing page being loaded in the browser

Very good, now we can shift our attention to having pm2 launch our app instead. So let's stop the current app then transition it to running in pm2.

pm2 start ./bin/www
pm2 startup
sudo env PATH=$PATH:/usr/local/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup rcd -u
freebsd --hp /usr/home/freebsd

video showing the page being loaded again this time with pm2

Excellent. Now we need to transition over to our Nginx config file.

sudo chown freebsd /opt/nginx/conf/nginx.conf

open nginx.conf in Sublime

Ok, now let's clear all of the example servers out and instead put in the scripting we need to serve the static content in our Node app.

server {
  listen 80;
  server_name test;
  root /var/www/my_test_app/public;
}

There we go, now let's restart Nginx.

sudo service nginx restart

Conclusion

Nice! That's it, we have our app working as it should and now Nginx should be able to serve our static content as we wished. So you can see here that we indeed can utilize Nginx's capabilities to enhance our dynamic server rendered web apps.

Tomorrow, we will turn our focus to how we can use Nginx as a reverse proxy, load balancer, and cache for our APIs and other web services. Thank you and see you tomorrow!

Helpful Links

Alex Allen

Alex is an independent developer who is obsessed with both performance and information security. When not writing code, Alex is either playing guitar or working in his garden.

  1. Comments for Server Rendered Apps

You must login to comment

You May Also Like