从express/node.js应用程序提供静态文件 [英] Serving static files from an express/node.js application

问题描述

我是新手，最近开始学习node.我在websockets( https://devcenter.heroku.com/articles/node- websockets )，并使其适应于我正在从事的特定项目.在示例代码中，只有一个带有一些嵌入式javascript的index.html文件.我将此脚本移到了一个单独的文件中，并在HTML中对其进行了引用.本地一切正常，但是当我部署到Heroko时无法正常工作.我与Heroku的非常乐于助人的团队聊天，他们告诉我服务器端代码正在将所有文件作为HTML进行处理，因此我需要更改代码.他们给了我一些指示，几天来我尝试了尽可能多的事情，但无济于事.最后，他们建议参加此论坛，作为解决问题的一种方法，因为这超出了他们的范围.提供index.html文件的现有代码如下:

Hi I am a newbie and started to learn about node recently. I took an Heroku tutorial on websockets (https://devcenter.heroku.com/articles/node-websockets) and adapted it for a specific project I was working on. In the example code there was a single index.html file with some embedded javascript. I moved this script out to a separate file and referenced it in the HTML. Everything worked fine locally but doesn't work when i deploy to Heroko. I chatted with the very helpful team at Heroku who informed me that my server side code is serving up all files as HTML and I need to change the code. They gave me some pointers and I tried as many things as I could over several days but to no avail. In the end they recommended coming to this forum as a way to solve the problem as it is beyond their scope. The existing code that serves up the index.html file is as follows:

const express = require('express');
const SocketServer = require('ws').Server;
const path = require('path');
const PORT = process.env.PORT || 3000;
const INDEX = path.join(__dirname, 'index.html');
const server = express()
.use((req, res) => res.sendFile(INDEX) )
.listen(PORT, () => console.log(Listening on ${ PORT }));

起初，我对此进行了编辑，以包括以下行:

At first i edited this to include the line:

app.use(express.static('public'))

但这没用.然后，我进行了如下修改，但仍然无法正常工作:

but this didn't work. I then amended as follows and it still doesn't work:

const INDEX = path.join(__dirname, 'index.html');
const JS = path.join(__dirname, 'client.js');

const server = express()
.use((req, res) => {
res.sendFile(INDEX);
res.sendFile(JS);

当我单独运行它们时，我已经看过其他有效的教程，但是当我尝试改写我的上述代码时，它根本就不起作用.如果有人可以指出正确的方向，我将不胜感激.

I have looked at other tutorials that work when i run them in isolation but when I try to adapt my above code it simply doesn't work. I would really appreciate if someone out there could point me in the right direction.

顺便说一句，这是Heroku告诉我的:

BTW this is what Heroku told me:

"为了进一步解释该错误，未捕获到SyntaxError:意外令牌<是因为

"To explain a bit further this error Uncaught SyntaxError: Unexpected token < is because the URL for http://thawing-journey-33085.herokuapp.com/client.js isn't serving a javascript file but is instead trying to serve the HTML for the homepage. This suggests you have an issue with the routing in your application which you'll need to review. This is probably because your server.js file doesn't check for any particular URL before sending the index.html file."

谢谢

推荐答案

我为这样的静态文件提供服务:

I serve my static files like this:

// define the folder that will be used for static assets
app.use(Express.static(path.join(__dirname, '../public')));

// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
    response.sendFile(path.resolve(__dirname, '../public', 'index.html'));
});

这样，我可以在express.static中间件中设置静态文件夹，以便为文件提供服务.然后我将所有网址请求重定向到index.html

This way i set the static folder in the express.static middleware so i can serve the files. And then i redirect all url request to the index.html

要了解更多信息:表示静态

这篇关于从express/node.js应用程序提供静态文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！