为什么 nginx return 404 from mean server 在加载资产时?
Why does nginx return 404 from mean server when loading assets?
我有一个 nginx 反向代理无法从上游平均堆栈服务器获取资产。这是一个非常小的单页应用程序。索引文件将加载得很好,但所有资产都以 404 not found 响应。它在我有 <base href="/">
时在本地工作,但不能通过代理工作。我已经阅读并实施了 and NginX proxying Nodejs/Express - 404 on static files and read this article 关于用 nginx 替换快速静态路由的建议,以帮助我解决这个问题,但 none 已经奏效了。
请求uri很简单
我的域名。com/myApp
文件夹结构如下:
myApp
├── app
└── public
├── css
├── js
└── views
nginx 配置:
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>
我是堆栈的新手,也是 nginx 的新手,因此非常感谢您的帮助。我基本上无法进一步构建任何东西,因为我无法为我的应用程序提供服务!
提前致谢,
阿姆
您可以尝试代理所有请求,而不仅仅是 /myApp。
当我使用 docker container links to connect my containers like in some of the older documentation. Docker container networking is the thing to use. I have another post with more details here 时,我的日志中出现了同样的错误,我的网站 www.starbug.com 使用了此错误,并链接到我的 git 存储库和完整源代码。
我不想在另一个 post 中重复我的答案,但基本思想是创建一个 docker 网络并通过配置文件中的名称引用容器。这对我有用:
docker network create nginx-proxy
docker run --net nginx-proxy --name nginx-ss-00.starbug.com -v /var/run/docker.sock:/tmp/docker.sock -d -p 80:80 -p 443:443 nginx-ss.starbug.com
docker run --net nginx-proxy --name aai-gunicorn-00 -d -p 8080:8080 aai-gunicorn
在我的 nginx 配置文件中
server {
server_name www.starbug.com;
listen 80;
# reverse proxy
location / {
# TODO Assumes flask container is named aai-gunicorn-00 and running on port 8080
proxy_pass http://aai-gunicorn-00:8080;
# Redefine the header fields that NGINX sends to the upstream server
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 5M;
}
}
我有一个 nginx 反向代理无法从上游平均堆栈服务器获取资产。这是一个非常小的单页应用程序。索引文件将加载得很好,但所有资产都以 404 not found 响应。它在我有 <base href="/">
时在本地工作,但不能通过代理工作。我已经阅读并实施了
请求uri很简单
我的域名。com/myApp
文件夹结构如下:
myApp
├── app
└── public
├── css
├── js
└── views
nginx 配置:
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>
我是堆栈的新手,也是 nginx 的新手,因此非常感谢您的帮助。我基本上无法进一步构建任何东西,因为我无法为我的应用程序提供服务!
提前致谢,
阿姆
您可以尝试代理所有请求,而不仅仅是 /myApp。
当我使用 docker container links to connect my containers like in some of the older documentation. Docker container networking is the thing to use. I have another post with more details here 时,我的日志中出现了同样的错误,我的网站 www.starbug.com 使用了此错误,并链接到我的 git 存储库和完整源代码。
我不想在另一个 post 中重复我的答案,但基本思想是创建一个 docker 网络并通过配置文件中的名称引用容器。这对我有用:
docker network create nginx-proxy
docker run --net nginx-proxy --name nginx-ss-00.starbug.com -v /var/run/docker.sock:/tmp/docker.sock -d -p 80:80 -p 443:443 nginx-ss.starbug.com
docker run --net nginx-proxy --name aai-gunicorn-00 -d -p 8080:8080 aai-gunicorn
在我的 nginx 配置文件中
server {
server_name www.starbug.com;
listen 80;
# reverse proxy
location / {
# TODO Assumes flask container is named aai-gunicorn-00 and running on port 8080
proxy_pass http://aai-gunicorn-00:8080;
# Redefine the header fields that NGINX sends to the upstream server
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 5M;
}
}