Question
Why does nginx return 404 not found from mean server when loading assets?
- Posted September 15, 2015
- NginxNetworkingMEANNode.jsDeploymentConfiguration ManagementUbuntu
I have an nginx reverse proxy that cannot get assets from upstream mean stack server. It’s a single page app that is very small. The index file will load just fine but all assets respond with 404 not found. It works locally when I have <base href="/"> but that does not work through the proxy. The request uri is simply
and the folder structure looks like:
/myApp --------->/app --------->/public -------------->/views -------------->/css -------------->/js
nginx config:
1 server {
2 listen 80;
3
4 server_name mydomain.com;
5
6 location /myApp {
7 proxy_pass http://mean-stack-ip:8080;
8 proxy_http_version 1.1;
9 proxy_set_header Upgrade $http_upgrade;
10 proxy_set_header Connection 'upgrade';
11 proxy_set_header Host $host;
12 proxy_cache_bypass $http_upgrade;
13 }
14 }
server.js:
1 // server.js
2
3 // modules =================================================
4 var express = require('express');
5 var app = express();
6 var bodyParser = require('body-parser');
7 var methodOverride = require('method-override');
8
9 // set our port
10 var port = process.env.PORT || 8080;
11
12 // get all data/stuff of the body (POST) parameters
13 // parse application/json
14 app.use(bodyParser.json());
15
16 // parse application/vnd.api+json as json
17 app.use(bodyParser.json({ type: 'application/vnd.api+json' }));
18
19 // parse application/x-www-form-urlencoded
20 app.use(bodyParser.urlencoded({ extended: true }));
21
22 // override with the X-HTTP-Method-Override header in the request. simulate DELETE/PUT
23 app.use(methodOverride('X-HTTP-Method-Override'));
24
25 // set the static files location /public/img will be /img for users
26 app.use(express.static(__dirname + '/public'));
27
28 // routes
29 require('./app/routes')(app); // configure our routes
30
31 // startup our app at http://localhost:8080
32 app.listen(port);
33
34 // shoutout to the user
35 console.log('Server listening on port ' + port + ' ...');
36
37 // expose app
38 exports = module.exports = app;
app/routes.js:
1 // app/routes.js
2
3 module.exports = function(app) {
4
5 // route to handle all angular requests
6 app.get('/myApp', function(req, res) {
7 res.sendfile('./public/views/index.html');
8 });
9
10 };
index.html:
1 <!doctype html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <base href="/myApp/">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8
9 <title>My App</title>
10
11 <!-- CSS -->
12 <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
13 <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
14 <link rel="stylesheet" href="css/style.css">
15
16 <!-- JS -->
17 <script src="libs/jquery/dist/jquery.min.js"></script>
18 <script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
19 <script src="libs/angular/angular.min.js"></script>
20 <script src="libs/angular-route/angular-route.min.js"></script>
21
22 <!-- ANGULAR -->
23 <script src="js/controllers/mainController.js"></script>
24 <script src="js/appRoutes.js"></script>
25 <script src="js/app.js"></script>
26 </head>
27
28 <body ng-app="myApp" ng-controller="mainController as main">
29 <div id="body-container" class="container-fluid">
30
31 <!-- Angular dynamic content -->
32 <div ng-view></div>
33
34 </div>
35 </body>
36
37 </html>
I’m new to mean stack and brand new to nginx so any help will be greatly appreciated. I’m essentially blocked from building anything further because I can’t serve my apps!
Thanks in advance, Amr
These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.
@gabrieldev, yes that is the full nginx config.
Is this your full nginx config for this site?
anyone find answer to this
Answered on stack overflow here: You could try proxying all requests instead of just /myApp.
Just had to change the nginx config to this:
1 server {
2 listen 80;
3
4 server_name mydomain.com;
5
6 location / {
7 proxy_pass http://mean-stack-ip:8080;
8 proxy_http_version 1.1;
9 proxy_set_header Upgrade $http_upgrade;
10 proxy_set_header Connection 'upgrade';
11 proxy_set_header Host $host;
12 proxy_cache_bypass $http_upgrade;
13 }
14 }
Try DigitalOcean for free
Click below to sign up and get $100 of credit to try our products over 60 days!
Update: Still not working but after reading this article about replacing express static routing with nginx I added this to my nginx config:
No dice though. Still getting 404 not found for all assets.