Deploy a VueJS web app with nginx on Ubuntu 18.04

Note: this is a manual procedure to deploy VueJS SPA web app with nginx. A full automated CI/CD method is described in another post.

Installing Node JS

We use nvm (Node Version Manager) for easy Node JS version switching later if needed.

Install or update nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

Restart your terminal or source ~/.bashrc for required environment variables, then check installed nvm version:

$ nvm --version
0.34.0

Install Node JS

Install Node JS with nvm is as easy as following:

nvm install node

Here, node is an alias for the latest version of Node JS.

To install a specific version of node:

nvm install 6.14.4 # or 10.10.0, 8.9.1, etc.

List all installed Node JS versions:

$ nvm ls
        v8.15.0
->     v11.10.0
default -> node (-> v11.10.0)
node -> stable (-> v11.10.0) (default)
stable -> 11.10 (-> v11.10.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/dubnium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.16.0 (-> N/A)
lts/carbon -> v8.15.0
lts/dubnium -> v10.15.1 (-> N/A)

List all Node versions available:

nvm ls-remote

Switch nvm version:

$ nvm use 8.15.0
Now using node v8.15.0 (npm v6.4.1)

Build VueJS project

cd {project_folder}
npm install

then

npm run build

After successful installation, you should have a dist folder, to which you will point your web root.

Install and configure nginx

Install nginx

sudo apt install nginx

Double check to make sure the nginx service is running with command service nginx status, then open your browser and enter url http://{server_ip}, you should see some welcome message from nginx.

Configure nginx

sudo touch /etc/nginx/sites-available/vue_project
sudo ln -s /etc/nginx/sites-available/vue_project /etc/nginx/sites-enabled/vue_project
sudo vim /etc/nginx/sites-available/vue_project

Sample configuration:

server {
    listen      80;
    server_name example.com;
    charset utf-8;
    root    {{app_root}}/dist;
    index   index.html index.htm;
    # Always serve index.html for any request
    location / {
        root {{app_root}}/dist;
        try_files $uri /index.html;
    }
    error_log  /var/log/nginx/vue-app-error.log;
    access_log /var/log/nginx/vue-app-access.log;
}

Check configuration, then restart nginx:

sudo nginx -t
sudo service nginx restart

Now, you should access your api through port 80 with your domain name: http://example.com.

Note: this is a manual procedure to deploy VueJS SPA web app with nginx. A full automated CI/CD method is described in another post.