I have the following configuration to run an angular.js app, which works fine.
location / {
root /usr/share/nginx/html;
index index.html;
expires -1;
add_header Pragma "no-cache";
add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
try_files $uri $uri/ /index.html =404;
}
But when I add cache
location ~* \.(jpg|jpeg|png|gif|swf|svg|ico|mp4|eot|ttf|otf|woff|woff2|css|js)$ {
add_header Cache-Control "max-age=86400, must-revalidate, s-maxage=2592000";
}
The files are not longer accesibles
[error] 5#5: *1 open() "/etc/nginx/html/scripts/vendor-1568b32f3e.js" failed (2: No such file or directory), client: 87.63.75.163, server: localhost, request: "GET /scripts/vendor-1568b32f3e.js HTTP/1.1", host: "myapp", referrer: "http://myapp/auth/login"
Not sure why is trying to get the resources from /etc/nginx/html/ when the root path is /usr/share/nginx/html
You need to make sure that the "root" defined in the server section matches what you want. Or define "root" under your regex location location ~* \.(jpg|jpeg|png|gif|swf|svg|ico|mp4|eot|ttf|otf|woff|woff2|css|js)$. Without a root defined there nginx may be reverting to global definition under the server section.
Related
I use Docker and NGINX to serve SPA built with React. Everything was fine until I added some caching inspired by this gist. Currently, NGINX returns 404 for all files in static folder.
This is how NGINX config looks like:
server {
listen 80;
location / {
root /usr/share/nginx/html/;
include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html;
}
# These two location directives cause the issue, if remove them it will be running fine
location ~* \.(?:jpg|jpeg|gif|png|ico|svg)$ {
expires 7d;
add_header Cache-Control "public";
}
location ~* \.(?:css|js)$ {
add_header Cache-Control "no-cache, public, must-revalidate, proxy-revalidate";
}
}
This is what error messages look like, there is etc folder prepended to the path which is invalid:
2022/09/28 09:58:46 [error] 11#11: *4 open() "/etc/nginx/html/static/css/main.45f86988.css" failed (2: No such file or directory), client: 172.17.0.1, server: , request: "GET /static/css/main.45f86988.css HTTP/1.1", host: "localhost:3244", referrer: "http://localhost:3244/"
Files are definitely stored within the container, but again without that etc folder:
/usr/share/nginx/html/static # find
.
./css
./css/main.45f86988.css
./css/main.45f86988.css.map
./js
./js/496.a53b338e.chunk.js
./js/NotFoundComponent.af4d0ff3.chunk.js
./js/main.adbec619.js
./js/main.adbec619.js.map
./js/285.f49f8f0e.chunk.js
./js/MapComponent.3d89394e.chunk.js
./js/MapComponent.3d89394e.chunk.js.map
./js/NotFoundComponent.af4d0ff3.chunk.js.map
./js/DemoContainer.7bc357cb.chunk.js.map
./js/496.a53b338e.chunk.js.map
./js/main.adbec619.js.LICENSE.txt
./js/285.f49f8f0e.chunk.js.map
./js/DemoContainer.7bc357cb.chunk.js
/usr/share/nginx/html/static #
P.S. I haven't used NGINX before and I'm sorry if the answer is obvious
It looks like your files are in /usr/share/nginx/html/static folder, but nginx is trying to read them from /etc/nginx/html/. I would recommend moving the root /usr/share/nginx/html/ line to the server block.
Something like that:
server {
listen 80;
root /usr/share/nginx/html/;
...
}
I am trying to configure nginx server according to following guide: https://gkedge.gitbooks.io/react-router-in-the-real/content/nginx.html
But looks like it doesn't work, I am trying to use with my docker image of nginx. So,
Dockerfile:
FROM nginx:1.11.5
COPY /dist /usr/share/nginx/html
COPY /vhosts.conf /etc/nginx/conf.d/vhosts.conf
vhosts.conf:
server {
listen 80 default_server;
server_name /usr/share/nginx/html;
root /usr/share/nginx/html;
index index.html index.htm;
location ~* \.(?:manifest|appcache|html?|xml|json)$ {
expires -1;
# access_log logs/static.log; # I don't usually include a static log
}
location ~* \.(?:css|js|json)$ {
try_files $uri =404;
expires 1y;
access_log off;
add_header Cache-Control "public";
}
# Any route containing a file extension (e.g. /devicesfile.js)
location ~ ^.+\..+$ {
try_files $uri =404;
}
# Any route that doesn't have a file extension (e.g. /devices)
location / {
try_files $uri $uri/ /index.html;
}
}
Trying to open a page that doesn't exists.
GET localhost/somestupidrandomurl
nginx error log:
[error] 7#7: *3 open() "/usr/share/nginx/html/somestupidrandomurl" failed (2: No such file or directory), client: 172.17.0.1, server: localhost, request: "GET /somestupidrandomurl HTTP/1.1", host: "localhost"
Thanks in advance.
After a deep search, I realize that the thing is, there is one more default.conf file at /etc/nginx/conf.d/ path and that config overwrites my config.
I simply replace the Dockerfile line 3 as
COPY /vhosts.conf /etc/nginx/conf.d/default.conf and works like a magic.
So I'm trying to run my angularJS app on the linux server, and when I access any url different from / the page is redirected to /, my config for nginx is:
server {
server_name localhost;
root /var/www/myproject/public;
index index.html;
location ~* \.(gif|jpg|jpeg|png|js|css)$ {
}
location / {
allow 127.0.0.1;
expires -1;
add_header Pragma "no-cache";
add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
try_files $uri $uri/ /index.html =404;
}
}
Just a fyi my app just doesn't make requests, just load a local json and navigate using #/page-name(the url is not going to nowhere, angular just use this to render templates in html, this templates is already inside html), nginx need config for accept urls with "#"? any config wrong in this snippet?
I solved this by using
$locationProvider.html5Mode(true).hashPrefix('!');
and this way I'm able to use routes without '#' :D
Here's the deal: I set up the simplest nginx configuration for practicing angular and I configured the routeProvider to use html5mode. So far, so good! I set the base to '/', my links to /view1 and /view2 works fine, but only when I click these links in my index page. When I try to access them directly in the browser (or reload the page), nginx returns me a 403 forbidden. That's a simple configuration but I can't find a simple explanation about it :(
I want to set things up in a way that any route works fine without have to explicitly set it (one by one) in my nginx site.conf. By the way, permissions are good !
Here's the actual conf file:
server {
listen *:80;
server_name rbs.ang;
root /_dev/angularjs/app;
index index.html;
charset UTF-8;
location / {
expires -1;
add_header Pragma "no-cache";
add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
try_files $uri $uri/ index.html;
}
}
You need to configure a fallback route on your server to serve index.html file when a route is not matched.
This works:
location / {
try_files $uri $uri/ /index.html?$query_string;
}
I'm writing an AngularJS single page application using nginx.
I just switched from apache to nginx, but I cant make my config file working.
I'm trying to rewrite everything to index.html to let Angular do the routing.
My nginx.conf is as follow:
server {
index index.html;
location / {
expires -1;
add_header Pragma "no-cache";
add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
try_files $uri $uri/ /index.html;
}
}
Is it possible to have my nginx.conf file in the project root like my .htaccess did?
You dont want nginx.conf in the project root and its not necessary. Also, you don't want direct changes to nginx.conf, you will instead want specific files for different websites in /etc/nginx/sites-available which you enable with a ln in /etc/nginx/sites-enabled.
As far as the config:
server {
root /var/www/mysite/; #or whereever your site files are
index index.html;
location /{
try_files $uri $uri/ =404;
}
}
You are missing the root portion which tells nginx where the site is located.