Issue with Deploying Vue.js + Node + MySQL + NginX app #DigitalOcean - node.js

Question

I have set up Ubuntu droplet with UFW, MySQL, Node, Vue-Cli, and NginX.
I have created an “apps” folder inside “html”
/var/www/html/apps/
apps folder contains two folders:
/var/www/html/apps/codnode
/var/www/html/apps/codvue
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_pass http://127.0.0.1:3001;
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":....
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'),
devServer:{
proxy:{
'/api':{
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!

Answer 1

Let's try a different configuration.
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;
}
location /api {
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_pass http://127.0.0.1:3001;
proxy_set_header Host $http_host;
proxy_cache_bypass $http_upgrade;
}
}
Please comment the block with configuration with server on port 81 (whole file).
After make the configuration, test the configuration to check if there is syntax errors:
sudo nginx -t
If everything ok, output should be:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
Then restart your nginx with:
sudo nginx -s reload
Cache clean your browser and try again.