2

I using nginx to run my project. So I install nginx to my localhost to testing it

My configuration nginx on localhost like this :

location / {
    root   html;
    index  index.html index.htm;
}

If I refresh a page, it exist error like this :

404 Not Found
nginx/1.14.0 (Ubuntu)

I search on google and I get some reference. I try like this :

location / {
    root /www/dist;
    try_files $uri /index.html;
}

I works. There is no error

Then I deploy my project to production

My configuration nginx on production like this :

location / {
    root /www/dist;
    try_files $uri /index.html;
}

It works too

But my problem is I need to change the location to be like this :

location /startup {
    root /www/dist;
    try_files $uri /index.html;
}

I have a lot of projects in the nginx. So I have to add /startup to show that it's startup project. But it makes error like this :

404 Not Found
nginx/1.14.0 (Ubuntu)

How can I solve this problem?

moses toh
  • 12,344
  • 71
  • 243
  • 443
  • 1
    Check out [this documentation issue](https://github.com/vuejs/vue-router/issues/2863) and [the resulting change](https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations) – Phil Feb 24 '20 at 00:30

1 Answers1

1

When you use root in nginx, it always appends the route to the end of the file path but that's not obvious when using /. So in your first examples with location /, it searches for this path on the server:

root + /www/dist + /

But when you use location /startup, it looks for this path which does not exist:

root + /www/dist + /startup

So to use both root and "/startup", you would need a directory called "startup". But, you can use alias. Try this:

location /startup {
    alias /www/dist;
    try_files $uri $uri/ /startup/index.html;
}

The Vue Router docs recommend something similar to this as well. (But they don't show how to use a subfolder alias.)

Dan
  • 59,490
  • 13
  • 101
  • 110
  • I try like this : `location /startup/ { alias /www/dist; try_files $uri /index.html; }`. But it does not works. It's the same – moses toh Feb 23 '20 at 08:25
  • I use `try_files` to solve `404 Not Found`. If I don't use it, seems it does not works – moses toh Feb 23 '20 at 11:05
  • What is your full root path? I'll change my answer to something else to try. – Dan Feb 23 '20 at 13:05
  • What do you mean full root path? This : `Macintosh HD/www/dist`? – moses toh Feb 23 '20 at 23:38
  • Oh ok, so `www` is top level. I edited my answer with something you can try – Dan Feb 24 '20 at 00:17
  • I try to access `http://localhost/startup`, there appears a blank page – moses toh Feb 24 '20 at 00:53
  • Then you probably forgot to set `publicPath` in your Vue config. See this answer: https://stackoverflow.com/questions/60331499/vue-adds-to-path-css-and-js-not-visible/60332120#60332120. Where it says `/path/to/folder/`, put `/startup/`. You will need to rebuild your project too. – Dan Feb 24 '20 at 00:56
  • 1
    I had try it on my localhost and it works. But later I will try that on a production server. If it works i will accept your answer – moses toh Feb 26 '20 at 00:19
  • Hi. I want to ask. Why use `alias`? I read here https://stackoverflow.com/questions/10631933/nginx-static-file-serving-confusion-with-root-alias. using `root` is better than `alias` – moses toh Feb 26 '20 at 08:58
  • Which answer says `root` is better? What does it say is better about it? `alias` is the one that does what you asked. If you prefer `root` instead, you can do that, you just need to use an actual path to a folder named `startup`. My answer also mentions how to do that. – Dan Feb 26 '20 at 11:34
  • You are great. Thanks a lot :) – moses toh Feb 26 '20 at 12:17
  • 1
    Anything good in me is God's doing, thanks for your encouragement. I linked the Vue Router docs and adjusted the answer slightly to match the way the docs suggest, using `alias`. – Dan Feb 26 '20 at 12:25
  • Okay. So which is the best solution? Using `alias`? – moses toh Feb 26 '20 at 17:17
  • 1
    Yes, still alias. The only difference now is using both `$uri $uri/` instead of just `$uri` – Dan Feb 26 '20 at 17:25
  • @Dan I'm running into a similar issue. I want to serve thumbnails from nginx to vue. My paths on the frontend look like `` and my server block route looks like `location /thumbnail/ { alias /opt/myapp/static/img/thumbnail/; }`. But I keep getting the broken image icon. What am I doing wrong? – Soubriquet Aug 30 '20 at 14:44
  • @Soubriquet - It's probably best to ask a new question and provide all relevant information. – Dan Aug 31 '20 at 04:30