Serving a React app from Node while also having an API - javascript

So I am trying to have a Node/React setup on Ubuntu, inside an Nginx server.
The React app works fine, however when I try to have API endpoints (in Node) for the React app to call, those endpoints don't work - neither for the app, nor for going to those endpoints from a browser.
This is what some of the code looks like:
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'client/build')));
app.use(express.json());
app.get('/api/contactinfo', async (req, res) => {
let contactinfo = await Information.findAll({
plain: true,
attributes: ["phone", "email", "address"],
});
res.json(contactinfo);
});
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname + '/client/build/index.html'));
});
const port = process.env.PORT || 5000;
app.listen(port);
So for example, in this part, I might go to the React app's contact page (example.com/contact), and that loads fine. But the API call that the React app makes to the node server fails. So it seems like the React routing is working, but not the Node routing.
Likewise, if I go to just the Node API directly (example.com/api/contactinfo), that fails with a 502 bad gateway.
My Nginx setup looks like this:
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;
}
I've also got some SSL cert setup stuff as well, though I'm not sure if that is relevant.
When I look at the Nginx error.log, this is what I see:
2020/09/02 15:36:54 [error] 1424#1424: *325 upstream prematurely closed connection while reading response header from upstream, client: 35.3.25.220, server: exampledomain.com, request: "GET /api/contactinfo HTTP/1.1", upstream: "http://127.0.0.1:5000/api/contactinfo", host: "exampledomain.com"
What exactly is causing my Node app API endpoints to fail? I've tried increasing the timeout, and several other things and nothing seems to be working - I've been trying to fix this problem for hours, but for some reason, despite the fact that I can successfully get React to load, I can't get any Node endpoints to do so.
How do I fix this?

I don't know the error in your implementation but here how I would do it.
// Nginx
server {
charset utf-8;
listen 80 default_server;
server_name _;
# front-end files
location / {
root /opt/front-end;
try_files $uri /index.html;
}
# node api reverse proxy
location /api/ {
proxy_pass http://localhost:5000/;
}
}
// folder structure
.
opt
+-- front-end
| +-- react app build
+-- back-end
+-- node app
// Node app
...
app.listen(5000);
Based on the article How to Deploy a MEAN Stack App to Amazon EC2

