I am trying to configure nginx to render a Rails 4 single page application. The index page exists within a Rails template index.html.erb. Javascript and CSS are both on a CDN. The current configuration allows the page to load, and I can navigate the entire site. The issue comes when I try to reload the page or attempt to navigate to a page via the address bar: mysite.com/about. What am I missing? I have experience with single page apps but usually the page is external to Rails.
I am using:
Rails 4
Unicorn v4.3.1
Openresty 1.5.11.1
Nginx configuration:
upstream rails_server {
server unix:/var/www/mysite.org/api/shared/tmp/.unicorn.mysite-org.sock fail_timeout=0;
}
server {
listen 80 default_server deferred; # for Linux
server_name staging.mysite.org;
client_max_body_size 5m;
keepalive_timeout 5;
location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
# proxy_cookie_domain api.local.mysite.org local.mysite.org;
proxy_pass http://rails_server;
}
location ~* /application.*\.css$ {
return 301 $scheme://css.mysite.org$request_uri;
}
location ~* /application.*\.js$ {
return 301 $scheme://js.mysite.org$request_uri;
}
}
Related
I have a website which uses Django for the API and Vue for the frontend. Currently when I deploy the site I do the following:
Create a production build of the Vue app (npm run build)
Copy the Vue dist folder into a specific folder within the Django app
One of the Django urls is setup as a TemplateView which serves up the Vue index.html
By doing the above, Nginx in production simply serves up the Django app using gunicorn and everything works.
However I would prefer to have Nginx serve up the Vue index.html and static files. For example / will serve the Django app and /spa will serve the Vue app which will itself call the api.
Here is my current Nginx config:
upstream appserver_wsgi_app {
server localhost:8000 fail_timeout=0;
}
server {
listen 80;
server_name www.example.com;
rewrite ^(.*) https://$server_name$1 permanent;
}
server {
server_name www.example.com;
listen 443 ssl;
...
...
...
location /static {
autoindex on;
alias /home/user/static_django_files/;
}
location /media {
autoindex on;
alias /home/user/media_django_files/;
}
location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
if (!-f $request-filename) {
proxy_pass http://appserver_wsgi_app;
break;
}
}
}
What needs to be changed in Nginx so that it will serve the Vue index.html and static files as well as the Django app? Also, does anything need to change on the Vue side since im currently just calling the api as follows:
axios.post("/api/dosomething/", data)
EDIT
I have added the following to my nginx config and uploaded the Vue dist folder:
location /spa {
autoindex on;
alias /path/to/dist/;
try_files $uri $uri/ /index.html;
}
I have also added the following to vue.config.js:
baseUrl: '/spa'
And to my Vue Router: mode: history
When restarting nginx, the index.html page for the vue app attempts to load in the browser but it cannot find the css and js files which it tries to find at:
www.example.com/spa/js/...
www.example.com/spa/css/...
I have a similar setup where I run the Django REST backend with uwsgi on port 8090 and serve the production build of angular 4 frontend via nginx. Here is my nginx.conf
server {
listen 80;
server_name **url**;
rewrite ^ https:// **url** $request_uri? permanent;
}
server {
listen 443 ssl;
server_name **url**;
ssl_certificate **.pem;
ssl_certificate_key **.key;
root *path to your vue production build folder where index.html resides*;
index index.html;
error_page 502 /gateway.html;
location /assests {
autoindex on;
alias *path to you Django assets *;
}
location /static {
autoindex on;
alias *path to you static files both django static files and vue related static files*;
}
// this to server the django admin
location /manage/ {
proxy_pass http://127.0.0.1:8090/manage/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
// this is for the REST backend
location /api/{
proxy_pass http://127.0.0.1:8090;
proxy_set_header Host $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;
}
}
I think similar setup should work for Django + Vue.js project. Let me know if it works.
** EDIT
for your second issue create another location with '/spa/static' in nginx.conf similar to the '/static'.
I have a Django application that runs in a Docker environment; one container for gunicorn and one for nginx. My application's nginx server listens on port 9081, which is internal to the system (it's not exposed to the outside world). Another nginx container (which routes traffic) sits on port 80 and sends traffic to my site as necessary (based on the hostname a request receives).
Here's my application's nginx setup, stripped down to the basics:
upstream project {
server gun_project:8001; # gunicorn container
}
server {
listen 9081;
server_name mytool.myhost.com;
set_real_ip_from 172.17.0.0/16;
real_ip_header X-Forwarded-For;
real_ip_recursive on;
location / {
proxy_pass http://project;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
}
}
Here's the router nginx setup, again stripped down:
upstream project {
server ngx_project:9081; # nginx container
}
server {
listen 80;
server_name mytool.myhost.com;
return 302 https://$host$request_uri;
}
server {
listen 443 ssl;
server_name mytool.myhost.com;
# SSL Info
ssl_certificate /etc/nginx/ssl/mycert.cer;
ssl_certificate_key /etc/nginx/ssl/mycert.key;
location / {
proxy_pass http://project;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
}
}
I want to redirect a URL on this site from one location to another (the URL has permanently changed). I'm doing so via a rewrite in the location block of my application's nginx configuration (the first nginx block above):
location / {
rewrite "^/oldpath/$" /newpath/ permanent;
proxy_pass http://project;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
}
When I do this, and I attempt to load the old URL (mytool.myhost.com/oldpath/) in a web browser, I'm redirected to mytool.myhost.com:9081/newpath/ which fails because it doesn't exist (that port isn't exposed externally).
Is there something basic I'm missing? I don't want that internal port to be a part of the redirect.
Here's how I ended up doing it:
I added a dedicated location in the nginx configuration for the site, and performed the redirect there:
# Redirect the previous URL to the newer one
location = /old-path/ {
return 302 https://$host/new-path/;
}
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
I am trying to deploy a Django app along a static html website. The general www.example.com will provide the basic website. The URI /app should then proxy to a Gunicorn WSGI server. The nginx configuration in sites-enabled looks as follows:
upstream gunicorn {
server 127.0.0.1:8000;
}
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/website;
index index.html index.htm index.nginx-debian.html;
server_name _;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}
location /app {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://gunicorn;
}
}
I am getting a 404 error when trying www.example.com/app. It seems the URI gets messed up somehow. The complete URL that is created is http://www.example.com/accounts/login/?next=/app/
Setting up the App alone exactly following this tutorial http://hackedexistence.com/project/raspi/django-on-raspberry-pi.html does work.
Is the setup I am aiming at even possible? And if yes, where is my misunderstanding of the location concept?
You need to set the SCRIPT_NAME header in your location directive.
proxy_set_header SCRIPT_NAME /app;
See this blog post for an example.
I am running django with nginx/gunicorn. I am not deeply familiar with how nginx and gunicorn work, but suppose that I want to take my django site down for maintenance.
I assume I would be wanting to redirect to some simple maintenance page by going into the nginx/gunicorn settings and redirecting something but I could be wrong.
What is the correct (easiest) way to do this?
EDIT adding nginx config proxy statements:
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;
EDIT 2: adding nginx sites-enabled file
upstream app_server {
server 127.0.0.1:9000 fail_timeout=0;
}
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
root /usr/share/nginx/html;
index index.html index.htm;
client_max_body_size 4G;
server_name _;
keepalive_timeout 5;
# Your Django project's media files - amend as required
location /media {
alias /home/django/mysite/media;
}
# your Django project's static files - amend as required
location /static {
alias /home/django/mysite/static_dump;
}
location / {
#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;
if (-f /usr/share/nginx/html/index.html) {
return 503;
}
}
error_page 503 #maintenance;
location #maintenance {
rewrite ^(.*)$ /503.html break;
}
}
One of the ways to do is to add the maintenance page somewhere in the server, and then in your nginx file ( In the sites-enabled folder) redirect requests to the site to that maintenance page.
Your nginx page should contain:
server_name myhost.example.com;
root /path/to/html/file/directory;
index index.html;
Only the above 3 lines are enough