I want to build a single page application with Vue.js using Nginx as my webserver and a my own Dropwiward REST API. Moreover I use Axios to call my REST request.
My nginx config looks like
server {
listen 80;
server_name localhost;
location / {
root path/to/vue.js/Project;
index index.html index.htm;
include /etc/nginx/mime.types;
}
location /api/ {
rewrite ^/api^/ /$1 break;
proxy_pass http://localhost:8080/;
}
}
Currently I can just call my localhost/api/path/to/rescource to get the the information from the backend.
I build the Front end with HTML and javascript(vue.js) which has worked so far. However when I want to build a single page application most tutorials mention node.js. How can I use Nginx instead?
Add the following code to your Nginx Config, as detailed in the VueRouter docs, here:
location / {
try_files $uri $uri/ /index.html;
}
Also, you need to enable history mode on VueRouter:
const router = new VueRouter({
mode: 'history',
routes: [...]
})
I struggled with same problem. But I found how can I do. You just add this to your nginx.conf.
location / {
root /home/admin/web/domain.com/public_html/; #-> index.html location
index index.html;
include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html;
}
This worked for me:
location /static/ {
root /root/bdn/bdn/server/;
}
location /media/ {
root /root/bdn/bdn/server/;
}
location ^~ /admin/ { # Define routes to be directed to backend as proxy
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;
proxy_pass http://unix:/run/gunicorn.sock;
}
location ^~ /api/ { # Define routes to be directed to backend as proxy
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;
proxy_pass http://unix:/run/gunicorn.sock;
}
location ^~ /api-auth/ {
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;
proxy_pass http://unix:/run/gunicorn.sock;
}
location ^~ /{
root /root/bdn/bdn/server/templates/;
index index.html;
}
error_page 404 /; # PARTICULARLY THIS ERROR REDIRECTION
Related
I need one help on ngnix which has been installed using docker. I am explaining my code below.
location /site {
# rewrite ^/static(.*) /$1 break;
# root /static;
alias /app/static/angular;
try_files $uri $uri/ /index.html =404;
}
location /node {
proxy_pass http://127.0.0.1:8081;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
}
Using the above code when user is typing https:localhost:port/site the index page is loading. But here my requirement is when user will type only https://localhost:port on browser then the URl should be changed to https:localhost:port/site on browser and same index page will be loaded.any help will be more appreciated.
I want to test nginx with docker with two apps before i deploy online.
I am trying to set different local domains. The localhost domain is working but if I try localhost2 as a domain, nginx doesnt get it in the browser (the dns must not be configured). So I tried with local ip adress (192.168.0.2) as a domain name but it is not working.
What should i put so i can access my first website at http://localhost and my second at a http://local_ip_adress?
This is the nginx config file :
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html/build;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8000/api;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 20M;
}
location /wagtail {
proxy_pass http://backend:8000;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Script-Name /wagtail;
client_max_body_size 20M;
}
location /djangostatic {
alias /app/static;
}
location /media {
alias /app/media;
}
}
server {
listen 80;
server_name 192.168.0.2;
location / {
root /usr/share/nginx/html/build2;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend2:8000/api;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 20M;
}
location /wagtail {
proxy_pass http://backend2:8000;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Script-Name /wagtail;
client_max_body_size 20M;
}
location /djangostatic {
alias /app/static;
}
location /media {
alias /app/media;
}
}
I would like to implement a reverse proxy which redirect request of http://www.dummy.com/foo/bar/test to http://127.0.0.1/hello/world. I have tried to add rewrite before the pass and it seems not working ...
server {
listen 80;
listen [::]:80;
server_name www.dummy.com;
# access_log /var/log/nginx/upstream_log.log
location / {
root /usr/share/nginx/html/dummy;
}
location /foo/bar/test {
rewrite ^/foo/bar/test /hello/world break;
proxy_pass http://127.0.0.1/;
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;
access_log /var/log/nginx/upstream_log.log upstream_logging;
}
}
Is there something missing or wrongly configured?
The above config works as expected... The other server was misconfigured when I test the above configuration.
On my host machine I have three instances of one web-service - they run on ports 32826, 32827 and 32828. So that when I go to 127.0.0.1:32826 or 127.0.0.1:32827 or 127.0.0.1:32828, I see in browser a nice web-page.
Besides, I have nginx running on the same host. Now I want it to load-balance between these three instances. I did it like so:
worker_processes 1;
events {
worker_connections 1024;
}
http {
sendfile on;
upstream app_servers {
server 127.0.0.1:32826;
server 127.0.0.1:32827;
server 127.0.0.1:32828;
}
server {
listen 80;
root /code;
index index.php index.html;
location / {
try_files $uri/ $uri/ /index.php;
}
location ~ \.php$ {
proxy_pass http://app_servers;
proxy_redirect off;
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-Host $server_name;
}
location ~ /\.ht {
deny all;
}
}
}
I put this configuration into '/etc/nginx/nginx.conf' and restarted nginx. When however I go to 127.0.0.1, I just see a default welcoming nginx page. I'm not sure what I did wrong and how can I fix it.
You are putting your reverse proxy config under wrong location block.
Try / location block.
worker_processes 1;
events {
worker_connections 1024;
}
http {
sendfile on;
upstream app_servers {
server 127.0.0.1:32826;
server 127.0.0.1:32827;
server 127.0.0.1:32828;
}
server {
listen 80;
root /code;
index index.php index.html;
location / {
proxy_pass http://app_servers;
proxy_redirect off;
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-Host $server_name;
}
#location ~ \.php$ {
#proxy_pass http://app_servers;
#proxy_redirect off;
#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-Host $server_name;
#}
location ~ /\.ht {
deny all;
}
}
}
I discovered this question while troubleshooting my own problem with the same symptoms, but discovered a different solution.
With the default install on CentOS using the yum repositories, nginx.conf contains
include /etc/nginx/conf.d/*.conf
which I believe was overriding my configuration in nginx.conf. After commenting (or completely removing) this include statement and restarting nginx, load balancing worked as expected.
I'm running nginx in front of my django (gunicorn) app. I want calls made to:
api.mydomain.com
to be redirected to:
localhost:8080/api
I now have this, but this obviously doesn't work:
server {
listen 80;
server_name api.mydomain.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
location / {
index index.html index.htm;
proxy_pass http://localhost:8080/api;
}
}
Thanks!
You can combine proxy pass with rewrite
server {
listen 80;
server_name api.mydomain.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
location / {
index index.html index.htm;
rewrite ^(.*)$ /api$1 break;
proxy_pass http://localhost:8080;
}
}
add a new location block like this
location ~ api.mydomain.com
{
fastcgi_pass localhost:8080;
fastcgi_param SCRIPT_FILENAME $document_root/Django script's folder's name/$fastcgi_script_name;
}