I'm trying to deploy my MERN app on Elastic Beanstalk, and I seem to be running into a final problem that I just cannot solve.
My app works fine when running my server locally (running node server), but when running on elastic beanstalk, the page never loads.
Upon inspection, the static elements are not being loaded, as seen in Dev Tools:
Image showing ERR_CONNECTION_TIMED_OUT in dev tools
I checked all the EB logs and did not find any errors or helpful messages.
I'm thinking the problem is with EB not being able to find my static files somehow. It should however, my build files are not ignored by git and are deployed to EB.
Here's some background about my project:
My backend and client code are in one project, with the following structure:
project
server.js
frontend
build
static
index.html
I run my app by building the react site, then running "node server" which runs great
Here is the relevent code from my server.js :
const port = process.env.PORT || 8081;
app.use(express.static(path.join(__dirname, 'frontend/build')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'frontend/build/index.html'));
});
app.listen(port, () => {
console.log(`Server is running on port: ${port}`);
});
The server is successfully sending logs that the server is running and that the database has established a connection. So it seems the server is fine, it's just that the front-end is the problem.
eb config file:
option_settings:
aws:elasticbeanstalk:container:nodejs:
NodeCommand: "npm start"
aws:elasticbeanstalk:application:environment:
PORT: 8081
NODE_ENV: production
aws:elasticbeanstalk:container:nodejs:staticfiles:
/static: /frontend/build/static
I'm at a loss on how to solve this. The EB was deployed through the CLI and I haven't messed with any settings. I'm letting EB know where my static files are, and I believe it would say not found, rather than timing out.
Any help would be appreciated
Solved.
The problem was with using Helmet in my express server. I had ommited the code, thinking it not relevant, but here is the top portion of server.js, with the last line being the relevant portion:
const AWS = require('aws-sdk');
const cors = require('cors');
const express = require('express');
const helmet = require('helmet');
const mongoose = require('mongoose');
const path = require('path');
let Download = require('./models/Download.js');
require('dotenv').config();
const app = express();
const port = process.env.PORT || 8081;
app.use(helmet());
Not using helmet solves the issue.
To be honest, I'm not sure why this is the problem.
I assume that the problem is that helmet provides some security that my bare bones EB simply is not providing.
EDIT: Specifically, the problem is with CSP. Setting contentSecurityPolicy to false in Helmet is enough to fix the issue.
Related
I created a frontend app and now trying to incorporate backend into it.
ON the same frontend app i added an index.js file in the root directory, and installed express and required it in index.js file.
Very basic setup as below:
const express = require('express')
const cors = require('cors')
const port = process.env.PORT || 3001
const app = express()
app.get('/', (req, res) => {
res.send({
greetings: 'hi'
})
})
app.listen(port, () => {console.log(`Server on port ${port}`)})
Server is successfully on port 3001 as per my terminal, however, on localhost:3001 I'm not seeing any json response I set up in app.get.
It says Cannot GET / instead. When i inspected in devtool(Network) it says 404.
This seems a very straightforward setup, but what could've gone wrong here?
i just figured why. I installed nodemon but my “start” script is “node index.js”. Should’ve used “nodemon index.js”
Working now with nodemon index.ks
Your code is fine, There are no errors, I tested it and it works as expected.
However few things to note, Keep Backend in Seperate folder/dirctory unless required.
Coming back to your question, There are many possiblity such as some modules are not installed properly
try running following command
//this will install if any library is currupt or not installed properly
npm i
if it doesn't work then try clearing cache
Also keep in mind, In nodeJS dev server does not automatically refresh changes, you need to restart server to see changes or you can use dev dependancy called Nodemon (this will auto restart server on saving changes)
I have a very simple express app which serves everything in the build folder for my react app. Here's the entire thing:
const express = require("express");
require("dotenv").config();
const app = express();
const port = process.env.PORT || 5000;
app.use(express.static(process.env.PUBLIC_DIR));
app.use(express.json());
app.listen(port, () => {
console.log(`Server is running on port ${port}...`);
});
When running this on my local machine, it works fine. No issues.
On my EC2 instance, I'm using NGINX as a reverse proxy. Here's what the config in my default sites-available file looks like:
location / {
proxy_pass http://localhost:5000/;
}
location /upvotes {
proxy_pass http://localhost:5002/;
}
When you just go to the main site, another express app on 5000 serves a totally unrelated Gatsby project. That works fine, no issues.
When you go to /upvotes, this express app on 5002 does serve the index.html file perfectly fine, but it doesn't serve any of the accompanying .js and .css files that are also in that directory.
Does anyone know why this could be happening?
I eventually gave up and combined the two express apps into one and handled the /upvotes route using express. 🤷
I have been developing an app from the create-react-app starting project.
Today I have been doing the following on my local machine:
deploying my react app using react-scripts start
deploying my react app by using react-scripts build then either serving the build by either...
(A) using the [npm module serve][] as follows serve -p 4001
(B) or attempting to server using a express app like follows:
Express app:
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(4001);
I've just restarted my computer and it's still serving the site at:
http://localhost:4001/ and I cannot figure out how to stop it.
I wouldn't mind the continuous deployment of this server but when I build the project again. The changes are not reflected.
The only work around I've come up with is to now deploy at port 4025 and use the Express method coded above.
How the hell can I get rid of this weird residual app that continues to run (via some react process) at port 4001?
I'd really like that port back for sake of keeping it the same across different machines :(
Turns out that chrome keeps react apps running even if the server stops providing them.
Go to chrome://serviceworker-internals and unregister them.
I've been working with the Node.js Google App Engine for some months and have always successfully used the express.static solution to access static files in the public folder when i deployed my node.js app.
For some (to me not so obvious) reason I struggle to get this working lately in the Google Flexible production environment. On my local development environment everything is fine.
In order to narrow down the problem I created a very basic test app listed here:
'use strict'
const express = require('express')
const app = express()
const path = require('path')
const os = require('os')
const PORT = process.env.PORT || 8080
const ENV = process.env.NODE_ENV
//app.use(express.static('public'))
//app.use(express.static(path.resolve(__dirname, 'public')))
app.use(express.static(path.join(__dirname, 'public')))
app.listen(PORT, () => {
console.log(`SYSTEM: App listening on port ${PORT}`)
console.log(`SYSTEM: Press Ctrl+C to quit.`)
})
app.get('/', (req,res) => {
res.status(200).send('\
<h1>TEST app.use(express.static("public")) in Google Cloud Flexibel App Engine environment </h1>\
<hr/>\
<h4>YAML settings: runtime: nodejs env: flex</h4>\
<h4>HOST : '+`${os.hostname()}`+'</h4>\
<h4>PORT : '+`${PORT}`+'</h4>\
<h4>__dirname : '+`${__dirname}`+'</h4>\
<h4>mountpath : '+`${app.mountpath}`+'</h4>\
<h4>env : '+`${ENV}`+'</h4>\
<h4>path resolved: '+`${path.resolve(__dirname, 'public')}`+'</h4>\
<h4>path joined : '+`${path.join(__dirname, 'public')}`+'</h4>\
<hr/>\
<h2>If you see me <img src="./HB.png"> you can access "./HB.png" in the "public" directory.</h2>\
<h2>If you see me <img src="/HB.png"> you can access "/HB.png" in the "public" directory.</h2>\
<h2>If you see me <img src="HB.png"> you can access "HB.png" in the "public" directory.</h2>\
<hr/>\
')
})
I tried various settings of the express.static settings (see those commented out). However each time after deploying using
gcloud app deploy
to Google production I get 404 (also in the google logs). On local development environment everything is fine.
Does anyone have a clue ? Thanks in advance !
Strange, I solved it by reinstalling the Google Cloud SDK.
I'm trying to deploy a basic restify node app to AWS EB but when I do I get a 502 Bad Gateway error. The AWS console also shows that the application is in Health: Severe. It seems as though it isn't correctly serving via port 80. Here is my server.js:
var restify = require('restify');
var server = restify.createServer();
server.get('/', function(req, res) {
res.send("Hello");
return next();
});
var port = process.env.PORT || 3000;
server.listen(port);
Seems as though on EB that nginx redirects to node on port 8081, so I changed to that.
Additionally for whatever reason the node instance wasn't being run after "eb deploy". I added "node server.js" in software configuration on aws and now it seems to work fine.