Nginx won't serve static files - css

I followed this tutorial to deploy my Django project on DigitalOcean. I've installed Nginx and Supervisor and all worked until I set DEBUG option in the settings.py to False
I tried to configure nginx.conf and settings.py million times. Changing root to alias wouldn't help.
Nginx configuration file:
upstream app_server {
server unix:/home/db1/run/gunicorn.sock fail_timeout=0;
}
server {
listen 80;
# add here the ip address of your server
# or a domain pointing to that ip (like example.com or www.example.com)
server_name ...;
keepalive_timeout 5;
client_max_body_size 4G;
access_log /home/db1/logs/nginx-access.log;
error_log /home/db1/logs/nginx-error.log;
location /static/ {
root /home/db1/site1/static;
}
# checks for static file, if not found proxy to app
location / {
try_files $uri #proxy_to_app;
}
location #proxy_to_app {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://app_server;
}
}
Settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

It's quite tricky, just use one of those two lines according to status of DEBUG
STATIC_ROOT = os.path.join(BASE_DIR, 'static/') #Production
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static/'), ) #Development

Here is a few steps that helped me in solving this problem. Don't know exactly which one is an actual solution)
Changing the owner of static folders to a recently created user (a newly created user for new project like in tutorial)
Connection to the server via IP address only (without PORT)
Still, I don't get it why adding a PORT will cause static files to be held at server

Related

Nginx multiple Apps on same port reverse proxy

