node和nginx如何查找静态文件?

时间:2016-04-11 16:46:16

标签: node.js express nginx digital-ocean

我尝试使用node / express / nginx在digitalocean中托管不同的应用程序

我还有一个Meteor应用程序作为主要路径运行

这是我的nginx /etc/nginx/sites-enabled/default配置

server {
        listen 80;

        server_name localhost;

        location / {
                proxy_pass http://localhost:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

        location /buscatucanal {
                proxy_pass http://localhost:4000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }


}

第一个/正常工作但/buscatucanal找不到css / images / js。

这里是express js文件:

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/'));

app.get('/buscatucanal', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

app.listen(4000, function(){
 console.log("listening in port 4000");
});

以及index.html文件正在寻找的一些静态文件:

<script type="text/javascript" src="buscatucanal/public2/bower_components/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="buscatucanal/public2/bower_components/angular/angular.min.js"></script>
  <script type="text/javascript" src="buscatucanal/public2/bower_components/angular-aria/angular-aria.js"></script>
  <script type="text/javascript" src="buscatucanal/public2/bower_components/angular-animate/angular-animate.js"></script>
  <script type="text/javascript" src="buscatucanal/public2/bower_components/angular-material/angular-material.js"></script>
  <script type="text/javascript" src="buscatucanal/public2/bower_components/angular-material-data-table/dist/md-data-table.min.js"></script>
  <script type="text/javascript" src="buscatucanal/public2/bower_components/underscore/underscore-min.js"></script>
  <script type="text/javascript" src="buscatucanal/public2/js/app.js"></script>

以下是开发人员工具的错误日志:

GET http://myipaddress/buscatucanal/public2/bower_components/angular-material-data-table/dist/md-data-table.min.css 
buscatucanal:9 GET http://myipaddress/buscatucanal/public2/bower_components/angular-material/angular-material.css 
buscatucanal:145 GET http://myipaddress/buscatucanal/public2/bower_components/jquery/dist/jquery.min.js 
buscatucanal:13 GET http://myipaddress/buscatucanal/public2/css/custom.css 
buscatucanal:147 GET http://myipaddress/buscatucanal/public2/bower_components/angular-aria/angular-aria.js 
buscatucanal:146 GET http://myipaddress/buscatucanal/public2/bower_components/angular/angular.min.js 
buscatucanal:148 GET http://myipaddress/buscatucanal/public2/bower_components/angular-animate/angular-animate.js 
buscatucanal:149 GET http://myipaddress/buscatucanal/public2/bower_components/angular-material/angular-material.js 
buscatucanal:152 GET http://myipaddress/buscatucanal/public2/js/app.js 
buscatucanal:43 GET http://myipaddress/buscatucanal/public2/images/logo1.png 404 (Not Found)
buscatucanal:150 GET http://myipaddress/buscatucanal/public2/bower_components/angular-material-data-table/dist/md-data-table.min.js 
buscatucanal:151 GET http://myipaddress/buscatucanal/public2/bower_components/underscore/underscore-min.js 404 (Not Found)

我该怎么做才能解决这个问题?

修改

我更改了index.html文件并编辑了它正在寻找的文件

<script type="text/javascript" src="public2/bower_components/jquery/dist/jquery.min.js"></script>

如果我直接进入像http://myipaddress:4000这样的端口,它可以正常工作。

但是,当我像http://myipaddress/buscatucanal一样,我得到了不同的错误:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://myipaddress/public2/bower_components/angular-material-data-table/dist/md-data-table.min.css".
buscatucanal:9 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://myipaddress/public2/bower_components/angular-material/angular-material.css".
buscatucanal:13 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://myipaddress/public2/css/custom.css".

似乎没有正确地为他们服务:

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:0)

您需要设置mime类型。

我假设你已经在Nginx中正确包含了mime类型,在我的机器上我已经有了这个......

http {
     include       mime.types;
     default_type  application/octet-stream;

您没有在代码中设置mime类型。看一下快递文档

http://expressjs.com/en/api.html

res.type(type)
     

将Content-Type HTTP标头设置为由...确定的MIME类型   指定类型的mime.lookup()。如果type包含“/”   字符,然后它将Content-Type设置为键入。

res.type('.html');              // => 'text/html'
res.type('html');               // => 'text/html'
res.type('json');               // => 'application/json'
res.type('application/json');   // => 'application/json'
res.type('png');                // => image/png

有一个名为mime mime.lookup的模块可用于获取MIME类型

https://github.com/broofa/node-mime?_ga=1.178625127.213417936.1460395729#mimelookuppath

mime.lookup('/path/to/file.txt');         // => 'text/plain'
mime.lookup('file.txt');                  // => 'text/plain'
mime.lookup('.TXT');                      // => 'text/plain'
mime.lookup('htm');  

节点也可以明确设置标题。