1

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;
    }
    
}
arve
  • 569
  • 2
  • 10
  • 27
  • 1
    As well as for any other JS-based app like React or Angular, the typical config will be `root /path/to/dist; location / { try_files $uri /index.html; }` – Ivan Shatsky Jun 01 '22 at 20:11
  • @IvanShatsky - thanks. do you know of any blog or site , that has a example – arve Jun 02 '22 at 00:24
  • 1
    Did you try any search? [Here](https://stackoverflow.com/questions/47655869/how-to-use-vue-js-with-nginx) is a typical example (however using `try_files $uri $uri/ /index.html` is somewhat redundant; `try_files $uri /index.html` should be enough unless you have other `index.html` files under nested subdirectories, which is very unlikely for the typical Vue/React/Angular web app). – Ivan Shatsky Jun 02 '22 at 00:34
  • 1
    Of course, having some API you should have both built static app and served dynamic API-related part, where API requests should be proxied using `location /api/ { ... }` (or any other used URI prefix) to your `vue-cli-service`. However it seems you already have that part of configuration; however what you have right now is suitable for proxying WebSocket only, if you have some kind of REST API (or similar), you'd need to change it removing WebSocket-related pieces (which is everything except `proxy_pass http://localhost:8080/;` and `proxy_set_header Host $host;`). – Ivan Shatsky Jun 02 '22 at 00:41
  • 1
    And the last thing, check [this](https://stackoverflow.com/questions/53649885/a-little-confused-about-trailing-slash-behavior-in-nginx) thread in order to make a decision what do you actually need - `proxy_pass http://localhost:8080/;` or `proxy_pass http://localhost:8080;` – Ivan Shatsky Jun 02 '22 at 00:43

1 Answers1

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

hamaronooo
  • 471
  • 4
  • 20
  • 2
    And even this one is redundant, there is no need to duplicate the `root` directive with the same value. – Ivan Shatsky Jun 02 '22 at 07:38
  • 1
    @IvanShatsky is try_files block redundant? – hamaronooo Jun 02 '22 at 10:55
  • 2
    Sorry, I don't understand a question. The `root` directive inside the `location / { ... }` is not needed since the same value will be inherited from the upper level. The `try_files` is essential here, the default behavior, unless specified explicitly, would be `try_files $uri $uri/ =404` which is definitely not what we want for the Vue/React/Angular apps. – Ivan Shatsky Jun 02 '22 at 10:59
  • 1
    @IvanShatsky , thanks for explanation, but in upper level I have other `server` statements, so from this piece of code we can't say that we have inheritance XD <3 – hamaronooo Jun 02 '22 at 11:09