CTO工具
注册
首页 数据库 使用Node.js搭建静态资源服务详细教程

使用Node.js搭建静态资源服务详细教程

0 mongodb

使用Node.js搭建静态资源服务是非常常见的需求，下面我将详细讲解搭建静态资源服务的完整攻略，并提供两条示例说明。

环境准备

在开始之前，确保你已经安装了Node.js和npm包管理工具，同时你需要创建一个空的目录做为工作目录。

安装依赖

在工作目录中执行以下命令，安装Express和serve-static两个依赖。

npm install express serve-static --save

创建服务器

在工作目录中创建一个名为server.js的文件，编写以下代码：

const express = require('express');
const serveStatic = require('serve-static');

const app = express();

app.use('/', serveStatic(__dirname));

const port = process.env.PORT || 8080;
app.listen(port);

console.log(`Static source server started on port ${port}...`);

代码解释：

  • 第1行导入依赖的express和serve-static模块；
  • 第3行创建一个express的应用实例；
  • 第5行将静态资源目录指定为当前工作目录(__dirname)；
  • 第7行定义服务监听的端口号，这里默认为8080；
  • 第8行启动服务，并在控制台输出提示信息。

启动服务

在工作目录中执行以下命令，启动服务。

node server.js

在浏览器输入http://localhost:8080即可访问当前工作目录中的静态资源。

示例说明

示例一：使用Node.js搭建简单的博客系统

博客系统通常需要静态资源服务，我们可以使用Node.js来搭建一个简单的博客系统。

首先创建一个名为blog-server.js的文件，编写以下代码：

const express = require('express');
const serveStatic = require('serve-static');
const path = require('path');

const app = express();
const staticPath = path.join(__dirname, 'public');

app.use('/', serveStatic(staticPath));
app.get('/', (req, res) => {
  res.sendFile(path.join(staticPath, 'index.html'));
});
app.get('/post.html', (req, res) => {
  res.sendFile(path.join(staticPath, 'post.html'));
});

const port = process.env.PORT || 3000;
app.listen(port);

console.log(`Blog server started on port ${port}...`);

代码解释：

  • 第1行导入依赖的express、serve-static和path模块；
  • 第3-4行创建一个express的应用实例，同时将静态资源目录指定为当前目录下的public目录；
  • 第6-7行配置请求静态资源时使用serve-static中间件；
  • 第8-9行配置访问首页和文章页时的路由；
  • 第11行定义服务监听的端口号，这里默认为3000；
  • 第12行启动服务，并在控制台输出提示信息。

在当前目录下创建public目录，并在其中创建index.html和post.html两个文件，这里分别简单编写一下示例代码。

index.html文件内容如下：




  
  博客首页


  
欢迎来到我的博客首页！

  
阅读全文

post.html文件内容如下：




  
  博客文章


  
我的第一篇博客文章

  
欢迎来访问我的新博客！

最后在当前目录下执行以下命令，启动服务：

node blog-server.js

在浏览器输入http://localhost:3000即可访问博客首页，点击页面中的“阅读全文”链接即可访问文章页。

示例二：使用Node.js搭建简单的网盘系统

网盘系统通常需要静态资源服务，我们可以使用Node.js来搭建一个简单的网盘系统。

首先创建一个名为disk-server.js的文件，编写以下代码：

const express = require('express');
const serveStatic = require('serve-static');
const path = require('path');

const app = express();
const staticPath = path.join(__dirname, 'public');

app.use('/', serveStatic(staticPath));
app.get('/', (req, res) => {
  res.sendFile(path.join(staticPath, 'index.html'));
});

const port = process.env.PORT || 4000;
app.listen(port);

console.log(`Disk server started on port ${port}...`);

代码解释：

  • 第1行导入依赖的express、serve-static和path模块；
  • 第3-4行创建一个express的应用实例，同时将静态资源目录指定为当前目录下的public目录；
  • 第6-7行配置请求静态资源时使用serve-static中间件；
  • 第8-9行配置访问首页的路由；
  • 第11行定义服务监听的端口号，这里默认为4000；
  • 第12行启动服务，并在控制台输出提示信息。

在当前目录下创建public目录，并在其中创建以下子目录：

  • video：用于存放视频文件；
  • music：用于存放音乐文件；
  • doc：用于存放文档文件。

在public目录下创建index.html文件，内容如下：




  
  网盘首页


  
欢迎来到我的网盘！

最后在当前目录下执行以下命令，启动服务：

node disk-server.js

在浏览器输入http://localhost:4000即可访问网盘首页，点击页面中的链接即可访问相应的文件夹。