The “problem” is the certbot. If you have a self sign certificate it means that .... depending on how you configúrate certbot, basically now everything runs under port 443 not 80. So if on yow request you have some like `http://www domain com/api/endpoint. You’ll get the error you are getting. What you need to do is to use the https module from node.
import bodyParser from "body-parser";
import express from "express";
import fs from "fs";
import path from "path";
// import https
import https from "https";
import { routes } from "./routes";
import { logger } from "./utils/logger";
// The paths of those files keys will depend on where certbot stored them
const servOptions = {
cert: fs.readFileSync("/etc/letsencrypt/live/feikdomain.com/fullchain.pem"),
key: fs.readFileSync("/etc/letsencrypt/live/feikdomain.com/privkey.pem"),
ca: fs.readFileSync("/etc/letsencrypt/live/feikdomain.com/chain.pem"),
};
/**
* Createas an instance of the framework `fsexpress`.
*
* #returns {import("Express").Express} `express` instance.
*/
logger.info("express::expressApp");
const app: Express = express();
const build = path.join(__dirname, "../html");
app.use(express.static(build));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true, limit: "5m" }));
app.use("/static", express.static(build));
app.use(`${process.env.ENETO_CURRENT}`, routes());
app.use("*", function (req, res) {
return res.status(200).sendFile(`${build}/index.html`);
})
const secure = https.createServer(servOptions, app);
secure.listen(Number(process.env.PORT), () => {
console.log("servOptions: ", servOptions);
logger.info("APP RUNNING");
});

The issue was that I had a misunderstanding of how Node logging worked under Nginx.
I thought any problems or console logs with the Node setup would be logged to the nginx/error.log.
This was not in fact the case.
The Node setup had another problem, which made trying to access my endpoints crash.
The solution here is better logging that is not dependent on any sort of Nginx logs.

Solution
I just got this problem, and there are a couple of things you need.
First
you still need this
import bodyParser from "body-parser";
import express from "express";
import fs from "fs";
import path from "path";
// import https
import https from "https";
import { routes } from "./routes";
import { logger } from "./utils/logger";
// The paths of those files keys will depend on where certbot stored them
const servOptions = {
cert: fs.readFileSync("/etc/letsencrypt/live/feikdomain.com/fullchain.pem"),
key: fs.readFileSync("/etc/letsencrypt/live/feikdomain.com/privkey.pem"),
ca: fs.readFileSync("/etc/letsencrypt/live/feikdomain.com/chain.pem"),
};
/**
* Createas an instance of the framework `fsexpress`.
*
* #returns {import("Express").Express} `express` instance.
*/
logger.info("express::expressApp");
const app: Express = express();
const build = path.join(__dirname, "../html");
app.use(express.static(build));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true, limit: "5m" }));
app.use("/static", express.static(build));
app.use(`${process.env.ENETO_CURRENT}`, routes());
app.use("*", function (req, res) {
return res.status(200).sendFile(`${build}/index.html`);
})
const secure = https.createServer(servOptions, app);
secure.listen(Number(process.env.PORT), () => {
console.log("servOptions: ", servOptions);
logger.info("APP RUNNING");
});
Second
on yow location
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;
}
more specific on the proxy_pass http://localhost:5000;
change the http or add an s at the end like this
proxy_pass https://localhost:5000;
location / {
proxy_pass https://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;
}

Related

Vue.js / Nginx / Node.js - 413 Request Entity Too Large

My frontend is made on Vue.js and is running on nginx in production. My nginx.conf looks like:
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html index.htm;
client_max_body_size 100M;
# added for VueRouter
location / {
try_files $uri $uri/ /index.html;
}
}
In Node.js app I have this endpoint using multer to accept file:
// 100 MB
const upload = multer({ storage, limits: { fileSize: 100 * 1024 * 1024 } })
const router = express.Router()
router.post('/create', upload.single('file'), ImageController.create)
Also in app.js I have bodyParser set to 100 MB:
const app = express()
// Middleware
app.use(bodyParser.urlencoded({ limit: '100mb', extended: true, parameterLimit: 100000 }))
app.use(bodyParser.json({ limit: '100mb' }))
But I still get the error
413 Request Entity Too Large
Am I missing something?
I managed to fix it and the problem was nothing as I expected. In my VPS I create docker network nginx-proxy to link different ports to different domain names. I had to add client_max_body_size 100M; to nginx.conf of that container too!

Axios, Proxy request seems like not working

It seems like the axios library doesn't work as it should and I don't know what's wrong.
First, to explain. I am new to axios and the company I work has setup the API server using nGinx with proxy pass.
So let say, the API Server is under the domain: https://www.api.com and the api endpoints are located under https://www.api.com/api/.
Then, we are going to create a SSR application, using the axios library to make the request to this server, but the point is to use the proxy settings of the axios, in a way that the finally requests will not be like that: https://www.api.com/api/endpoint but like that: https://www.js-app.com/api/endpoint.
So, currently I have the following class:
class WebApiService {
constructor() {
this.deferred = Q.defer();
this.$http = axios.create();
}
async call(config) {
WebApiService._setDefaultApiCallHeader(config);
try {
const result = await this.$http(config);
this.deferred.resolve(result);
} catch( error ) {
this.deferred.reject(error);
}
return this.deferred.promise;
}
static _setDefaultApiCallHeader(config) {
config.headers = config.headers || {};
if (window.sessionStorage['Authorization'] !== 'undefined') {
config.headers['Authorization'] = `Bearer ${window.sessionStorage['Authorization']}`;
}
// HERE I SETUP THE PROXY SETTINGS
if ( /^\/api\//.test(config.url) ) {
config.proxy = config.proxy || {};
config.proxy.host = 'https://www.api.com';
}
}
}
So now, when I utilize this class from another place in my app using code like this:
const options = {
method: 'POST',
url: '/api/v0/configs',
data: { domain: window.location.hostname }
};
const websiteConfig = await this.webApiService.call(options);
In my browser console I get a 404 error and that's because the axios still request the API call from my localhost instead from the remote server.
The error I get is like that:
Also the axios settings inside the request Interceptor are like that:
So, you think I do something in wrong? You think I try to achieve something that's not possible? Is there any solution to this situation? Any idea on how to approach this issue?
I think you are misusing axios proxy option. This option as far as I understand is intended to put there some actual proxy. And you don't need all this in your case.
You should serve your app-client from your server https://www.js-app.com, below is an example of Nginx config:
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;
}
And for the API Server:
location /api {
proxy_pass http://localhost:8081; # here you put your backend server port
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_read_timeout 600s;
}
Examples are from this nice article that may help.
Or you may google some others, with title similar to "How to Set Up a Node.js Application for Production with Nginx Reverse Proxy"
If you can not put your backend server like that, you can always do something behind Nginx or in Nginx config to actually send request to api.com/api

Assets not routing properly with NGNIX, Node 8.11 and Angular 6

I have an issue getting assets to load properly in our current setup. We use NGINX, Node 8.11, angular 6
In a nut shell, I had to do some parsing of request coming into our node server.js to get files to load properly for angular.
Here is the setup a typical application called heroes:
Nginx
location /heroes/ {
proxy_pass
http://unix:///myapps/tmp/node.sock;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
add_header X-UA-Compatible "IE=edge";
}
Node Server.js
...
//==============================================================
// Point static path to dist
//=================================================================
app.use(express.static(__dirname + '/dist/'));
// set the static files location for the angular build
...
Node Server.js - create an allowed extension list
...
// Allowed extensions list can be extended depending on your own needs
const allowedExt = [
'.js',
'.ico',
'.css',
'.png',
'.jpg',
'.woff2',
'.woff',
'.ttf',
'.svg',
'.map',
'.otf',
'.eot',
'.gif'
];
...
Node Server.js - route files to the angular dist
...
// Redirect all the other requests
// TODO: This part is a hack.
//The main issue is express not serving up the static assets
app.get('*', (req, res) => {
if (allowedExt.filter(ext => req.url.indexOf(ext) > 0).length > 0) {
var iFileStart=req.url.lastIndexOf("/");
var sFile=req.url.substring(iFileStart+1);
res.sendFile(path.resolve('dist/'+sFile));
} else {
res.sendFile(path.resolve('dist/index.html'));
}
});
...
Angular index.html
...
<base href="/heroes/">
...
With this setup - my apps work for the most part. I had to add a few more kludges into it for some other issues.
The problem is - express or my nginx setup wasn't routing the request for assets correctly before this hack. I'm pretty sure I shouldn't have to check file extensions and route them differently.
If I change the Node Server.js file to this:
app.get('*', (req, res) => {
res.sendFile(path.resolve('dist/index.html'));
});
Then I get this error in the browers:
JS files being served as html?
It seems that the files can be found but aren't being processed as JS files.
Any suggestions?
Ok, I figure out my own issue.
Had to edit the following:
NGINX:
location /heroes/ {
root /app/mydir/heroes/dist <--- added this
proxy_pass http://unix:///myapps/tmp/node.sock;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
add_header X-UA-Compatible "IE=edge";
}
Server.js
...
//======================================================================
// Point static path to dist - false will cause a 404 if not found
//========================================================================
app.use(function (req, res, next) {
next();
}, express.static(__dirname+'/dist',{fallthrough:true}));
...
....
app.get('*', (req, res) => {
res.sendFile(path.resolve('dist/heores/index.html'));
});
...
angular.json
"outputPath": "dist/heroes",
Now everything works. Hopefully others will find this useful.

How to correctly configure Nginx for Node.js REST API?

I have a node application running on a service with Apache and Nginx as a reverse proxy.
On the same server also a Node REST API is running.
The JavaScript code looks as follows:
api.js
// Express
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
// Express App
const app = express();
// Env
const PORT = process.env.PORT || 3000;
const NODE_ENV = process.env.NODE_ENV || 'development';
// Config
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
// Routes
const users = require('./routes/users');
// Angular Http content type for POST etc defaults to text/plain at
app.use(bodyParser.text(), function ngHttpFix(req, res, next) {
try {
req.body = JSON.parse(req.body);
next();
} catch(e) {
next();
}
});
app.use('/api', users);
app.listen(PORT, function() {
console.log('Listen on http://localhost:' + PORT + ' in ' + NODE_ENV);
});
/routes/users.js
var models = require('../models');
var express = require('express');
var router = express.Router();
// get all users
router.get('/users', function(req, res) {
models.Beekeeper.findAll({}).then(function(users) {
res.json(users);
});
});
module.exports = router;
The Nginx configuration looks as follows:
index index.html index.htm;
upstream api {
server 127.0.0.1:3000;
}
server {
listen 80;
server_name example.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443;
root /var/www;
ssl on;
ssl_prefer_server_ciphers On;
ssl_protocols TLSv1.2;
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 10m;
ssl_ciphers AES256+EECDH:AES256+EDH:!aNULL;
add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload";
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;
ssl_dhparam /etc/nginx/ssl/dhparam.pem;
ssl_certificate /etc/letsencrypt/live/example.com/cert.pem;
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
server_name example.com;
location / {
proxy_pass http://127.0.0.1:8000;
proxy_http_version 1.1;
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-Proto $scheme;
}
location /api {
proxy_pass http://api;
proxy_http_version 1.1;
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-Proto $scheme;
rewrite ^/api/?(.*) /$1 break;
proxy_redirect off;
}
}
The problem is that if I make an API call on my development server, for example, localhost:3000/api/users, it works as expected.
However, if I make an API call on my production server, for example, https://example.com/api/users, I get Cannot GET /users and 404 NOT FOUND, respectively.
I suppose that there is something wrong with my Nginx configuration, however, although I already read numerous other posts about similar problems here on Stackoverflow, I could not solve the problem.
Notice that you're requesting this:
https://example.com/api/users
But the error says this:
Cannot GET /users
So the /api prefix is being stripped off the request path before being passed to your Node server.
Which is done by this line:
rewrite ^/api/?(.*) /$1 break;
Solution: remove that line.

Can't use routes in Express.JS with nginx

So I set up nginx in front of Express.JS and all is good, the issue is that say I go to website.com/users, I end up getting a 404 Not Found. Apparently going to website.com is fine, but I guess It's not passing through to routes. Here's my config file for nginx
upstream default {
server 127.0.0.1:3000;
keepalive 8;
}
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
root /var/www/;
index index.html index.htm;
# Make site accessible from http://localhost/
server_name website.com default;
access_log /var/log/nginx/default.log;
return 301 https://website.com$request_uri;
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-NginX-Proxy true;
proxy_pass http://default/;
proxy_redirect off;
}
}
My users route
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;
You need to change your route to look like this:
/* GET users listing. */
router.get('/users', function(req, res, next) {
res.send('respond with a resource');
});
You might also need to include the port for the express server (3000 is default):
proxy_pass http://default:3000;

Categories

Resources