How do I host two servers on NGINX? (Django and Angular PWA) - django

I want Django to keep all of its defined routes and Angular to be hosted from ip/pwa.
I have these block bodies:
#Angular
server {
listen 123.456.7.89:80;
root /home/pwa/dist/reportpwa;
location /pwa {
try_files $uri $uri/ /index.html;
}
}
#Django Database
server {
listen 123.456.7.89:80;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
root /home/django-apps/reportdbapi;
}
location / {
include proxy_params;
proxy_pass http://unix:/run/gunicorn.sock;
}
}
The servers seem to run fine on their own but when I put them both up together, the Django server takes over and refuses to recognize the Angular server. Can anyone tell me what kind of configuration I need to make them both work?

Related

How to make Nginx config file for Django Project?

I made Nginx config for My Django project.
For DNS I associate with my IP.
But this config not working, when I'm checking xyz.com in web but getting error ERR_CONNECTION_REFUSED.
server {
listen 80;
server_name xyz.com;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
root /home/ubuntu/project;
}
location / {
include proxy_params;
proxy_pass http://unix:/home/ubuntu/project/project.sock;
}
}
Please correct me if i'm doing wrong.

Need help on connecting django to react using nginx and gunicorn

I'm trying to connect Django back-end to a React build provided to me by the front-end developer. I'm using Gunicorn for Django and Web server is Nginx.
The below config file is a result of extensive Googling.
Currently Django back-end works on port 80/8000 but whenever I change the port to anything else like 8001 below, the server does not respond.
The complete thing is running on Google Ubuntu VM.
I've executed sudo ufw disable for testing purposes.
server {
#listen 80;
listen 8001;
listen [::]:8001;
server_name xx.xx.7.xx;
location = /favicon.ico {
access_log off;
log_not_found off;
}
location /static/ {
root /home/username/cateringm;
}
location / {
include proxy_params;
proxy_pass http://unix:/run/gunicorn.sock;
}
#location / {
# try_files $uri $uri/cm_react_build/build/index.html; # this is where you serve the React build
# }
}
server {
listen 8002;
listen [::]:8002;
server_name xx.xx.7.xx;
root /home/username/cm_react_build/build;
index index.html index.htm;
location /static/ {
root /home/username/cm_react_build/build;
}
location /test {
root /home/username/cm_react_build/build;
index index.html;
try_files $uri $uri/ /index.html?$args;
}
}
I'm new to configuring web servers. Help would be appreciated.
I found the problem. Google by default blocks all ports except port 80. I updated the firewall rules for different ports and the requests were going through.

How to have Nginx to proxy pass only on "/" location and serve index.html on the rest

I have a web app that uses Django for the backend and some frontend and ReactJS for stricly the frontend. I am setting up my Nginx configuration and I am trying to get Nginx to proxy_pass only on the "/" location and then on the rest of the locations I want it to serve the index.html file from React.
Here is my current Nginx configuration under sites-available. So the only url that does not have the prefix "/home/" or "/app/" is the homepage. I want Django to serve the homepage and then ReactJS to serve the rest.
server {
listen 80;
root /home/route/to/my/ReactJS/build;
server_name www.mydomain.com;
location = /favicon.ico { log_not_found off; }
location / {
include proxy_params;
proxy_pass http://0.0.0.0:8000;
}
location /home/ {
try_files $uri $uri/ /index.html;
}
location /app/ {
try_files $uri $uri/ /index.html;
}
}
Let me know if you need any more details or if I could clear things up.
Thanks!
Just change it to the following: (replacing the last three location blocks)
location = / {
include proxy_params;
proxy_pass http://0.0.0.0:8000;
}
location / {
try_files $uri $uri/ /index.html;
}
The location = / only matches the exact domain, everything else will be matched by location /.

Nginx Gunicorn one ip multiple django sites in folders

thanks for reading my question.
I'm trying to serve multiples Django sites on their own folders in one server without domain (only IP address) using Gunicorn and Nginx. Something like that:
20.20.20.20/demos/myapp1/ --> Django app
20.20.20.20/demos/myapp2/ --> Django app
20.20.20.20/demos/myapp3/ --> Django app
I have tested a lot of settings but I can't make it work. When i tried to load URL 20.20.20.02/demos/myapp1/ i get a 404 not found error :(
Example one site nginx conf:
upstream app1_server {
server unix:/webapps/myapp1/run/gunicorn.sock fail_timeout=0;
}
server {
listen 80;
server_name 20.20.20.20;
keepalive_timeout 5;
client_max_body_size 4G;
location /static/ {
alias /webapps/myapp1/static/;
}
location /media/ {
alias /webapps/myapp1/media/;
}
location /demos/myapp1/ {
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://app1_server;
}
# Error pages
error_page 500 502 503 504 /500.html;
location = /500.html {
root /webapps/myapp1/static/;
}
}
What is wrong with my myapp1.conf file?
For the record, if i change "location /demos/myapp1/" to "location /" my first app works, but the others apps still not working.
Thanks in advance.
Edit 1:
Checking my problem.. For now i found a solution. Rewrite rule:
location /myapp1/ {
rewrite ^/myapp1(.*) $1 break;
try_files $uri #proxy_to_app;
}
Is a good solution? My Django apps broken their urls :(
Well, reading about Nginx, i solved my problem in 4 steps:
Using rewrite rule like my edit post.
Listen each app in diferent port, like this:
server {
listen 81;
server_name 20.20.20.20;
location /demos/myapp1/ {
rewrite ^/demos/myapp1(.*) $1 break;
try_files $uri #proxy_to_app;
}
...
}
server {
listen 82;
server_name 20.20.20.20;
location /demos/myapp2/ {
rewrite ^/demos/myapp2(.*) $1 break;
try_files $uri #proxy_to_app;
}
...
}
server {
listen 83;
server_name 20.20.20.20;
location /demos/myapp3/ {
rewrite ^/demos/myapp3(.*) $1 break;
try_files $uri #proxy_to_app;
}
...
}
Reload Nginx
sudo service nginx restart
Test it:
http://20.20.20.20:81/myapp1/
http://20.20.20.20:82/myapp2/
http://20.20.20.20:83/myapp3/
If you have a better way to solve my problem, please let me know!

Django REST AngularJS NGINX Config

I have set up a server according to this tutorial:
https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-14-04
Everything is working a-okay, but I would like to change my NGINX set up to incorporate AngularJS for the front end. Right now I have it configured as the tutorial says and when I visit myip/ I get my Django app, and when I go to myip/static/ I get my static files. Great.
What I would like to do is serve the Django API from a api.myip subdomain, and have myip/ actually point to my static (angular app) files.
Any insight on how to configure NGINX to route this correctly?
NGINX Config currently looks like this:
server {
listen 80;
server_name server_domain_or_IP;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
root /home/user/myproject;
}
location / {
include proxy_params;
proxy_pass http://unix:/home/user/myproject/myproject.sock;
}
}
try like this
server {
listen 80;
server_name server_domain_or_IP;
location = /favicon.ico { access_log off; log_not_found off; }
location / {
root /home/user/myproject;
}
}
server {
listen 80;
server_name api.server_domain_or_IP;
location = /favicon.ico { access_log off; log_not_found off; }
location / {
include proxy_params;
proxy_pass http://unix:/home/user/myproject/myproject.sock;
}
}