0

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" 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

success test symlink

  1. Restarted nginx:

    sudo systemctl restart nginx

15.Checked that nginx is running: nginx test

What did I do wrong?

1 Answer 1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.