How to deploy Vue JS website to Ubuntu based VPS?

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:

1. Created Vue project

2. Created config file in vue project "vue.config.js"

3. Added port configuration to this file:

   module.exports = { devServer: { port: 4000 } };

4. Pushed code to github 5.Entered my VPS server

5. Cloned directory from github

6. Installed necessary dependencies:

   npm install --production

7. Installed Vue CLI for building project

   npm i @vue/cli-service

8. Built dist folder for production:

   npm run build

9. in directory /etc/nginx/sites-available/ created file control-surface-frontend.conf

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

    }

11. Activated symlink for that file:

    sudo ln -s /etc/nginx/sites-available/control-surface-frontend.conf /etc/nginx/sites-enabled/control-surface-frontend.conf

12. Tested symlink:

    sudo nginx -t

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