amrtgaber
By:
amrtgaber

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

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

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.

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 }

Is this your full nginx config for this site?

@gabrieldev, yes that is the full nginx config.

Have another answer? Share your knowledge.