I'm trying to run a django app and and angular one on my VPS using Nginx. Below is my config file code:
server {
listen 80;
server_name www.the-patron.com the-patron.com;
charset utf-8;
location = /favicon.ico { access_log off; log_not_found off; }
location /staticfiles/ {
root /root/thepatron/The-Patron-Backend;
}
# Django Backend
location /back/ {
include proxy_params;
proxy_pass http://unix:/root/thepatron/The-Patron-Backend/thepatron.sock;
}
# Angular Frontend
location / {
proxy_pass http://localhost:4200/;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
}
}
Here my Angular app is running well and the Django one isn't. If I change location /backend/ to location / on line 12 and location / to location /frontend/ on line 18 then I will get the Django app to run while the Angular app will not.
How can I run both and change the location of each?
As my previous approach to host my Angular and Django apps separately was totally wrong. I finally managed to solve my issue thanks to the comments of #Vipulw above.
What worked for me is that I built my Angular application to production and placed the generated build folder inside my static files folder in my Django app directory, and then configured my Nginx to serve that Angular build.
Below is my new Nginx config file:
# Angular Reverse Proxy
server {
listen 80;
server_name <Domain name or IP address>;
root /root/<path to Django app>/static/<Angular app build folder>;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
# Django Reverse Proxy
server {
listen 8080;
server_name <Domain name or IP address>;
location / {
include proxy_params;
proxy_pass http://unix:/root/<path to Django app>/<myapp>.sock;
}
}
Additional Note:
In this way mentioned above, my Angular app is running on port 80 while my Django app is running on port 8080. Everything is working fine this way but I don't see that as the best way to do run both Angular and Django. After a little bit of research, I found that the best way to serve Angular and Django in one app is to let the default Django route to point to the Angular build. The default Django route right now is pointing to the Django Rest Framework root directory.
Sadly, I don't know how to let Django's default route to point to the Angular build file at the moment.

nginx: [emerg] “server” directive is not allowed here [duplicate]

I have reconfigured nginx but i can't get it to restart using the following config:
conf:
server {
listen 80;
server_name www.example.com;
return 301 $scheme://example.com$request_uri;
}
server {
listen 80;
server_name example.com;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
location /robots.txt {
alias /path/to/robots.txt;
access_log off;
log_not_found off;
}
location = /favicon.ico { access_log off; log_not_found off; }
location / {
proxy_pass_header Server;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_connect_timeout 30;
proxy_read_timeout 30;
proxy_pass http://127.0.0.1:8000;
}
location /static {
expires 1M;
alias /path/to/staticfiles;
}
}
after running sudo nginx -c conf -t to test the configuration the following error is returned i can't figure out what is really the problem
nginx: [emerg] "server" directive is not allowed here in /etc/nginx/sites-available/config:1
nginx: configuration file /etc/nginx/sites-available/config test failed
That is not an nginx configuration file. It is part of an nginx configuration file.
The nginx configuration file (usually called nginx.conf) will look like:
events {
...
}
http {
...
server {
...
}
}
The server block is enclosed within an http block.
Often the configuration is distributed across multiple files, by using the include directives to pull in additional fragments (for example from the sites-enabled directory).
Use sudo nginx -t to test the complete configuration file, which starts at nginx.conf and pulls in additional fragments using the include directive. See this document for more.
Example valid nginx.conf for reverse proxy; In case someone is stuck like me.
where 10.x.x.x is the server where you are running the nginx proxy server and to which you are connecting to with the browser, and 10.y.y.y is where your real web server is running
events {
worker_connections 4096; ## Default: 1024
}
http {
server {
listen 80;
listen [::]:80;
server_name 10.x.x.x;
location / {
proxy_pass http://10.y.y.y:80/;
proxy_set_header Host $host;
}
}
}
Here is the snippet if you want to do SSL pass through. That is if 10.y.y.y is running a HTTPS webserver. Here 10.x.x.x, or where the nignx runs is listening to port 443, and all traffic to 443 is directed to your target web server
events {
worker_connections 4096; ## Default: 1024
}
stream {
server {
listen 443;
proxy_pass 10.y.y.y:443;
}
}
and you can serve it up in docker too
docker run --name nginx-container --rm --net=host -v /home/core/nginx/nginx.conf:/etc/nginx/nginx.conf nginx
The path to the nginx.conf file which is the primary Configuration file for Nginx - which is also the file which shall INCLUDE the Path for other Nginx Config files as and when required is /etc/nginx/nginx.conf.
You may access and edit this file by typing this at the terminal
cd /etc/nginx
/etc/nginx$ sudo nano nginx.conf
Further in this file you may Include other files - which can have a SERVER directive as an independent SERVER BLOCK - which need not be within the HTTP or HTTPS blocks, as is clarified in the accepted answer above.
I repeat - if you need a SERVER BLOCK to be defined within the PRIMARY Config file itself than that SERVER BLOCK will have to be defined within an enclosing HTTP or HTTPS block in the /etc/nginx/nginx.conf file which is the primary Configuration file for Nginx.
Also note -its OK if you define , a SERVER BLOCK directly not enclosing it within a HTTP or HTTPS block , in a file located at path /etc/nginx/conf.d . Also to make this work you will need to include the path of this file in the PRIMARY Config file as seen below :-
http{
include /etc/nginx/conf.d/*.conf; #includes all files of file type.conf
}
Further to this you may comment out from the PRIMARY Config file , the line
http{
#include /etc/nginx/sites-available/some_file.conf; # Comment Out
include /etc/nginx/conf.d/*.conf; #includes all files of file type.conf
}
and need not keep any Config Files in /etc/nginx/sites-available/ and also no need to SYMBOLIC Link them to /etc/nginx/sites-enabled/ , kindly note this works for me - in case anyone think it doesnt for them or this kind of config is illegal etc etc , pls do leave a comment so that i may correct myself - thanks .
EDIT :- According to the latest version of the Official Nginx CookBook , we need not create any Configs within - /etc/nginx/sites-enabled/ , this was the older practice and is DEPRECIATED now .
Thus No need for the INCLUDE DIRECTIVE include /etc/nginx/sites-available/some_file.conf; .
Quote from Nginx CookBook page - 5 .
"In some package repositories, this folder is named sites-enabled, and
configuration files are linked from a folder named site-available;
this convention is depre‐ cated."
There might be just a typo anywhere inside a file imported by the config. For example, I made a typo deep inside my config file:
loccation /sense/movies/ {
mp4;
}
(loccation instead of location), and this causes the error:
nginx: [emerg] "server" directive is not allowed here in /etc/nginx/sites-enabled/xxx.xx:1
Replace include /etc/nginx/conf.d/*.conf; in nginx.conf with include /etc/nginx/conf.d/includes-optional/cpanel-proxy-vendors/*.conf; or /etc/nginx/conf.d/includes-optional/site-available/*.conf;

Static files cant see flask server

I am new to Nginx and I currently trying to deploy my web app on my server.
I have static files (built from react) being served by Nginx. The static files make calls to port 5000, my flask server. When testing, flask cannot receive any calls from my static files.
The (static-flask) setup runs on my local machine, so I am assuming that there is a problem with my config with Nginx.
Here is my Nginx setup (in sites-enabled):
server {
listen 80;
server_name MY_IP_ADDRESS;
location / {
root MY_LOCATION_TO_STATIC_FILES;
index index.html;
try_files $uri /index.html;
}
}
I am guessing that once Nginx serves the static files, the client (static files) make calls to localhost:5000, but does not refer to port 5000 on my server?
How would I serve the static files such that they can refer to the server's localhost:5000?
Edit
I guess I should be more specific with my project. I want to serve my static files when the user hits www.mydomain.com, and when the user interacts with the website, they make calls to a flask server running on port 5000 on my server.
I could consider serving static files from flask, but that would be highly inefficient.
Use nginx proxy:
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://localhost:5000;
}
Try this
server {
server_name www.yourdomain.com;
location /static {
alias /home/user/path/static;
}
location / {
proxy_pass http://localhost:8000;
include /etc/nginx/proxy_params;
proxy_redirect off;
}
}
Change alias to your path project

nginx: [emerg] "server" directive is not allowed here

I have reconfigured nginx but i can't get it to restart using the following config:
conf:
server {
listen 80;
server_name www.example.com;
return 301 $scheme://example.com$request_uri;
}
server {
listen 80;
server_name example.com;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
location /robots.txt {
alias /path/to/robots.txt;
access_log off;
log_not_found off;
}
location = /favicon.ico { access_log off; log_not_found off; }
location / {
proxy_pass_header Server;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_connect_timeout 30;
proxy_read_timeout 30;
proxy_pass http://127.0.0.1:8000;
}
location /static {
expires 1M;
alias /path/to/staticfiles;
}
}
after running sudo nginx -c conf -t to test the configuration the following error is returned i can't figure out what is really the problem
nginx: [emerg] "server" directive is not allowed here in /etc/nginx/sites-available/config:1
nginx: configuration file /etc/nginx/sites-available/config test failed
That is not an nginx configuration file. It is part of an nginx configuration file.
The nginx configuration file (usually called nginx.conf) will look like:
events {
...
}
http {
...
server {
...
}
}
The server block is enclosed within an http block.
Often the configuration is distributed across multiple files, by using the include directives to pull in additional fragments (for example from the sites-enabled directory).
Use sudo nginx -t to test the complete configuration file, which starts at nginx.conf and pulls in additional fragments using the include directive. See this document for more.
Example valid nginx.conf for reverse proxy; In case someone is stuck like me.
where 10.x.x.x is the server where you are running the nginx proxy server and to which you are connecting to with the browser, and 10.y.y.y is where your real web server is running
events {
worker_connections 4096; ## Default: 1024
}
http {
server {
listen 80;
listen [::]:80;
server_name 10.x.x.x;
location / {
proxy_pass http://10.y.y.y:80/;
proxy_set_header Host $host;
}
}
}
Here is the snippet if you want to do SSL pass through. That is if 10.y.y.y is running a HTTPS webserver. Here 10.x.x.x, or where the nignx runs is listening to port 443, and all traffic to 443 is directed to your target web server
events {
worker_connections 4096; ## Default: 1024
}
stream {
server {
listen 443;
proxy_pass 10.y.y.y:443;
}
}
and you can serve it up in docker too
docker run --name nginx-container --rm --net=host -v /home/core/nginx/nginx.conf:/etc/nginx/nginx.conf nginx
The path to the nginx.conf file which is the primary Configuration file for Nginx - which is also the file which shall INCLUDE the Path for other Nginx Config files as and when required is /etc/nginx/nginx.conf.
You may access and edit this file by typing this at the terminal
cd /etc/nginx
/etc/nginx$ sudo nano nginx.conf
Further in this file you may Include other files - which can have a SERVER directive as an independent SERVER BLOCK - which need not be within the HTTP or HTTPS blocks, as is clarified in the accepted answer above.
I repeat - if you need a SERVER BLOCK to be defined within the PRIMARY Config file itself than that SERVER BLOCK will have to be defined within an enclosing HTTP or HTTPS block in the /etc/nginx/nginx.conf file which is the primary Configuration file for Nginx.
Also note -its OK if you define , a SERVER BLOCK directly not enclosing it within a HTTP or HTTPS block , in a file located at path /etc/nginx/conf.d . Also to make this work you will need to include the path of this file in the PRIMARY Config file as seen below :-
http{
include /etc/nginx/conf.d/*.conf; #includes all files of file type.conf
}
Further to this you may comment out from the PRIMARY Config file , the line
http{
#include /etc/nginx/sites-available/some_file.conf; # Comment Out
include /etc/nginx/conf.d/*.conf; #includes all files of file type.conf
}
and need not keep any Config Files in /etc/nginx/sites-available/ and also no need to SYMBOLIC Link them to /etc/nginx/sites-enabled/ , kindly note this works for me - in case anyone think it doesnt for them or this kind of config is illegal etc etc , pls do leave a comment so that i may correct myself - thanks .
EDIT :- According to the latest version of the Official Nginx CookBook , we need not create any Configs within - /etc/nginx/sites-enabled/ , this was the older practice and is DEPRECIATED now .
Thus No need for the INCLUDE DIRECTIVE include /etc/nginx/sites-available/some_file.conf; .
Quote from Nginx CookBook page - 5 .
"In some package repositories, this folder is named sites-enabled, and
configuration files are linked from a folder named site-available;
this convention is depre‐ cated."
There might be just a typo anywhere inside a file imported by the config. For example, I made a typo deep inside my config file:
loccation /sense/movies/ {
mp4;
}
(loccation instead of location), and this causes the error:
nginx: [emerg] "server" directive is not allowed here in /etc/nginx/sites-enabled/xxx.xx:1
Replace include /etc/nginx/conf.d/*.conf; in nginx.conf with include /etc/nginx/conf.d/includes-optional/cpanel-proxy-vendors/*.conf; or /etc/nginx/conf.d/includes-optional/site-available/*.conf;

how to change nginx site url

My ngix site config file (/etc/nginx/sites-enabled/) is given below. Right now I can access this site by going to localhost but I would like to know how to change the site url to localhost/gitlab. I need localhost reserved for a different website.
upstream gitlab {
server unix:/home/git/gitlab/tmp/sockets/gitlab.socket;
}
server {
# listen *:80 default_server; # e.g., listen 192.168.1.1:80; In most cases *:80 is a good idea
server_name localhost; # e.g., server_name source.example.com;
server_tokens off; # don't show the version number, a security best practice
root /home/git/gitlab/public;
# individual nginx logs for this gitlab vhost
access_log /var/log/nginx/gitlab_access.log;
error_log /var/log/nginx/gitlab_error.log;
location / {
# serve static files from defined root folder;.
# #gitlab is a named location for the upstream fallback, see below
try_files $uri $uri/index.html $uri.html #gitlab;
}
# if a file, which is not found in the root folder is requested,
# then the proxy pass the request to the upsteam (gitlab unicorn)
location #gitlab {
proxy_read_timeout 300; # https://github.com/gitlabhq/gitlabhq/issues/694
proxy_connect_timeout 300; # https://github.com/gitlabhq/gitlabhq/issues/694
proxy_redirect off;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://gitlab;
}
}
Update: GitLab now has better support for relative URLs and dedicated documentation:
Source installations http://docs.gitlab.com/ee/install/relative_url.html
Omnibus packages https://docs.gitlab.com/omnibus/settings/configuration.html#configuring-a-relative-url-for-gitlab
You want to move GitLab in a relative url. Bear in mind that except for the nginx config, you must also change the url in 3 other places. See the directions in gitlab.yml:
# Uncomment and customize the last line to run in a non-root path
# WARNING: This feature is known to work, but unsupported
# Note that three settings need to be changed for this to work.
# 1) In your application.rb file: config.relative_url_root = "/gitlab"
# 2) In your gitlab.yml file: relative_url_root: /gitlab
# 3) In your unicorn.rb: ENV['RAILS_RELATIVE_URL_ROOT'] = "/gitlab"
All these configs are under /home/git/gitlab/config.
I don't know if these answers have been successful for OP, but for me nothing worked at all :
trafficking with location ...
Uncommenting files with relative URL, etc .
I did find a "tweak" which both elegant and concise, but requires you to have a registered domain name (not suitable for local IPs 192.168.0.x) :
Set up a DNS A Zone pointing to your server's IP (the same as your main domain) : gitlab.mydomain.me.
Update server_name mydomain.me to server_name gitlab.mydomain.me; in /etc/nginx/sites-available/gitlab.
Restart nginx : sudo service nginx restart.
You now have a working gitlab subdomain, and your "main" domain is free.
Well you're not actually changing the site name, you're moving it to a sub-directory, so you can easily change the
location / { ... }
to be a sub directory
location /gitlab { ... }
and reload nginx then it should work, but you need to make sure that if the website doesn't create relative URL's then you need to change it's config so it doesn't create a link that would move you outside the /gitlab directory.

Resources