Express 应用程序提供不需要的静态文件

Question

I have a react app that is served by express. The entire app is included in public/index.html.

Right now my server.js looks like this:

  1 const express = require('express');
  2 const path = require('path');
  3 const port = process.env.PORT || 8080;
  4 const app = express();
  5
  6 // the __dirname is the current directory from where the script is running
  7 app.use(express.static(__dirname));
  8
  9 app.get('*', (req, res) => {
 10   res.sendFile(path.resolve(__dirname, 'public/index.html'));
 11 });
 12
 13 app.listen(port);

However, somehow, files like package.json and /.ssh/known_hosts are being served, things that obviously shouldn't be avaialible.

I'm not sure why app.get('*', (req, res)... isn't catching all requests, and why app.use(express.static(__dirname)); seems to be the only configuration that allows my app to server ANY static files.

I haven't had any luck with app.use(express.static(__dirname+'/public')); or

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

or anything else I can find.

EDIT---

My project directory looks like:

/myproject
    package.json
    server.js
    /public
        index.html

I want ALL requests to simply serve index.html

What I'm still not understanding is why

app.use('*', express.static(path.resolve(__dirname,'/public/index.html')));

does not serve anything.

Also, why in the above example, res.sendFile() does nothing without first having called express.static(). If I delete line 7, then nothing is served.

Answer 1

So, never ever do this:

app.use(express.static(__dirname));

in your main server directory. That exposes ALL your server files to be viewed.

When using express.static() to serve a whole directory, you should create a directory that contains ONLY files intended for public consumption and then point express.static() at that.

I'm not sure why app.get('*', (req, res)... isn't catching all requests

Because that app.get('*', ...) is AFTER your express.static() so if the express.static() finds a matching file, the app.get('*', ...) never even sees the request. It's already handled and routing doesn't continue any more.

---

As always with express.static() to advise on exactly what you should do, we need to know the precise configuration you have. Where are the public files in your file system relative to your main server directory and what URLs are you intending to use in the client to refer to those publicly available files.

---

Here's a theoretical example (since you haven't provided your specifics):

Let's suppose you have files like this:

/myproject
   app.js
   /public
       main.css

And, suppose you want to be able to use /main.css as the URL from the client. For that, you would just do this from within app.js:

 app.use(express.static(path.join(__dirname, "public")));

In this first example, where you're serving these static files at the top level path, then you have to make sure there are no naming conflicts between these top level resources and any actual routes you want to serve.

If you wanted the client-side URLs to be /assets/main.css , then you would do this:

 app.use("/assets", express.static(path.join(__dirname, "public")));

In this example, you must make sure that the /public sub-directory (and any sub-directories it might have) contains only files intended to be publicly accessible.

Adding a path to the public URL such as /assets removes the chance of a naming conflict between your static assets and your top level routes. This can be a good thing because in any multi-person project, it's not uncommon that the person working on the static assets (like CSS files) is different than the person working on server routes so the two main not be directly aware of what names each other is using. In a single person project, you would certainly just keep it all in your head and avoid accidental naming conflicts that way.

---

FYI, my preference for folder organization is more like this:

/myproject
   /server
       app.js
   /public
       main.css

Where it's 100% obvious which are server files and which are public files. Then, to serve the public files from within app.js with a URL of /assets/main.css , I'd do this:

app.use("/assets", express.static(path.join(__dirname, "../public")));

---

From your comments:

I just want to serve public/index.html for all ('*') GET requests. All other data comes from separate apis. it seems that res.sendFile() doesn't work without first using express.static. The above code resides in server.js

If all you want to do is to serve public/index.html for all requests (where public is a sub-directory below where app.js is located), then remove the express.static() middleware entirely.

Just use this from app.js:

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'public/index.html'));
 });

Answer 2

remove app.use(express.static(__dirname));

as that tells express to load all files that exist

Answer 3

app.use(express.static(__dirname)); will make your app insecure. Always print out the URLs in the console like path.resolve(__dirname, 'public/index.html') to find out if there is something wrong in it. Seems aiming to the root directory for static files makes problem. Put them in the conventional public directory then try it out again