How to deploy Vue JS website to Ubuntu based VPS? - vue.js

Question

I have a VPS based on Linux Ubuntu.
I have two websites.
I have two domain names for both websites.
One website with domain trail-notes.tk is successfully deployed to VPS and is running on server without any ports in config file. Website is working fine. The problem is with the second website which I want to run on a specific port 4000 but on the same ip address of my server
When I did all the configurations and hit control-surface.ml it returns error "502 Bad Gateway"
How to deploy Vue applications/websites properly?
Config file of first website trail-notes.tk for nginx:
server {
listen 80;
server_name trail-notes.tk www.trail-notes.tk;
root /home/kentforth/webapps/trail-notes/dist;
index index.html index.htm;
location / {
root /home/kentforth/webapps/trail-notes/dist;
try_files $uri $uri/ /index.html;
}
error_log /var/log/nginx/vue-app-error.log;
access_log /var/log/nginx/vue-app-access.log;
}
What I already did:
Created Vue project
Created config file in vue project "vue.config.js"
Added port configuration to this file:
module.exports = {
devServer: {
port: 4000
}
};
Pushed code to github
5.Entered my VPS server
Cloned directory from github
Installed necessary dependencies:
npm install --production
Installed Vue CLI for building project
npm i #vue/cli-service
Built dist folder for production:
npm run build
in directory /etc/nginx/sites-available/ created file control-surface-frontend.conf
Added configuration to that file:
server {
listen 80;
server_name control-surface.ml www.control-surface.ml;
root /home/kentforth/webapps/vue-test/dist;
index index.html;
charset utf-8;
location / {
proxy_pass http://localhost:4000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location = /favicon.ico { access_log off; log_not_found off; }
}
Activated symlink for that file:
sudo ln -s /etc/nginx/sites-available/control-surface-frontend.conf /etc/nginx/sites-enabled/control-surface-frontend.conf
Tested symlink:
sudo nginx -t
Restarted nginx:
sudo systemctl restart nginx
15.Checked that nginx is running:
What did I do wrong?

Answer 1

I made wrong config file for nginx.
Here is my correct nginx config file and my website works fine:
server {
listen 80;
listen [::]:80;
server_name trail-notes.tk www.trail-notes.tk;
root /home/kentforth/webapps/trail-notes/dist;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
}
error_log /var/log/nginx/vue-app-error.log;
access_log /var/log/nginx/vue-app-access.log;
}