Run Nuxt.js on DigitalOcean, with zero downtime deployments! Part 2

Published:

Round 2, FIGHT!

 

So we’ve got this ball rolling after setting up Node.js and Nuxt.js in the previous post, let’s dive into setting up Nginx on the server.  Before we proceed, make sure you added your domain to your account in Digital Ocean!

Running Nginx as a Proxy Server (what is that you say?)

We’ll be doing this so when someone visits your epic domain, your project will show!  Pretty neat

So, from your root directory (for reference), we’ll use the following:

sudo apt-get install nginx

Then we will set up your domain name and/or reference for ngnix.

sudo nano /etc/nginx/sites-available/fancysquares.blog

Add the following to it:

server {
    listen 80;
    listen [::]:80;
    index index.html;
    server_name fancysquares.blog;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

We will then place following inside of it (remember to update the fancysquares.blog in your file, unless you want your domain to match mine, then by means, I won’t stop you)

Also, keep in mind:

  • the domain could of course be a .com / .net etc etc
  • the domain could be a sub-domain!
  • did you run a different localhost port? be sure to update in that file as well!

Traffic will now flow to your newly set up domain, so let’s remove the default set up., and then link your new config file to the site available directory

sudo rm /etc/nginx/sites-enabled/default

sudo ln -sf /etc/nginx/sites-available/fancysquares.blog /etc/nginx/sites-enabled/fancysquares.blog

Don’t forget that command needs to be using YOUR domain.

Let’s reset that the server now!

sudo nginx -t
sudo systemctl restart nginx

How about we fire up that project now?

Go ahead and CD into your project folder

cd ./project

And run the following:

pm2 start

Oh, snap, look at the Universal, SEO grabbing, beautiful son of a b of a website.  Thank you Nuxt.js and Digital Ocean!

In the next part, we’ll go over installing your SSL with LetsEncrypt  and a basic firewall!