Deploy Nuxtjs App On DigitalOcean Ubuntu Server

As you probably know, Nuxt.js is a framework for creating Universal Vue.js Applications. So the biggest advantage of Nuxt is that we can create Server Side Renderings (SSR) application and it eliminates a lot of problems with SEO, which we can have with Vue.js Single Page Applications, especially with dynamically (from API) loaded content. But if you want to use Nuxt.js with SSR, you need to have node.js environment and this is a little bigger problem. As far as we can put Vue.js SPA on almost every hosting, without any requirements, hostings with node.js are a little less popular and often require a slightly different approach.

Personally, I chose DigitalOcean for several of my projects. This is a cloud computing platform where you can create your droplets — resizable, SSD-based virtual machines.

OK… If we have some basic information, let’s get started!

Registration and how to get FREE credits to start on DigitalOcean

If you don’t have an account on DO, register one from this url — you will get $50 for free… and I will get a small bonus too, so everyone wins! ;).

You can also visit this url: https://gitlab.com/snippets/1740855 and check promo codes to filling a “Have a Promo Code?” field. It will give you at least next $10 of free credits.

Create a new droplet

When you finish registration, log in to your account and create a new droplet. I suggest choosing Ubuntu 18.04 and the standard droplet for $5/mo — 1 GB, 1vCPU and 25GB should be enough to start. In the future you can resize your droplet very easily.

Fill in the remaining fields and wait for the droplet to be created.

Preparation of the environment

I assume that at this moment your droplet is already created and you have logged in to it by SSH. I also assume that all of the commands in the next part of this guide you will run as a no-root user, so we will use sudo (check this tutorial if you need more info). Let’s start…

Update packages list:

sudo apt-get update

Install node.js & npm:

sudo apt-get install nodejs npm

If you want to install yarn, run this commands:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

Now go to your home directory:

cd ~

And create directory for the project:

mkdir ./your-project-name

Undoubtedly, you have Nuxt.js project on your local computer, so copy it now to this directory. Open a new terminal window and run:

scp -r /path/to/your/local/project/* your-user-name@<droplet-ip-here>:~/your-project-name/

OK, go back to the terminal where you are connected to the droplet and check that files exist in the proper directory:

ls ./your-project-name

You should see a list of the project files.

Starting Nuxt.js

Now we have created our server with node.js and our project files. Let’s run Nuxt.js!

cd ./your-project-name
npm run build
npm run nuxt

The project should run at address: http://localhost:3000. Of course, it was only for test and we need more automatization, because you will not start your website manually every time.

We’ll use PM2 — a node.js process manager. Install it:

sudo npm install pm2 -g

And start project by pm2 now:

pm2 start npm -- start

You should see:

Run Nginx as a Proxy Server

Our Nuxt.js project is running, but it is available only on localhost of droplet. We have to tell our server now: „Hey, if someone visits my-domain.com show him a Nuxt.js project website”. We will use a Nginx server to do this:

sudo apt-get install nginx

Next we will create a basic configuration for one project, but in the future you can duplicate it and run a lot of different node.js applications and domains on one droplet.

sudo nano /etc/nginx/sites-available/your-domain.com

In this file put the following content (remember to change “your-domain.com” phrase to your real domain name):

server {
    listen 80;
    listen [::]:80;
    index index.html;
    server_name your-domain.com;

    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;
    }
}

Now all of the incoming traffic to your-domain.com on default http 80 port will be redirected to localhost:3000.

Now remove existing, default configuration:

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

And link our new config file to the sites available directory:

sudo ln -sf /etc/nginx/sites-available/your-domain.com /etc/nginx/sites-enabled/your-domain.com

Finally, test a new nginx configuration and if everything is fine — restart the nginx server:

sudo nginx -t
sudo systemctl restart nginx

Next just add your domain to the droplet and enjoy your Nuxt.js project!

#vuejs #nuxtjs #javascript