Question

Why does nginx return 404 not found from mean server when loading assets?

Posted September 15, 2015 40.1k views
Nginx Ubuntu Node.js Networking Configuration Management MEAN Deployment

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

mydomain.com/myApp

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

1 comment
  • Update: Still not working but after reading this article about replacing express static routing with nginx I added this to my nginx config:

       6     location ~ ^/myApp/(libs/|img/|js/|css/) {
       7         root /path/to/myApp/public;
       8         access_log off;
       9         expires max;
      10     }
    

    No dice though. Still getting 404 not found for all assets.

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.

4 answers

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 }

anyone find answer to this

Is this your full nginx config for this site?

@gabrieldev, yes that is the full nginx config.

Submit an Answer