Nginx serve landing page seperate from VueJS app - node.js

I am trying to serve my landing page and my Vuejs app separately.
Below is Nginx config for serving my VueJS app and it's working fine. How can I configure it to serve my landing page from "/" and my VueJS app from "/app"?
server {
listen $PORT;
root /usr/share/nginx/html;
index index.html index.html;
location / {
try_files $uri /index.html =404;
}
location ~ ^/(?:wizard_question|wizard_submit) {
proxy_pass http://127.0.0.1:5050;
proxy_http_version 1.1;
proxy_redirect default;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
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;
}
}

After you change your routes and assets paths, try the following config:
server {
listen $PORT;
index index.html index.html;
location / {
root /usr/share/nginx/landing;
}
location /app/ {
alias /usr/share/nginx/html/;
try_files $uri /app/index.html;
}
location ~ ^/(?:wizard_question|wizard_submit) {
proxy_pass http://127.0.0.1:5050;
proxy_http_version 1.1;
proxy_redirect default;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
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;
}
}

Related

nginx doesn't redirect backend

I've nginx config that route frontend app to specific port, and backend to specific route
here's my configs
server {
listen 80;
server_name test.com www.test.com;
location / {
proxy_pass http://127.0.0.1:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_redirect off;
}
location /api {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://127.0.0.1:3000;
proxy_set_header X-Real-IP $remote_addr;
}
}
when trying to access test.com directly it works, but when trying to access test.com/api , it doesn't work, then if return to main path test.com it also doesn't work, it seems like nginx stopped working after accessing the /api

nginx and nodejs serve images from dynamic folder

Hi i have this nginx setup:
server {
listen 80;
server_name xxxxxx.xx www.xxxxxxx.xx;
root /home/xxxx/public_html;
location / {
proxy_pass http://127.0.0.1:3000;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
#proxy_redirect off;
#proxy_cache_bypass $http_upgrade;
}
}
My app creates folders inside the uploads/user followed by the user's ID and then stores images into it. Every user have his own folder inside uploads/user/xxxx.
ex.
/uploads/user/5878db663e67e3535a47c638/1085.github-logo.png
The app works fine in browser but when the user uploads the image it cannot be displayed so a 404 rises.
what can i do?
You can use try_files to serve up static content (if it exists) and otherwise defer to NodeJS:
root /home/xxxx/public_html;
location / {
try_files $uri $uri/ #proxy;
}
location #proxy {
proxy_pass http://127.0.0.1:3000;
...
}
See this document for details.

I want to configure nginx server with multi applications (nodejs, django) in one domain

I have nodejs app (techkids.vn) that run on port 8080 and Django application running on port 8000 of the same server. Then I want to map the Django application on domain techkids.vn/djangoapp. This is my current configuration on Nginx (default.config), but its not work
Code:
location / {
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
try_files $uri $uri/ =404;
}
location /djangoapp/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
proxy_pass http://127.0.0.1:8000;
}

Multiple websites in one VPS instance with NGINX

I still struggling with configuration of nginx for multiple websites in one virtual machine.
So If I do:
server {
listen 80;
server_name example1.com;
location / {
proxy_pass http://localhost:8181;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
after hit example1.com my nodejs page is loaded properly. But If I try to add second server block:
server {
listen 80;
server_name example2.com;
location / {
proxy_pass http://localhost:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Nothing is working, also example1. So I wanna to load through example2.com default nginx location... Something like that:
server {
listen 80;
server_name example1.com;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
}
server {
listen 80;
server_name example2.com;
location / {
proxy_pass http://localhost:8181;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
But it is always redirected to nginx root location.
How can I do that? Thanks for any help!
Node.JS?
You can refer my configuration:
location / {
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_set_header X-Forwarded-Proto $scheme;
proxy_pass http://127.0.0.1:2368;
}
or another one
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
proxy_pass http://127.0.0.1:2387;
}
The first configuration direct to https redirect cycle.
And you said the default site, you can config something like that:
listen 80 default;
server_name xxxxx.com;

Subdomain alias in nginx and nodejs/express

I am trying to add a subdomain of my site. I have http://www.myweb.com/app/ and I just want http://app.myweb.com/ witch is the same of /app.
The content of /app is served by express in nodejs.
server {
listen 80;
server_name .myweb.com;
access_log /var/log/nginx/myweb.log;
location / {
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_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://127.0.0.1:8888;
proxy_redirect off;
proxy_http_version 1.1;
}
}
And in nodejs I have:
http.use('/app', express.static(__dirname + '/static/app'));
But not sure if the statics should be served by nginx or nodejs/express
Searching in the web how use subdomain.
upstream your_app_name {
server localhost:3000;
keepalive 8;
}
server {
listen 80;
server_name ~^(?<sub>.+)\.domain\.com$;
location ~* \.html {
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_set_header X-NginX-Proxy true;
proxy_pass http://your_app_name/$sub;
proxy_redirect off;
}
}
Sorry; my english its very bad

Resources