Deploying Vue.js + Node + MySQL + NginX app

Posted May 16, 2020 16k views

Hello everyone,
I have set up Ubuntu droplet with UFW, MySQL, Node, Vue-Cli, and NginX.

I have created an “apps” folder inside “html”


apps folder contains two folders:


Inside codvue folder, I cloned the Vue app
and for codnode folder, I cloned the node api (uses port 3001)

Here are NginX server blocks (or whatever they are called) settings.

Default server config:

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html/apps/codvue/dist;

       # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;
        error_page 404 /;

        location / {
                try_files $uri $uri/ =404;


Created another server block named node:

server {
        listen 81 default_server;

#       # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name IPADDRESS;
        error_page 404 /;

        location / {
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-NginX-Proxy true;
                proxy_set_header Host $http_host;
                proxy_cache_bypass $http_upgrade;
                proxy_redirect off;


Both the Default and node are linked to sites-enabled…

The issue that I’m currently experiencing is:

When I go to /var/www/html/apps/codvue/ and create a build using:

sudo npm run build

After restarting Nginx service, I open the website using the IP address, the interface of the app loads just fine (means Vue is working, correct?). Alongside I’m running the Node app in another terminal which says running at port 3001 and Db connection successful.

But other than the Vue interface no data is shown. front end working. Backend NOT Displaying. When I try to access this URL: http://IPADDRESS:81/Api/category/categories-list it shows the data:

[{"catID":1,"catName":"sabdasdv1","catDesc":"qdjqbwd","isActive":"1","date":"2020-03-05T00:51:24.000Z"},{"catID":3,"catName":"Books","catDesc":"Paid","isActive":"1","date":"2020-03-05T00:38:22.000Z"},{"catID":4,"catName":"Testing one","catDesc":"","isActive":"1","date":"2020-03-05T00:38:22.000Z"},{"catID":48,"catName":"wejbw","catDesc":"","isActive":"1","date":"2020-03-05T00:38:22.000Z"},{"catID":50,"catName":"Best friend 2","catDesc":"","isActive":"1","date":"2020-03-05T00:38:22.000Z"},{"catID":51,"catName":"testcat","catDesc":"","isActive":"1","date":"2020-03-05T00:38:22.000Z"}]

Now I go back to /var/www/html/apps/codvue/ and execute the following command:
sudo npm run serve

The app is served on port 8080. When I open the http://IPADDRESS:8080, the app loads just fine… Both the interface and the data is there.

Can someone please guide me on how can I get the build version to work? What am I doing wrong here?

Below is the Vue config file:

const path = require('path');

module.exports = {
    // outputDir :path.resolve(__dirname, '../server/public'),
                target: 'http://IPADDRESS:81'

I have a feeling that I’m missing a very small but important piece of this puzzle to make this thing work with Vue’s Build version.

Any sort of help will be highly appreciated. Thank you for your time in reading it to the end.

Thanks again!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Submit an Answer
1 answer

Any help will be highly appreciated. I am new to this and not sure where the issue is.