nginx how to serve pictures or media files? - nginx

I'm having issues serving pictures with nginx. I originally started with a Django project and I wanted to serve the user uploaded media files via nginx but I wasn't able to get it working no matter what I tried.
So, I've make a second temporary droplet/server and am trying a bare bones setup with no Django project, just Nginx, to see if I can get it to simply serve an index and a couple pictures in a folder called 'media'. Here is the server block:
server {
listen 80;
listen [::]:80;
root /var/www/example.com/html;
index index.html;
server_name 159.89.141.121;
location / {
try_files $uri $uri/ =404;
}
location /media/ {
root /var/www/example.com/media;
}
}
Now, the index.html is served fine but if I try to go to 159.89.141.121/media/testpic.jpg it still doesn't work and returns a 404 error. I'm at a complete loss here, I've tried using alias instead of root, I've tried changing the folder structure and setting all permissions to 777 and changing folder and file ownership, permissions shouldn't be a problem because the index.html works fine with the same permissions; I just cant seem to figure out what I'm doing wrong. The picture is in the folder but nothing I try allows me to access it via the uri. Are there any obvious problems with my server block?

Well I decided to read the documentation and realized that the location block adds to the root directory specified..
So the pathing of
`location /media/ {
root /var/www/example.com/media;
}`
would end up routing example.com/media/testpic.jpg to /var/www/example.com/media/media/testpic.jpg
I've changed the location block to look like this
location /images/ {
root /var/www/example.com/media;
}
and it will now route example.com/images/testpic.jpg to /var/www/example.com/media/images/testpic.jpg
I'm not sure why it didn't work when I tried the alias directive, though...

Related

How to route the custom URL path using nginx server?

I am building the angular app and want to route the URL to http://localhost/sample/AngularApp/. but don't want to give the entire URL in the browser. I will give the only localhost. In angular, while building the dist we are using the command ng build --base-href=/sample/AngularApp/ and created the folder structure /sample/AngularApp in Nginx mentioned path /usr/share/nginx/html.so while accessing the application still, we are giving the entire path in browser. so, How could I resolve this issue and how to configure that path in nginx.conf file to autoroute the URL?
I would go with standard configuration:
server {
listen 80;
listen [::]:80;
root /var/www/html/YourAngularApp/dist;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
}
}
This gives opportunity to serve other files (if found) or fall back to index.html located at the project's root.
Now, if you have everything in place you should build your project with
ng build --base-href=/
--base-href=/ can be omitted as it defaults to /. Please have a look at Angular docs about using --base-href and --deploy-url

Serving static website in nginx, wrong path for static files

I'm trying to use nginx to serve a static website that was given to me. Its folder structure is like this:
static_website/
index.html
www.example.com/
resources.example.com/
uploads.example.com/
The index.html file in the root is the one generated by httrack and it simply contains a redirect to www.example.com/index.html.
Inside the folder www.example.com are all the html files, in the other two folders are the css, javascript and image files.
Here is the nginx configuration:
server {
index index.php index.html index.htm;
server_name example.com;
location / {
root /var/www/static_website/www.example.com;
try_files $uri $uri/ =404;
index index.html;
}
}
I can navigate through the pages, but the css, javascript and image files are not loaded.
The path to one of the css files inside the html is like this:
href="../resources.example.com/style.css"
The only way I managed to get this working was to have the have the url like this:
example.com/www.example.com/
This way, all the path are correct. I'd like to avoid this and have simply example.com.
Is there a way to do this?
It looks like the site was originally intended to operate with ugly URLs like //example.com/www.example.com/.
But the path-relative URIs for the resources should work just fine relative to /, you just need to provide a location block which matches /resources.example.com/.
For example:
location / {
root /var/www/static_website/www.example.com;
try_files $uri $uri/ =404;
index index.html;
}
location /resources.example.com/ {
root /var/www/static_website;
}
I originally commented that you should try this:
location ~ \.(css|js|jpg|png|svg)$ {
root /var/www/static_website;
}
Which achieves a similar goal, but Nginx will process prefix locations more efficiently that regular expression locations.
I want to share my experience with this problem for others encountering similar issues as the solution was not so obvious to me
My setup and problem in particular had to do with cloudlflare settings which i was using to leverage TLS instead of handling it on the origin server for one of my 2 sites. if you are serving your site from a CDN that supports encryption and you use nginx on your origin consider the following setup:
# static1.conf
{ server_name static1.com; root: /var/www/static1/public; listen 80; listen 443; }
# static2.conf - no tls setup in nginx, figured id let cloudflare handle it
{ server_name static2.com; root: /var/www/static2/public; listen 80; }
static1 was setup at the origin with letsencrypt to handle tls connections
static2 was setup at the origin without any tls configuration
from left to right, here are the appropriate cloudlfare TLS modes which allowed me to access the correct files thru nginx
The distinction between full and flexible is that full mode lets the origin handle the certificate.
Initially I had the static2 site misconfigured as full, which lacked a listen directive for 443 causing nginx to serve static1 instead.
I realize the original question has nothing to do with cdn's or cloudflare but this scheme / protocol mismatch cost me a few hours and I am hoping to save someone else from similar grief
Honestly I am surprised nginx doesn't stick to matching on server_name and that oit implicitly matches on scheme as a fallback (or atleast appears to), even without a default_server specified - and without any meaningful messages in the logs to boot! Debugging nginx is a nightmare sometimes.

