How to use vue.js with Nginx? - nginx

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

How to change the redirect path using ngnix on docker

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.

nginx testing : acessing localhost and localhost2

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;
}
}

Nginx proxy_pass with rewrite in url?

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.

Unable to load-balance with nginx

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.

rewrite subdomain url in nginx to backend-server

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;
}

Resources