how to host a vue js app to a ngnix server?

Question

going through basic nginx configuration to host an app ( sample config below) , but this makes sense for a static web app. how to set up for a vue js app, where i have to run the npm run serve to start app. do i just build the app , with npm run build and then copy the build/dist folder somewhere . i am trying this on RHEL 8. my package.json file looks like this

{
   "name": ....
   ....
   "scripts":{
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     ...
   }
}

server {
    listen 80 default_server;
    listen [::]:80 default_server; 
    root /var/www/html;  
    index index.html; 
    server_name _;  
    location / {
       try_files $uri $uri/ =404;
    }
    location /api/ {
           proxy_pass http://localhost:8080/;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           proxy_set_header Host $host;
           proxy_cache_bypass $http_upgrade;
    }
    
}

Answer 1

I host like this, and it works pretty fine.

In /etc/nginx/nginx.conf :

server {
    listen 80;
    server_name mysite.com;

    charset utf-8;
    root /var/www/mysite-folder;
    index index.html index.htm;

    location / {
            root /var/www/mysite-folder;
            try_files $uri /index.html;
    }

    include  /etc/nginx/mime.types;
}

And as you can see, all compiled Vue files I store in /var/www/mysite-folder