vue with nginx: path not matching - nginx

I am setting up vue(2.1.x) with nginx(1.10.2), I have following configuration:
location / {
root /var/lib/myRepo/dist/;
index index.html;
}
This works when I hit 'http://localhost:8080/', but when I hit other URLs like: 'http://localhost:8080/products/home', I get:
404 Not Found
I also tried following:
root /var/lib/myRepo/dist/;
location / {
try_files $uri $uri/ index.html$query_string;
}
What can be wrong here and how to correct this.


you can follow like this:
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
try_files $uri $uri/ #router;
index index.html;
}
location #router {
rewrite ^.*$ /index.html last;
}
}

Related

How to Use a Single Custom Error Page for all 404 Requests

I have created a custom 404 page for resources that dont exist.
It works with all endpoints except the ones which have /api/v1/, where I get the default NGINX 404 page.
I have domain.name.conf file in /etc/nginx/conf.d/:
server {
listen 80;
listen [::]:80;
server_name domain.name www.domain.name;
root /var/www/domain.name/public_html;
error_page 404 /not_found.html;
location /api/v1/ {
proxy_pass http://localhost:8080/;
limit_except GET HEAD { deny all; }
}
location / {
index index.html;
try_files $uri $uri/ =404;
}
location = /not_found.html {
internal;
}
}
On adding the $try_files directive inside /api/v1/, "Hello, World!" from the backend REST API is not displayed at /api/v1/hello, even though its a valid endpoint. Instead I get the custom 404 error page:
server {
listen 80;
listen [::]:80;
server_name domain.name www.domain.name;
root /var/www/domain.name/public_html;
error_page 404 /not_found.html;
location /api/v1/ {
proxy_pass http://localhost:8080/;
try_files $uri =404;
limit_except GET HEAD { deny all; }
}
location / {
index index.html;
try_files $uri $uri/ =404;
}
location = /not_found.html {
internal;
}
}
How can I use a single custom error page for all non existing resources ?

Thanks to Richard Smith's comment, the conf file look like:
server {
listen 80;
listen [::]:80;
server_name domain.name www.domain.name;
root /var/www/domain.name/public_html;
error_page 404 /not_found.html;
proxy_intercept_errors on;
location /api/v1/ {
proxy_pass http://localhost:8080/;
limit_except GET HEAD { deny all; }
}
location / {
index index.html;
try_files $uri $uri/ =404;
}
location = /not_found.html {
internal;
}
}

Multiple roots nginx

Is it possible to have a suburl that point to a different root? For example:
www.domain.com/ -> /home/ubuntu/project1
www.domain.com/project2 -> /home/ubuntu/project2
I have this configuration at this moment but I'm getting a 404 when resolving domain.com/project2
server {
listen 80;
server_name domain.com;
root /home/ubuntu/project1;
location /project2 {
root /home/ubuntu/project2;
index index.html;
}
location / {
try_files $uri $uri/ /index.html;
}
}

It's because nginx will append the uri to root directive.
In your example config, accessing domain.com/project2 would try to look for a file named project2 in /home/ubuntu/project2 which is not found and return 404.
To solve your problem, try using alias directives.
server {
listen 80;
server_name domain.com;
root /home/ubuntu/project1;
location /project2 {
alias /home/ubuntu/project2;
index index.html;
}
location / {
try_files $uri $uri/ /index.html;
}
}

How to set nginx location

here is my question
I am learning nginx recently
And I don't know why I can handle my config about location
here is my nginx.conf
server {
listen 8080;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
root /Users/billyliou/web-site;
location / {
root html;
index index.html;
}
location /demo {
index index.html index.htm;
try_files $uri $uri/ /demo/index.html?s=$uri&$args;
}
location /test {
index index.html index.htm;
try_files $uri $uri/ /test/index.html?s=$uri&$args;
}
...
I put two folders into '/Users/billyliou/web-site'
one is demo , the other is test.
Both contain index.html.
And when I type localhost:8080, it shows nginx default page.
When I type localhost:8080/demo it shows demo page.
but when I type localhost:8080/test , it shows demo page too.
the last one is beyond my expectation.
How can I set this config?

Try this
server {
listen 8080;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location /demo {
root /Users/billyliou/web-site/demo;
index index.html index.htm;
try_files $uri $uri/ /index.html?s=$uri&$args;
}
location /test {
root /Users/billyliou/web-site/test;
index index.html index.htm;
try_files $uri $uri/ /index.html?s=$uri&$args;
}
location / {
root /Users/billyliou/web-site;
index index.html;
}
...
}

nginx config add location lead error

I met a problem about Nginx really make me confused.
if I set the server as blow :
server {
listen 80;
server_name _;
root /usr/project/exchange/front/build;
index index.html;
location = /{
try_files $uri $uri/ =404;
}
}
if I add location / in the server. the page shows error.
server {
listen 80;
server_name _;
root /usr/project/exchange/front/build;
index index.html;
location = /{
try_files $uri $uri/ =404;
}
location / {
proxy_pass http://127.0.0.1:8088;
}
}
That's really make confused. Nginx match the url from =/ to /?Why add location / leads to mistake?

Config nginx for Vue.js distribute project

I use the nginx for Vue.js dist server.
my Nginx config is bellow:
server {
listen 80;
server_name qy.abc.xyz;
charset utf-8;
access_log /var/log/nginx/qy.abc.xyz.access.log main;
location / {
access_log /data/nginx_log/access.log main;
error_log /data/nginx_log/error.log error;
root /data/ldl/repo/vue_user_site/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
...
I can access the qy.abc.xyz in browser success, but I can you know in my Vue.js there are many routes, if I access qy.abc.xyz/index or qy.abc.xyz/xxx/xxx, Nginx will get the 404 Not Found error.
You know the dist directory is constituted by many hashed-name.js and a index.html.
How to config my Nginx for my project?
EDIT-1
I tried use this config, but not work.
location / {
access_log /data/nginx_log/access.log main;
error_log /data/nginx_log/error.log error;
#root /data/ldl/repo/vue_user_site/dist;
#index index.html;
#try_files $uri $uri/ /index.html;
return 200 /index.html;
}

I need to configurate URL Rewrite
you can try this
location ~* \.(gif|jpg|jpeg|png|css|js|ico)$ {
root <your static file root>
}
location / {
return 200 /index.html
# or use rewrite
rewrite ^.*$ /index.html
}
Or use some server code that has route like node , asp.net core to send your html

Follow my settings of single-page application config in Nginx:
server {
listen 80;
server_name qy.abc.xyz;
#access_log /var/log/logs/qy.abc.xyz.access.log main;
charset utf-8;
index index.html;
root /data/ldl/repo/vue_user_site/dist;
location / {
try_files $uri $uri/ #rewrites;
}
location #rewrites {
rewrite ^(.+)$ /index.html last;
}
location = /50x.html {
root /usr/share/nginx/html;
}
}

Resources