I have server with Nginx at front and nodejs which run reactjs application and my application is divided to few parts and I want to each part got own subdomain.
Example:
http://192.168.1.1:9000/part1/ --- > http://sub1.example.com/
http://192.168.1.1:9000/part2/ --- > http://sub2.example.com/
I did something like this:
server {
listen 80;
server_name sub1.example.com;
root html;
index index.html index.htm;
location / {
proxy_pass http://127.0.0.1:9000/part1/;
}}
Server works when i used this config but when I open browser I've got error which telling me about problem with static content.
Server trying take static content from http://127.0.0.1:9000/part1/
Should take from http://127.0.0.1:9000/
Thanks for the help in advance.
Based on your information something like so might work (repeat for both subdomains obviously)
server {
listen 80;
server_name sub1.example.com;
root /home/usr/react/app/build/static;
index index.html index.htm;
location / {
try_files $uri $uri/ #nodejs;
}
location #nodejs {
proxy_redirect off;
proxy_http_version 1.1;
proxy_pass http://127.0.0.1:9000/part1;
proxy_set_header Host $host ;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
Explained
In this case we are first trying to locate the static files if they exist
try_files $uri $uri/ #nodejs;
If no matching files exist then the request is proxied to the Node.js server on the path /part1
proxy_pass http://nodejs/part1;
Related
Frustrating question here. I have a react project created with created-react-app on a server that has to use Nginx for external connection/HTML server. What essentially I need to do is use nginx as a proxy server and when the URL is typed into browser, the request is routed to localhost:3000 and the react app generates the result which is served to the client by nginx.
So, here is the nginx file so far, but I can't get it to work. A number of questions:
does the root designation need to be directed to the /public directory in the react project to pick up index.html?
Assuming that you run npm start and after the compile, you enter the FQDN in the browser and it routes to localhost:3000
My Nginx config so far
server_name server-name.com;
listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/site-name/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/site-name/privkey.pem;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!aNULL:!MD5;
proxy_read_timeout 60s;
client_max_body_size 64M;
# should this be routed to /public in the react project to pick up index.html?
# root /var/www/html;
index index.html index.htm;
location / {
#try_files $uri $uri/ =404;
# Make sure React Application return is index.html so client routing remains in sync/reachable
#try_files $uri /index.html;
proxy_pass http://localhost:3000;
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;
}
location /_api {
rewrite ^/_api/(.+) /$1 break;
include uwsgi_params;
uwsgi_pass 127.0.0.1:3030;
}
}
server {
server_name server-name.com
listen 80;
allow 10.0.0.0/16;
deny all;
proxy_read_timeout 60s;
client_max_body_size 64M;
# Should this be routed to /public in the react project to pick up index.html?
# root /var/www/html;
index index.html index.htm;
location / {
#try_files $uri $uri/ =404;
# Make sure React Application return is index.html so client routing remains in sync/reachable
try_files $uri /index.html;
}
location /_api {
include uwsgi_params;
uwsgi_pass 127.0.0.1:3030;
}
}
open your nginx file vi sites-enabled/default if you don't know how to do that let me know.
then remove everything from that file and simply paste :
server {
listen 80;
client_max_body_size 10M;
server_name YourWebsiteNameWithDomain yourIPV4;
location / {
proxy_pass http://127.0.0.1:3000;
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;
}
}
don't forget to restart your nginx
I have an Ubuntu web server running with this structure:
Nginx reverse proxy localhost:80, which redirects to either '/' (apache server with WordPress site at localhost:8080), which currenly works.
More recently a I've tried to add a Node.js Application at www.site.com/app or, internally, localhost:3000. I am able so serve the HTML and CSS of the node.js webapp, however all internal route calls at 404ing, likely because of the URL addressing of /app/.
IE. Tries to hit /someendpoint and 404s because Node.js is technically running on localhost:3000 (www.site.com/app). Should I be routing arguments like (www.site.com/app/someendpoint)?
The Problem: All POST/GET calls from NODE.JS are 404ing because of my bad understanding of NGINX config. How do I route this GET calls to the actual location of the Node.js server which is (site.com/app/, localhost:3000).
Here is my 'default' config from /etc/nginx/available_sites/.
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.php index.html index.htm index.nginx-debian.html;
server_name www.*site*.name;
location / {
proxy_pass http://127.0.0.1:8080$request_uri;
proxy_buffering on;
proxy_buffers 12 12k;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
try_files $uri $uri/ /index.php?q=$uri&$args;
}
#Currenly serving HTML, CSS of site, however node routes 404
location /app/ {
proxy_pass http://localhost:3000/;
}
}
How might I update this NGINX config file to account for node endpoints actively trying to hit the route of my apache site and not the /app real location of the node server?
Any help or ideas would be great, I've been stuck on this issue for a while as part of a personal project.
Thanks!
please remove the try_files statement in the location / block
your location should look like this
.....
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;
}
Here is a sample app.js file that may offer you some insight into the matter.
var express = require("express");
var router = require("./lib/routes/index");
var app = express();
var port = 3000;
app.use('/app', router);
app.listen(port, function () {
console.log("Listening on port " + port);
});
As for the nginx configuration, I would recommend something along the lines of the following:
# Sample nginx config with 2 upstream blocks
upstream nodeApp {
server 127.0.0.1:3000;
}
upstream apacheApp {
server 127.0.0.1:8080
}
server {
listen 80;
listen [::]:80;
server_name www.domain.com domain.com;
root /var/www/domain;
location / {
proxy_pass http://apacheApp;
}
location /app {
proxy_pass http://nodeApp;
# OR
# try_files $uri $uri/ #backend;
}
location #backend {
proxy_pass http://nodeApp;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
The key part of this is using an external router in your app.js, then using this line: app.use('/app', router);
You may want to also set up nginx to serve static files instead of relying on express.static(). This would also be easy to do by setting up more location blocks like so:
location /app/public {
try_files $uri $uri/ =404;
}
This should work for your purposes. Don't forget to check your configuration with nginx -t.
For more troubleshooting advice, check out this very similar thread: nginx proxy_pass 404 error, don't understand why
The solution that worked with my 404 issue was to add an extra / after my proxy_pass url.
I have some static files, that I can already access, and I have an api, already at digital ocean.
But I am having some troble configuring NGINX to access both at the same time. If my api works, the static files don't. And vice-versa;
My api is running on port 5000, and I want to access the site and the api by IP adress.
Pls, help!
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
server_name _;
location / {
try_files $uri $uri/ =404;
}
}
server {
location / {
proxy_pass http://localhost:5000;
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;
}
}
If both services are being accessed from the same IP address and port, then you need to use one server block. Ideally, you would move the API into a unique URI, for example:
location / {
try_files $uri $uri/ =404;
}
location /api/ {
proxy_pass ...;
...
}
If you must use an overlapping URI space for both static files and the API, you can use try_files to check for the existence of a static file first:
location / {
try_files $uri $uri/ #proxy;
}
location #proxy {
proxy_pass ...;
...
}
See this document for more.
I am using NgInx reverse proxy for my expressjs website with HTTPS. website is getting accessed with https without any issue and requests are getting at Nodejs server but problem is with Static content.
All static contents(JS, CSS, Images, fonts etc.) are throwing 403 forbidden error.
Below is my ngInx configuration file content:
server {
listen 80;
listen 443 ssl;
ssl on;
ssl_certificate /home/ec2-user/certs/myapp.bundle.crt;
ssl_certificate_key /home/ec2-user/certs/myapp.key;
root /home/ec2-user/myapp;
server_name example.com;
access_log /var/log/nginx/nginx.vhost.access.log;
error_log /var/log/nginx/nginx.vhost.error.log;
location / {
#try_files $uri $uri/ /index.php?$args ;
#try_files $uri $uri/ =404;
proxy_pass https://example.com:3000;
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;
}
}
I am using amazon EC2 and CentOS.
Please help. Thanks in advance.
location / {
proxy_pass https://example.com:3000;
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;
}
You are redirecting all traffic to to nodejs. Thats means expressjs will serve static content.
To serve static files, use the express.static built-in middleware function in Express.
Pass the name of the directory that contains the static assets to the express.static middleware function to start serving the files directly. For example, use the following code to serve static files in a directory named public:
app.use(express.static('public'))
More info here: https://expressjs.com/en/starter/static-files.html
You are trying to server static files from your NodeJS app which is not right approach since you are using Nginx. Add a below kind of block to you config
location ~ \.(css|gif|png|jpe?g|ico|js|swf|ttf|woff) {
expires 30d;
root /home/ec2-user/myapp;
try_files $uri =404;
}
You might need to adjust the root folder based on how you are using your assets. But if you are using it same as /home/ec2-user/myapp then you can skip adding this line
I have a problem with my current nginx configuration. What I am trying to do is:
For requests without any path, get the index.html (works)
Get existing files directly (works)
If the requested file or path does not physically exist, proxy request to nodejs (404)
I have tried several configurations found here on stackoverflow, but none of them fit my needs.
Here is my current configuration:
# IP which nodejs is running on
upstream app_x {
server 127.0.0.1:3000;
}
# nginx server instance
server {
listen 80;
server_name x.x.x.x;
#access_log /var/log/nginx/x.log;
root /var/www/x/public;
location / {
root /var/www/x/public;
index index.html index.htm index.php;
}
location ^/(.*)$ {
if (-f $request_filename) {
break;
}
proxy_set_header Host $http_host;
proxy_pass http://127.0.0.1:3000;
}
}
I think I figured out what you were trying to do. The proper way is to use try_files together with a named location.
Try with the following configuration:
# IP which nodejs is running on
upstream app_x {
server 127.0.0.1:3000;
}
# nginx server instance
server {
listen 80;
server_name x.x.x.x;
#access_log /var/log/nginx/x.log;
location / {
root /var/www/x/public;
index index.html index.htm index.php;
try_files $uri $uri/ #node;
}
location #node {
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_pass http://app_x;
}
}
Note: When you have an upstream defined you should use that in your proxy_ pass. Also, when proxying, always add the X-Forwarded-For header.
I was wondering that problem is in application path. Please find the following code excerpt from toontuts blog for full configuration of nginx with nodejs, you may find this link
upstream subdomain.your_domain.com {
server 127.0.0.1:3000;
}
server {
listen 0.0.0.0:80;
server_name subdomain.your_domain.com;
access_log /var/log/nginx/subdomain.your_domain.access.log;
error_log /var/log/nginx/subdomain.your_domain.error.log debug;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarder-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://subdomain.your_domain.com;
proxy_redirect off;
}
}