NGINX try_files does not find the correct folder

I've been trying to get a host set up for my personal portfolio site, and I'm just not understanding why NGINX isn't serving up my files as I expect. My root directory, /usr/local/var/apps, holds symlinks to the latest versions of my web apps, including the main site. I've tried dozens of different configurations, but I think this is the best so far:
server {
listen 8080;
server_name mysupertestsite.com;
index index.html;
root /usr/local/var/apps/;
location / {
try_files portfolio-page$uri portfolio-page$uri/ $uri $uri/ =404;
}
}
I want http://mysupertestsite.com:8080 to serve up the page under /usr/local/var/apps/portfolio-page/, and my web app names in the path to serve up their respective files, i.e. http://mysupertestsite.com:8080/wikipedia-viewer should serve up /usr/local/var/apps/wikipedia-viewer. Currently, the apps do work. The main portfolio page does not, and I'm getting a 403.
I'm not married to this configuration or directory structure. Any help would be very much appreciated.

Nginx root location

On our server we have the /var/www/root/html/web/ directory that contains all the code, and a /var/www/root/html/web/front/ that contains our static frontend code.
Our frontend communicates with the code only via REST API calls, which have the /api/ prefix, so all the calls will be accessible via ourdomain.com/api/products/ , ourdomain.com/api/products/45 and so on. We also have an admin running there, on ourdomain.com/admin
When we want to see the actual frontend, we have to go to ourdomain.com/front in the browser, which is of course not what we want.
We have, among other stuff, this in our config:
root /var/www/html/web;
index index.php index.html;
location /front {
# some magic to make sure the /front folder will not be parsed
index nothing_will_match;
autoindex on;
}
However, what we wish is that if you go to ourdomain.com it will load /var/www/html/web/front/ folder as root, and if you go to ourdomain.com/api/* or ourdomain.com/admin/* it will load the /var/www/html/web/ as root. Is that possible?
NOTE: the /var/www/html/web/front/ folder can be moved somewhere else if needed, to /var/www/html/front/ for example
What you need is the alias directive (instead of root) to rewrite the URI:
root /var/www/html/web/front;
index index.php index.html;
location / {
}
location /api {
alias /var/www/html/web/;
}
location /admin {
alias /var/www/html/web/;
}

NGINX Server block when MediaWiki in subdirectory

MediaWiki installation was in domain.com/subdirectory and worked with Apache as the server.
Pages were found domain.com/subdirectory/index.php/Main_Page
The server was changed to NGINX the other night. WordPress and XenForo work fine but the location block for MediaWiki isn't working properly.
Since I'm new to NGINX and the configuration file inner workings, I'm not sure how to write the location block to get the results equal to the Apache page layout (index.php shows).
This is my latest attempt (failed, of course).
#MEDIAWIKI
location /subdirectory/ {
try_files $uri $uri /index.php?query_string;
}
This writes to domain.com/subdirectory/title and the index.php is missing.
The documents show writing to a subdomain and this is not what I'm wanting. The index.php also needs to remain.
Thank you for providing as much information so this is solved. For example, I'm not sure if LocalSettings needs modification.
Try adding
index index.php index.html;
Updated*
location /subdirectory/ {
index index.php index.html;
}
Using Rewrite
rewrite ^ /index.php?$request_uri;
this will forward requests to /subdirectory/index.php?
In your case, /subdirectory/index.php?/Main_Page

Resources