使用 Express 服务 Web 应用程序和静态文件

• 创建服务器
• 目录配置
• 自定义路由
• 单页应用程序配置
• 结论

创建服务器

为 Express 服务器创建一个文件夹。创建一个名为 index.js 的文件，打开控制台，然后输入：

npm init

完成请求的选项。然后使用以下命令安装 Express 模块：

npm install --save express

在项目中创建一个文件夹，用于存放静态文件。在本例中，该文件夹将被命名为 app。文件树应如下所示：

|-- app
|-- node_modules
|-- index.js
|-- package-lock.json
|-- package.json

目录配置

将静态文件放在 /app 文件夹中，例如，您的网站、图像、CSS 文件等。要使 Express 服务器使用该文件夹作为静态文件的源，您可以在 index.js 中使用 express.static() 代码，如下所示：

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

// 告诉服务器使用 /app 作为静态文件的源
app.use(express.static('app'));

// 在端口 3000 上运行服务器
app.listen(3000, () => console.log('Running on http://localhost:3000'));

例如，如果在 /app 中有名为 cat.jpeg、main.css、index.html 的文件，我们可以通过以下路由从服务器访问它们：

http://localhost:3000/cat.jpeg
http://localhost:3000/main.css
http://localhost:3000/index.html

例如，如果还有另一个名为 static 的文件夹，我们也想将其用作静态文件的源，我们只需再次调用该函数：

// 告诉服务器使用 /app 和 /static 作为静态文件的源
app.use(express.static('app'));
app.use(express.static('static'));

Express 将按照静态目录定义的顺序搜索文件。

自定义路由

如果我们想创建一个自定义路由来访问静态文件，可以通过将名称作为函数的第一个参数来实现，如下所示：

// 告诉服务器使用 /app 和 /static 作为静态文件的源
app.use('/static', express.static('app'));
app.use('/static', express.static('static'));

我们可以通过以下方式访问文件：

http://localhost:3000/static/cat.jpeg 
http://localhost:3000/static/main.css
http://localhost:3000/static/index.html

单页应用程序配置

如果我们有使用 Angular、React 或 Vue 等框架开发的应用程序，并且希望我们的服务器提供这些应用程序并将路由重定向到由 Web 应用程序处理，我们可以按如下方式配置服务器：

假设我们的应用程序在名为 /app 的文件夹中

const express = require('express');
const path = require('path');
const app = express();

// 告诉服务器使用 /app 作为静态文件的源
app.use(express.static('app'));

// 将所有路由重定向到由我们的应用程序处理
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname + '/app/index.html'));
});

// 在端口 3000 上运行服务器
app.listen(3000, () => console.log('Running on http://localhost:3000'));

结论

通过 express.static()，处理静态文件变得更加简单。它还允许我们使用 Express 服务器来服务 Web 应用程序。

如果您只需要提供静态网站，则可能不需要服务器。有多个免费选项可用于托管 Web 应用程序，包括 Github Pages、Netlify、Firebase Hosting 和 Surge。

希望这篇文章对您有所帮助。