I'm attempting to server files and assets from a subdirectory of a site, like this:
Site: /go/tools/ (index.html is the root file)
With assets linked like this: /go/tools/assets/js/main.js
using nginx, my configuration looks like this:
server {
listen 80;
listen 443 ssl http2;
server_name local.tools;
index index.html;
location /go/tools {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
root /code/testing/build;
try_files $uri /$uri /index.html =404;
}
When I load the site with the url local.tools/go/tools, the index.html page loads and the html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="assets/img/favicon.ico">
<link href="assets/css/vendor/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="assets/css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>...
So that part is good. The problem is that the style and javascript aren't there. When I view the network tab, I see each asset is loading the index.html content instead of its own content.
what am I missing in my configuration so if I go to: /go/tools/assets/css/styles.css that I see the actual stylesheet?
You need to use below config
location /go/tools {
location /go/tools/assets/ {
alias /code/testing/build/assets/;
}
alias /code/testing/build;
try_files $uri $uri/ /index.html =404;
}
Basically when url is /go/tools/assets you need the search to happen from /assets in the build directory. That is why we need alias in the nested location
Related
I made a next.js export into the out folder.
Folder structure is:
out
index.html
terms.html
privacy.html
I set up nginx to serve files from this folder:
server {
root /var/www/myproject/out;
index index.html index.htm index.nginx-debian.html;
server_name myproject.com;
location / {
try_files $uri $uri/ /index.html;
}
}
The main page (index) opens fine. Navigation from within the app to urls like myproject.com/privacy works fine. The problem is if I try to open these links directly, it will serve the main page (index) instead of the actual pages, since those urls don't exist in the folder. The only way to open the privacy page directly is adding the html extension to the url: myproject.com/privacy.html.
How to configure nginx to serve the actual page myproject.com/privacy.html when someone enters the myproject.com/privacy url?
Issue is in try_files.
As current configuration includes:
/ (which default route to index.html at root path)
index.html
/index.html
test/*.html
To access pages route path name without extension i.e., /privacy that format should be included in try_files insdie location /
Try this:
try_files $uri $uri.html /$uri /index.html
I needed a 2nd location block because of the way NextJS does ids in the url. NextJS will have files like [id].html or whatever.
location / {
try_files $uri $uri.html /$uri /index.html;
}
location ~* /(.*)(\d+)$ {
try_files $1/[id].html /$1/[id].html /index.html;
}
So I needed the 2nd block to catch urls of the form /whatever/etc/5 and redirect nginx to /whatever/etc/[id].html
I would like to have an nginx server hosting web applications on the same domain, with different paths.
For example,
http://example.org/booksapp/signin.html should point to the first app,
and http://example.org/shoesapp/signin.html should point to the second app
within my host, I have two folders, one for each app:
/var/webfolder/booksapp and /var/webfolder/shoesapp
my nginx configuration is the following
server {
server_name example.org;
index index.html index.htm;
location /foodapp {
root /var/webfolder;
try_files $uri $uri/ =404;
}
location /shoesapp {
root /var/webfolder;
try_files $uri $uri/ =404;
}
listen [::]:80;
listen 80;
}
This configuration does not work. My browser just shows a blank page when trying to load either web application.
Meanwhile, the nginx log files shows a list of 404 for every resource that the apps are trying to load.
What am I doing wrong?
You have to change your html files to use the right paths.
Your "booksapp" lives at example.org/booksap/, the html pages must load any static resource using that same path.
This is the head section of an example html file. If you deploy this to any of your sites it will not work, nginx can't find "normalize.css" and "styles.css" unless you specify the right path. Right now nginx is acting as a router between the two apps, you can't ask for just a file, you must specify which app.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>sakura demo</title>
<link href="normalize.css" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css" media="all">
</head>
It should be:
<link href="booksap/normalize.css" rel="stylesheet" type="text/css">
<link href="booksap/styles.css" rel="stylesheet" type="text/css" media="all">
I am trying to setup a Question2Answer website (yoalfaaz.com) on nginx with Ubuntu. Now, the homepage of the website does load but any other page doesn't load correctly. Mostly, when I click for any post on my website, it opens the homepage again and sometimes just breaks the layout.
Here's the sites-available file
server {
listen 80 ;
listen [::]:80 ;
root /var/www/yoalfaaz.com/html;
# Add index.php to the list if you are using PHP
index index.php index.html index.htm index.nginx-debian.html;
server_name yoalfaaz.com www.yoalfaaz.com;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ /index.php$is_args$args;
}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/run/php/php7.0-fpm.sock;
}
location ~ /\.ht {
deny all;
}
}
Now, previously only the homepage was opening and for every other page, I was getting 404 Not Found error. So I made some changes to try_files line and after that, the website pages are not opening in the correct way.
I have also checked for any kind of errors, but there are none and if I try nginx -t then it also shows successful. Please help me out, guys.
Apparently the problem is not nginx, but your application.
Looking at the HTML of your pages I see this:
<link href="./qa-plugin/q2a-embed-master/qa-embed.css" rel="stylesheet">
<link rel="stylesheet" href="./qa-plugin/q2a-tag-list-widget-master/tag-list.css?" TYPE="text/css">
<link rel="stylesheet" href="./qa-plugin/Welcome-Widget-master/welcome-widget.css?" TYPE="text/css">
The URLs of your CSS files are relative to the current path, so basically the location changes if the URL contains something that resembles a path or subdirectory.
Take for example this URL: http://yoalfaaz.com/4966/pardesi-ke-naam
Trying to load the CSS file ./qa-plugin/q2a-embed-master/qa-embed.css on that page will load http://yoalfaaz.com/4966/qa-plugin/q2a-embed-master/qa-embed.css which results in a 404 error.
You should change your code to output absolute URLs or root-relative URLs.
Example:
Absolute URL: http://yoalfaaz.com/qa-plugin/q2a-embed-master/qa-embed.css or //yoalfaaz.com/qa-plugin/q2a-embed-master/qa-embed.css (the last one is protocol-relative URL)
Root-relative URL: /qa-plugin/q2a-embed-master/qa-embed.css (always will start at the root of the domain)
I want to simultaneously optimize my site for HTTP/2 and HTTP/1.x. For HTTP/2 (and SPDY), since there are no additional round-trips for requests, I'd like to serve my CSS and JS files separately, to gain the benefit of independently caching each file. However, if I only did that, HTTP/1.x clients would suffer from additional round-trips; so for them, I'd like to serve my CSS and JS files concatenated.
Ideally, HTTP/2 users would be served this HTML:
<html>
<head>
<link rel="stylesheet" href="stylesheet-1.css">
<link rel="stylesheet" href="stylesheet-2.css">
</head>
<body>
<script src="script-1.js"></script>
<script src="script-2.js"></script>
</body>
</html>
And HTTP/1.x users would be served this HTML:
<html>
<head>
<link rel="stylesheet" href="all-stylesheets.css">
</head>
<body>
<script src="all-scripts.js"></script>
</body>
</html>
Is it possible to configure nginx to serve different HTML files depending on the client's protocol?
Yes, you can do so via the $server_protocol variable. I would usually recommend to interpolate file locations by variable expansion. But in this case I fear this would leave you open to injection attacks as the content of this variable seems to be copied verbatim from the request line.
There is a solution by exploiting the ngx_http_map_module, though. Assuming your site sits in /srv/www:
map $server_protocol $version {
default "1.1";
"HTTP/2.0" "2.0";
# extra case for any SPDY version
"~SPDY/" "2.0";
}
server {
listen [::]:80;
# The line below requires a working SSL configuration!
listen [::]:443 ssl http2;
server_name example.com
root /srv/www/http-1.1/htdocs;
location / {
root /srv/www/http-$version/htdocs;
try_files $uri $uri/ #fallback;
}
# fallback for HTTP/1.1 files. If this fails as well, we get a 404.
location #fallback {
try_files $uri $uri/ =404;
}
}
This would serve all requests out of /srv/www/http-2.0/htdocs for HTTP/2.0 requests and out of /srv/www/http-1.1/htdocs for all others. If a resource specially crafted for HTTP/2.0 cannot be found, the coresponding file for HTTP/1.1 is being served as a fallback.
I want to run a simple nginx page that serves two pages. One from folder ~/A and one from ~/B
Each folder runs a copy of Python's SimpleHTTPServer in ports 1000 and 2000
Each file has a single file called index.html with text Hello World!
server {
listen 80;
index index.html index.htm;
# Make site accessible from http://localhost/
server_name localhost;
location / {
root ~/A;
proxy_pass http://localhost:1000;
}
location /B/ {
root ~/B;
proxy_pass http://localhost:2000;
}
}
Unfortunately curl http://localhost/B/index.html returns a 404.
<head>
<title>Error response</title>
</head>
<body>
<h1>Error response</h1>
<p>Error code 404.
<p>Message: File not found.
<p>Error code explanation: 404 = Nothing matches the given URI.
</body>
What is wrong with my nginx conf file? Why can't it route properly?
I think you want use alias ~/B instead of root ~/B because your location /B/ will try ~/B/B. See alias and root documentations.
you can open the nginx debug log and s.
i think this url will matches 'location \' and goto A.