How to allow django view in nginx with PWA at / - django

I'm trying to setting up nginx to my PWA app with django backend.
My django backend has some views to pdf reports on /export route.
My PWA app (Vue) runs on /. I'm getting a blank page when access to /export. The blank page is trying to response from PWA, but when I reload with Shift (⇧) it loads the pdf report.
Here is my nginx server config:
server {
server_name awesome.app;
root /home/awesomeapp/pwa;
location /api/ {
include proxy_params;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://unix:/home/awesomeapp/awesome-backend/awesome.sock;
}
location /export/ {
include proxy_params;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://unix:/home/awesomeapp/awesome-backend/awesome.sock;
}
location / {
index index.html;
}
}
Any idea how to setting up nginx to allow the access to the pdf report generated by django?
Secondly, django backend also has a dashboard app (no pwa) but nginx does not allows to access it (only with shift(⇧)).

OP here.
I'm using workbox (https://developers.google.com/web/tools/workbox) to simplify service workers management.
Workbox allows exclude url paths in pwa routing (https://developers.google.com/web/tools/workbox/reference-docs/v4/workbox.routing). Black lists solve my problem.

Related

nginx reverse proxy to localhost

I have application running on my AWS EC2 Instance's localhost:8080.
In order to use these Web portal, I have install nginx on EC2 and reversed proxy localhost so that I can access Web UI on my browser.
Nginx.conf file
server {
listen 80;
server_name ec2-xx-xx-xxx-xxx.eu-central-1.compute.amazonaws.com;
location / {
proxy_pass http://localhost:8080;
location /$request_uri {
proxy_pass http://localhost$request_uri;
}
}
When hitting EC2 URL on my browser,I successfully seeing homepage of application.
But when I hit any url let's say /admin, Nginx redirects to my local computer's localhost:8080/admin not Server's localhost.
All i want is that when hit any url nginx should forward the request to localhost:8080{$URL} and return me the browser.
please suggest where I'm wrong.
Thanks In Advance.
You don't need to add the second location.
location / {
proxy_pass http://localhost:8080;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
this should be enough to access anything you need.

Add global prefix for Django URLs

Instead of using subdomains I would like to add subfolders like:
burger.domain.com -> domain.com/organization/burger/
is there any way to add /organization/<name:str>/ globaly?
Well, if you have a reverse proxy server like NGINX/Apache, you can update the X-Script-Name. For example in NGINX:
location /organization {
proxy_pass http://127.0.0.1:8000;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Scheme $scheme;
proxy_set_header X-Script-Name /organization;
}
In that way, django will be served at path /organization(as per configuration of X-Script-Name). You can also checkout this blog for more information regarding deploying django with Apache.
But, if you don't have such reverse proxy server, then you can use FORCE_SCRIPT_NAME. In django settings add the following line:
FORCE_SCRIPT_NAME = '/organization'

How to serve React app AND Django blog from Nginx?

I'm using nginx to serve a React app from my domain root / and a Django blog app from /blog. I'm also using nginx to redirect all http to https.
The problem is some weird behaviour... If I navigate to the blog with a clear cache, it shows the blog. If I then navigate to the index page it shows the react app. All good so far. But then, if I return to /blog it continues to show the react app, not the blog! I think the problem involves caching, but I'm not sure where.
I am not using react-router, so I'm not sure how the urls could get redirected on the client side.
Here is my nginx config:
server {
listen 80;
server_name mydomain.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl;
server_name mydomain.com;
root /production_build;
location /static/ {
root /var/www/mysite;
}
location /blog {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://upstream_django_server;
}
location /cms {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://upstream_django_server;
}
location / {
try_files $uri /index.html;
}
}
You should disable the service worker in react, as it is interfering with your /blog url and returning its own response the next time.
Since you are mixing 2 apps here, you don't want to take a risk of having something which is difficult to get rid of.
Service workers can be sometimes very nasty because of caching responses

Nginx reverse proxy configuration for subdomain with multiple paths

I have a situation here with my Nginx reverse proxy configuration. My distribution is Ubuntu 14.04
I have a domain, let's call it foo.bar.net, and I want the /grafana endpoint to redirect to my grafana server (localhost:3000), the /sentry endpoint to redirect to my sentry server (localhost:9000) and finally, the /private endpoint to redirect to my django server (localhost:8001). I am using gunicorn for the tuneling between django and nginx.
Here is what I tried :
server {
# listen on port 80
listen 80 default_server;
# for requests to these domains
server_name foo.bar.net;
location /sentry {
# keep logs in these files
access_log /var/log/nginx/sentry.access.log;
error_log /var/log/nginx/sentry.error.log;
# You need this to allow users to upload large files
# See http://wiki.nginx.org/HttpCoreModule#client_max_body_size
# I'm not sure where it goes, so I put it in twice. It works.
client_max_body_size 0;
proxy_pass http://localhost:9000;
proxy_redirect off;
proxy_read_timeout 5m;
allow 0.0.0.0;
# make sure these HTTP headers are set properly
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /grafana {
proxy_pass http://localhost:3000;
proxy_redirect off;
proxy_read_timeout 5m;
allow 0.0.0.0;
# make sure these HTTP headers are set properly
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /private {
proxy_pass http://127.0.0.1:8001;
}
location /private/static/ {
autoindex on;
alias /home/user/folder/private/static/;
}
}
The server won't even start correctly, the config is not loading.
I would also like the / path to redirect to the private endpoint if possible.
Additionally, I am not even sure where to put this configuration (sites-available/??)
Can anyone help me with that ?
Thanks a lot,
There are some missing semicolons and other syntax errors. Look at main nginx error log for details and fix them one by one.
Where to put that config file depends on your distribution. For some of them it should be sites-available directory and symlink to that file inside sites-enabled directory for quick enabling and disabling sites, if you don't have sites-available and sites enabled directory, you should put it into conf.d dir in your distribution.

resolving domain name on Django-rest-framework HyperlinkedModelSerializer

I would like DRF to use for serialized hyperlinks:
http://<mydomain.com>/api/v1/endpoint
rather than
http://127.0.0.1/api/v1/endpoint
Can this be configured within Django or is it related to my http server configuration (gunicorn+nginx)?
Just set host header for django.
Example for nginx:
location /api/ {
proxy_set_header Host $host;
proxy_pass http://127.0.0.1:8000;
}
if you are using https, also add :
proxy_set_header X-Forwarded-Proto https;
and everything works fine :)