我用Nodejs的Koa框架搭建了一个静态站点 | 乐趣区

缘起

我用Node.js的Koa2框架搭建了一个静态站点，当然这个站点只是部署在我自己的电脑上，主要用来做一些测试：比如写个小页面，尝试下新技术。以前我在自己的电脑上搭建过很多类似的静态站点，因为用过一年的php，所以我之前都是用php+nginx来搭建站点，最近两年我一直在做前端，php也懒得碰了。
前段时间在看一个公开课时（忘了哪个机构和哪位老师了，真抱歉），这个公开课的主要内容是教你如何实现一个简单的koa框架，我当时听了下，然后照葫芦画瓢自己写了个简陋的"koa框架"。后来我想用这个简陋的框架搭建一个静态站点，折腾了下，基本可行，但我好奇koa的源码，于是去瞅了下，然后觉得自己写的实在不咋地。于是还是打算用koa来搭建个静态站点。

Koa用起来很方便

其实Node.js已经为web开发提供了很多好的api接口，koa只是对其中的一些api进行了下简单的封装，使我们开发起来更方便。按我的理解，koa的核心（或者说比较好的地方）就是其提供的中间件机制：

const app = new Koa()app.use(async ctx => {  // 中间件内容1})app.use(async ctx => {  // 中间件内容2})app.listen(port, () => {  console.log('启动')})

这种方式用起来也比较方便。
它的核心实现在于（从公开课中学到的），将所有传入的中间件合并为一个，然后递归调用，这里不展开说了。

静态站点需求其实很简单

那么用koa搭建一个静态站点也就比较容易了，静态站点也就是主要展示静态文字内容(html)、图片，另外加上一些简单的样式美化(css)和交互(js)，也就是我只需要一个web服务器能够提供html、图片(jpg、jpg等)、js、css的发布功能即可。
下面通过一个页面的请求来简单分析下站点的实现：
1，用户通过浏览器访问站点中的a.html
2，web服务器接收到请求后解析请求的文件名、文件类型
3，根据上面拿到的文件名去服务器上找相应的文件
4，找到了，则设置响应头：状态码（200）、响应内容类型和响应体；没有找到，则设置错误的状态码（如404）和对应的响应体。
当然，还有很多细节需要考虑：比如服务器的页面存放目录、以及目录是否可读等等情况。

代码目录

代码

下面我先把我写的代码贴在下面：
主文件app-koa.js

const url = require('url')const path = require('path')const Koa = require('koa')const CONTENT_TYPE = require('./mime')const STATUS_CODE = require('./status-code')const {  accessFilePromise,  statFilePromise,  readFilePromise} = require('./file-util')const ROOT = __dirnameconst app = new Koa()app.use(async ctx => {  const reqUrl = ctx.request.url  let pathname = url.parse(reqUrl).pathname  let filePath = ''  let fileformat = ''  // 对web根路径的访问做单独处理  if (pathname === '/') {    pathname = '/index.html'  }  const ext = pathname.indexOf('.') !== -1 ? pathname.match(/(\.[^.]+)$/)[0] : '.html'  if (ext === '.html') {    filePath = path.join(ROOT, `/views${pathname}`)    fileformat = 'utf-8'  } else {    filePath = path.join(ROOT, pathname)    fileformat = 'binary'  }  try {    const isAccessed = await accessFilePromise(filePath)    let fileData = null    if (!isAccessed) {      const code = STATUS_CODE.ENOENT      // 文件或目录不可访问，直接返回404      ctx.res.writeHead(code, {        'Content-Type': CONTENT_TYPE['.html']      })      fileData = await readFilePromise(path.join(ROOT, `/views/error/${code}.html`), 'utf-8')      ctx.body = fileData    } else {      const isFile = await statFilePromise(filePath)      if (isFile === true) {        fileData = await readFilePromise(filePath, fileformat)      } else {        // 尝试读取该目录下的index.html        fileData = await readFilePromise(`${filePath}/index.html`, 'utf-8')      }            ctx.res.setHeader('Content-Type', CONTENT_TYPE[ext])      if (ext !== '.html') {        ctx.res.setHeader('Content-Length', Buffer.byteLength(fileData))      }        ctx.res.writeHead(STATUS_CODE.SUCCESS)      ctx.body = fileData      if (ext !== '.html') {        ctx.res.write(ctx.body, 'binary')      }    }  } catch (err) {    ctx.res.writeHead(STATUS_CODE[err.code], {      'Content-Type': CONTENT_TYPE[ext]    })  }})app.listen(3000, () => {  console.log('Your application is running at http://localhost:3000')})

file-util.js -- 文件处理工具

const fs = require('fs')const readImagePromise = (filePath) => {  const stream = fs.createReadStream(filePath)  const streamData = [] // 存储文件流  let data = ''  return new Promise((resolve, reject) => {    stream.on('data', (chunk) => {      streamData.push(chunk)    })    stream.on('end', () => {      data = Buffer.concat(streamData)      resolve(data)    })    stream.on('error', (err) => {      console.assert(isAssert, 'ReadStream onerror事件:', err, err && err.message)      reject(err)    })  }).catch(err => {    console.assert(isAssert, 'ReadStream promise链catch 读取文件错误:', err, err && err.message)    throw err  })}const accessFilePromise = (filePath) => {  return new Promise((resolve, reject) => {    fs.access(filePath, fs.R_OK, (err) => {      if (err) {        console.assert(false, 'if中access文件不可访问:', err, err && err.message)        resolve(false)        // reject(err)      }      resolve(true)    })  }).catch(err => {    console.assert(true, 'promise链catch access文件错误:', err, err && err.message)    throw err  })}const statFilePromise = (filePath) => {  return new Promise((resolve, reject) => {    fs.stat(filePath, (err, stats) => {      if (err) {        console.assert(true, 'if中stat文件错误:', err, err && err.message)        reject(err)      }      resolve(stats.isFile())    })  }).catch(err => {    console.assert(true, 'promise链catch stat文件错误:', err, err && err.message)    throw err  })}const readFilePromise = (filePath, format) => {  if (format === 'binary') {    return readImagePromise(filePath)  }  return new Promise((resolve, reject) => {    fs.readFile(filePath, format, (err, data) => {      if (err) {        console.assert(true, 'if中读取文件错误:', err, err && err.message)        reject(err)      }      resolve(data)    })  }).catch(err => {    console.assert(true, 'promise链catch 读取文件错误:', err, err && err.message)    throw err  })}module.exports = {  readImagePromise,  accessFilePromise,  statFilePromise,  readFilePromise}

mime.js -- mime类型映射

module.exports = {  '.css': 'text/css;charset=utf8',  '.js': 'application/javascript;charset=utf8',  '.html': 'text/html;charset=utf8',  '.png': 'image/png',  '.jpg': 'image/jpeg',  '.jpeg': 'image/jpeg',  '.ico': 'image/x-icon'}

status-code.js -- 状态码映射

module.exports = {  SUCCESS: 200,  EACCES: 403,  ENOENT: 404,  EISDIR: 403}

后话

我觉得我写的还是比较啰嗦，没办法，目前的水平只能写到这个程度，不过拿它来跑一个简陋的静态站点还是可以的，这不我都跑了将近半个月了。一开始我傻乎乎的用命令行跑，后来想到应该弄个守护进程，然后百度了下发现有个node进程管理工具：pm2，得了，这下省事了。好吧，先写到这儿。
文章最初发表在我搭建的博客：我用Node.js的Koa框架搭建了一个静态站点，略有改动。