Django - CSS File Not Loading In Production server (Debug: False) - css

Use : nginx,gunicorn,linode for server
Debug=False
When I keep debug=False in production the css file don't get loaded.I have also build 404.html page.Suppose some one visit mydomain.com/abcd then he/she will get the 404 page which I have designed.Its good.The issue is css file not loaded.
Debug True
When I keep debug=True in the production the css file get loaded.Everything goes right.But when someone visited the mydomain.com/abcd then he/she will get the django defaualt error page.If I keep debug=True in the production everything goes right but I have heard that keeping debug=True in production is not recommended and may cause the security issues in the sites
Currently what I have in my settings.py and nginx cofig are :
settings.py :
DEBUG =True
ALLOWED_HOSTS = ['ip','mydomain.com','www.mydomain.com']
Nginx config file :
server {
server_name mydomain.com www.mydomain.com;
location = /favicon.ico { access_log off; log_not_found off; }
location projectdir/static/ {
autoindex on ;
root /home/user/projectdir;
}
location / {
include proxy_params;
proxy_pass http://unix:/run/gunicorn.sock;
}
Please help me to solve the issue,since I am struggling from past 1 week.
Currently the site is live and css is loaded by keeping debug=True.But I don't want to have any security issue later.

In settings.py file:
You can simply add like below code:
DEBUG = bool(int(os.environ.get('DEBUG', 0))) #Note: 0 means false and 1 means true
Try this way and check if this is solves your error

config required in your settings.py
...
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATIC_URL = "/static/"
make sure you've run the following, so django finds all your static files and puts them in one place
$python manage.py collectstatic
nginx static config should look more like
...
location /static/ {
autoindex on;
alias /home/user/projectdir/static/;
}

Related

Nginx fancy-index header and footer never load

I'm creating a Nginx file server, and I'm trying to enable the fancy-index module to get have custom header and footer, but I can't get it working, the header/footer never load. (The request isn't even done from the browser).
For now, I've followed this tutorial : https://neilmenon.com/blog/install-nginx-fancyindex
My current config for the site is
server {
listen 80;
server_name myname;
autoindex on;
autoindex_exact_size off;
autoindex_localtime on;
location / {
root /var/www/html
fancyindex on;
fancyindex_exact_size off;
fancyindex_footer /fancy-index/footer.html;
fancyindex_header /fancy-index/header.html;
fancyindex_css_href /fancy-index/style.css;
fancyindex_time_format "%B %e, %Y";
}
}
I've also loaded the module in the nginx.conf on the first line of the file
load_module /usr/share/nginx/modules/ngx_http_fancyindex_module.so;
I also clarify that I am new to nginx, so I apologize if this is a common issue that I should be aware of.
Thanks in advance, any help would be much appreciated
I wasn't able to find a solution to use fancy index however, I've got a workaround by using the module ngx_http_addition_module on which fancy index is based.
This module is here : https://nginx.org/en/docs/http/ngx_http_addition_module.html
Basically, the configuration goes as follows :
location / {
root /var/www/html
addition_types text/html; # Replace this with watever mime type this server is responding
add_before_body /fancy-index/header.html; # Replace the fancyindex_header
add_after_body /fancy-index/footer.html; # Replace the fancyindex_footer
}
You don't have the possibility to link a stylesheet from these directives or changes the time format, but nothing prevent to load a stylesheet from the header and adding a script in it for the time.
I had the same problem. The issue is coming from the fact that you enable autoindex.
To fix the issue you need to comment the line that reference autoindex

How to set different context path for React app in NGINX

I have deployed (using Kubernetes/helm charts) React app to http://localhost:30111/ using embedded NGINX. This single page application requires some NGINX rewrite rules for deep linking of static sources. There are following NGINX rules:
server {
server_name _;
gzip on;
gzip_static on;
location / {
try_files $uri /index.html;
}
}
Everything works fine and application is listening on http://localhost:30111/ as expected.
What I need to do: I need to use new context path for this application e.g. http://localhost:30111/myapp instead of root context path http://localhost:30111/.
How should I write proxy_pass/rewrite rules in NGINX to work on new context path?
Even though its late, i will provide my answer which may help someone later.
As a first step move all the files in the build folder to a sub directory which is same name of context path.
build/myapp/...All static files will be placed here.
Add your context path in package.json file
"homepage": "/myapp" -- this will help set process.env.PUBLIC_URL to /myapp
Add Basename in the BrowserRouter
<BrowserRouter basename={process.env.PUBLIC_URL}>
<Suspense fallback={<Loader />}>
// ... app routes...
</Suspense>
</BrowserRouter>
Change in your nginx configuration to use files from your sub directory
location / {
return 301 /myapp;
}
location ~ ^/myapp {
try_files $uri /myapp/index.html;
You are done. Deploy your application and see Ui redirects directly to your context path and serving the files.

nginx how to serve pictures or media files?

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...

nginx routes redirect to index.html in SPA but second sub dimension

I've an vue.js (Quasar framework with webpack) app and I use vue-router. I use nginx (with laravel forge) on the server side. In the local (quasar dev or npm run dev), everything is alright. I hadn't been able to refresh pages for the address which is like /settings and I solve it with add
location / {
try_files $uri $uri/ /index.html?$query_string;
}
lines to nginx configuration file. After that I could refresh the /settings page on the server. But now, I can't refresh a page if it has one more dimension.
/survey/1
I tried to add these lines to nginx configuration file
location /survey/ {
alias /;
try_files $uri $uri/ /index.html?$query_string;
}
but it doesn't work.
When I look at the errors, I see js addresses are wrong.
http://example.com/survey/js/manifest.js'
It should be
http://example.com/js/manifest.js'
I researched a bit but couldn't find a solution.
I found the problem. It's in webpack build configuration, quasar framework. I just need to modify the Project/config/index.js file's build part. Under the build section, publicPath should be updated from
publicPath: ""
to
publicPath: "/"
And it's the same for the dev section too. When update dev section's publicPath the problem has been fixed.
I just needed to put "/" to publicPath.

Setting expires for dokuwiki lib directory on nginx stops processing .php files

I'm trying install DocuWiki script on nginx web server. Documentation says that I need to put following directive at nginx config file:
location ^~ /lib/ {
expires 30d;
}
When I try to add this, nginx stops sending .php files from lib directory to php-fpm, and send it to me like octet-streams for download. How can I correct this?
Here is the working configuration:
location ~ ^/lib.*\.(gif|png|ico|jpg)$ {
expires 30d;
}
I think the problem stems from the fact that the expires 30d; line catching the php within the /lib directory.
My fix for it, is to only use that line for /lib/ entreis that do not contain .php
location ^~ /lib/^((?!php).)*${
expires 30d;
}
should do the trick.
Still trying to get nice urls to work.

Resources