使用 Fastify-Static 构建静态资源服务器-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，静态资源服务器是非常重要的组成部分之一，它用于提供网站所需的静态资源文件，例如图片、JS 文件、CSS 文件等。本文将介绍如何使用 Fastify-Static 搭建一个简单但高效的静态资源服务器。

Fastify-Static 简介

Fastify-Static 是 Fastify 生态系统中一个用于构建静态资源服务器的插件。它基于快速和高度优化的静态文件服务器 send 之上，并添加了 Fastify 插件 API，以提供更加灵活和易用的 API。

Fastify-Static 具有以下特点：

非常快，基于高效的静态文件服务器 send 开发。
可配置的选项，包括 maxAge，immutable 和 extensions。
提供了诸如 etag 和 lastModified 等 HTTP 头处理功能，以及 Gzip 压缩等。
支持自定以路由前缀和文件根目录等。

安装 Fastify-Static

使用 npm 安装 Fastify 和 Fastify-Static：

$ npm install fastify fastify-static

快速使用

在 Fastify 中使用 Fastify-Static 可以非常简单。以下是一个基本的 Fastify-Static 服务器示例：

// javascriptcn.com 代码示例
const fastify = require('fastify')({ logger: true })
const staticPlugin = require('fastify-static')
const path = require('path')

// 注册 fastify-static 插件
fastify.register(staticPlugin, {
  root: path.join(__dirname, 'public'),
  prefix: '/public/',
})

fastify.listen(3000, (err) => {
  if (err) {
    fastify.log.error(err)
    process.exit(1)
  }
  fastify.log.info(`server listening on ${fastify.server.address().port}`)
})

在上面的示例代码中，我们首先获得 fastify 和 Fastify-Static 模块，并将其注入到 Fastify 实例中。然后我们声明了静态文件所在的根目录，并指定了路由前缀。Fastify 将为包括 /public/ 前缀的所有路由请求提供静态内容。

现在，只需启动服务器，访问 http://localhost:3000/public/index.html，就会返回 public 文件夹中的 index.html 文件。

高级使用

Fastify-Static 可以通过配置选项进行更高级的用法，以下是一些最常见的用例。

root

在 Fastify-Static 中，root 是指静态文件的根目录。这个选项是必须配置的。

fastify.register(staticPlugin, {
  root: path.join(__dirname, 'public'),
  prefix: '/public/',
})

上面的示例中，root 被设置为 path.join(__dirname, 'public')。这意味着静态文件相对于文件系统的路径是 __dirname/public。

prefix

prefix 是指要用于访问静态资源的 URL 前缀。这个选项是可选的，如果不指定，默认为根 URL。

fastify.register(staticPlugin, {
  root: path.join(__dirname, 'public'),
  prefix: '/public/',
})

在上面的示例中，prefix 被设置为 /public/。这意味着静态文件 URL 包含 /public/。

maxAge

maxAge 选项指定在浏览器缓存中要保留静态文件的最长时间。缓存可以通过响应头中的 Cache-Control 标头进行控制。默认情况下，Fastify-Static 在响应标头中添加了 Cache-Control: private, max-age=86400。

fastify.register(staticPlugin, {
  root: path.join(__dirname, 'public'),
  prefix: '/public/',
  maxAge: 3600,
})

在上面的示例中，maxAge 被设置为 3600 秒。这意味着静态文件将在浏览器缓存中保留 1 小时。

immutable

immutable 选项用于指示静态文件是否可以进行不可变的缓存。如果启用了此选项，则浏览器会认为文件永远不会更改，因此它们可以进行缓存并重复使用。

fastify.register(staticPlugin, {
  root: path.join(__dirname, 'public'),
  prefix: '/public/',
  immutable: true,
})

在上面的示例中，immutable 被设置为 true。这意味着静态文件将被视为不可变，并且浏览器可以缓存它们。

extensions

extensions 选项指定要解析的扩展名，也就是说，如果 URL 中没有指定扩展名，则会补充缺失的扩展名。默认情况下，Fastify-Static 不会添加任何扩展名。

fastify.register(staticPlugin, {
  root: path.join(__dirname, 'public'),
  prefix: '/public/',
  extensions: ['.html', '.htm'],
})

在上面的示例中，extensions 被设置为包含 .html 和 .htm 的数组。这意味着如果 URL 中没有指定 .html 或 .htm，则 Fastify-Static 将附加 .html。

index

index 选项用于指定索引文件的文件名。索引文件是目录中的默认文件。

fastify.register(staticPlugin, {
  root: path.join(__dirname, 'public'),
  prefix: '/',
  index: 'index.htm',
})

在上面的示例中，index 被设置为 index.htm。这意味着当访问目录时，会返回此文件。

decorateReply

decorateReply 选项指定是否在响应封装器中装饰响应对象。默认情况下，Fastify-Static 不装饰响应对象。

fastify.register(staticPlugin, {
  root: path.join(__dirname, 'public'),
  prefix: '/public/',
  decorateReply: false,
})

在上面的示例中，decorateReply 被设置为 false。这意味着响应对象不会被装饰。

总结

Fastify-Static 是一个十分灵活和高效的静态资源服务器插件。它能够快速地提供静态资源文件，支持诸如压缩，ETag，Last-Modified，缓存等功能。本文详细介绍了 Fastify-Static 的用法并提供示例代码供参考。我们希望此文可以帮助您更好的理解 Fastify-Static 并在实际项目中灵活应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65474ae07d4982a6eb1a800c