乐趣区

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

jiezi

缘起

我用 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）和对应的响应体。
当然，还有很多细节需要考虑：比如服务器的页面存放目录、以及目录是否可读等等情况。

代码目录

src
|- app-koa.js // 核心文件，处理请求及返回响应
|- file-util.js // 读取文件的方法集合
|- mime.js // mime 类型映射
|- status-code.js // 状态码映射
|- views/ // 存放 html 文件
|- static/ // 存放 js、css、图片等静态资源

代码

下面我先把我写的代码贴在下面：
主文件 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 = __dirname

const 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 框架搭建了一个静态站点，略有改动。

退出移动版