I have an nginx reverse proxy that cannot get assets from an 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. I've read and implemented the suggestions from proxying nginx Express - 404 on static files and NginX proxying Nodejs/Express - 404 on static files and read this article about replacing express static routing with nginx to help me solve this issue but none have worked.
The request uri is simply
mydomain.com/myApp
and the folder structure looks like:
myApp
├── app
└── public
├── css
├── js
└── views
nginx config:
1 server {
2 listen 80;
3
4 server_name mydomain.com;
5
6 location ~ ^/myApp/(libs/|img/|js/|css/) {
7 root /path/to/myApp/public;
8 access_log off;
9 expires max;
10 }
11
12 location /myApp {
13 proxy_pass http://mean-stack-ip:8080;
14 proxy_http_version 1.1;
15 proxy_set_header Upgrade $http_upgrade;
16 proxy_set_header Connection 'upgrade';
17 proxy_set_header Host $host;
18 proxy_cache_bypass $http_upgrade;
19 }
20 }
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
You could try proxying all requests instead of just /myApp.