使用 Koa 搭建前端服务

2023-10-05 18:34:22

环境准备

node 环境

Koa 依赖 node v7.6.0 或 ES2015及更高版本和 async 方法支持，我本地的node环境为 v14.4.0

快速开始

使用koa启动本地静态资源主要需要解决两个问题，一个是使用history路由时，刷新页面使之能正常进入页面，另一个就是请求能正常代理到目标服务，这里如果为了方便可以直接使用 koa 脚手架，也可以自己手动搭建。下面分别介绍一下这两种方法的使用。

从零搭建

① 初始化 package.json

$ npm init

输入该命令后，一路回车，会生成一个package.json文件

② 安装 koa
这里可以在当前目录安装，也可进行以全局安装

// 在当前目录安装
$ npm install koa -S

// 或全局安装
$ npm install koa-generator -g

③ 新建app.js

const Koa = require('koa')   
const app = new Koa()   

app.use(async ctx => {
  ctx.body = 'Hello World';
});
app.listen(9999, () => {
  console.log('服务已启动，请访问：http://127.0.0.1:9999 或 localhost:9999');
})

//打开终端
$ node app.js

终端如下，记住之后每次添加依赖后都需要重启服务：

此时在浏览器中访问该地址后，可看到打印出的 “Hello World” 文本，这时一个简单的服务就搭建起来了~

此时服务是启动了，但是浏览器怎么能打印某个文件的内容呢? 首先新建 dist 文件夹，然后建几个文件index.html、todo.html、404.html、img.png


//app.js 
const Koa = require('koa')   
const app = new Koa()   

//要涉及读文件的功能，所以引入node 的 fs 文件系统
const fs = require('fs')

/**
 * 用Promise封装异步读取文件方法
 * @param  {string} page html文件名称
 * @return {promise}      
 */
function render( page ) {
  return new Promise(( resolve, reject ) => {
    let distUrl = `./dist/${page}`
    fs.readFile(distUrl, "binary", ( err, data ) => {
      if ( err ) {
        reject( err )
      } else {
        resolve( data )
      }
    })
  })
}

/**
 * 根据URL获取HTML内容
 * @param  {string} url koa2上下文的url，ctx.url
 * @return {string}     获取HTML文件内容
 */
async function route( url ) {
  let dist = '404.html'
  switch ( url ) {
    case '/': 
    case '/index':
      dist = 'index.html'
      break
    case '/todo':
      dist = 'todo.html'
      break
    case '/404':
      dist = '404.html'
      break
    default:
      break
  }
  let html = await render( dist )
  return html
}

app.use(async ctx => {
  let url = ctx.request.url
  let html = await route( url )
  ctx.body = html
});
app.listen(9999, () => {
  console.log('服务已启动，请访问：http://127.0.0.1:9999 或 localhost:9999');
})

// dist/index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>index</title>
</head>
<body>
   <h1>koa2 demo index page</h1>
    <p>this is a index page</p>
    <ul>
      <li><a href="/">/</a></li>
      <li><a href="/index">/index</a></li>
      <li><a href="/todo">/todo</a></li>
      <li><a href="/404">/404</a></li>
    </ul>
    <img src="https://i.loli.net/2021/01/04/UMwA2d1QtKu4cWl.png" alt="" width="100" height="100">
    <img src="./img.png" alt="" width="100" height="100">
</body>
</html>

此时访问 http://127.0.0.1:9999，http://127.0.0.1:9999/index，http://127.0.0.1:9999/todo 都可以进入对应页面
效果：

现在可以访问文件内容了，但是本地静态资源却不能访问，这时 koa-static 就可以解决这个问题

$ npm install koa-static -S

//改装 app.js ，将所有文件作为静态资源访问且指向入口 ./dist/index.html上 
const Koa = require('koa')    
const app = new Koa()

app.use(require("koa-static")(__dirname + "/dist"));

app.listen(9999, () => {
  console.log('服务已启动，请访问：http://127.0.0.1:9999 或 localhost:9999');
})

重启后文件访问到啦，此时所有文件都作为静态资源访问，所以进入子页面时需要带全文件名称，否则是访问不到的呢~

有没有发现，如果依靠 ctx.request.url 手动处理路由，将会写很多处理代码，这时候就需要对应的路由的中间件对路由进行控制，这里介绍一个比较好用的路由中间件 koa-router （由于目标项目中使用的是单页面应用，所以这里暂不多介绍）

$ npm install koa-router@7 -S

此时可以上手我们的项目了，把已写好的项目打包完成并替换 dist 文件
可以看到已经访问到项目主页了~

此时发现一个问题，当再次刷新的时候，竟然404！这是因为vue-router使用history模式返回index.html，仅能通过入口文件去加载其子路由。

而koa2的一个中间件，专治SPA应用程序的history模式路由问题，那就是 koa2-connect-history-api-fallback

$ npm install koa2-connect-history-api-fallback -S

//app.js
const Koa = require('koa')    
const { historyApiFallback } = require('koa2-connect-history-api-fallback');

const app = new Koa()

app.use(historyApiFallback());
app.use(require("koa-static")(__dirname + "/dist"));

app.listen(9999, () => {
  console.log('服务已启动，请访问：http://127.0.0.1:9999 或 localhost:9999');
})

继续测试，发现不管什么路由都可以正常访问到啦~

这时候又遇到问题了，接口请求全部 404，那是因为请求走的都是http://127.0.0.1:9999，那404是必然的啦，那如何把请求代理转发到其他服务器呢？ http-proxy-middleware 可以解决这个问题。

$ npm install http-proxy-middleware -S
$ npm i koa2-connect -S

 //app.js
const Koa = require('koa')   
const Router = require('koa-router')  
const { historyApiFallback } = require('koa2-connect-history-api-fallback');
const { createProxyMiddleware } = require('http-proxy-middleware')
const c2k = require('koa2-connect')

const app = new Koa()

app.use(historyApiFallback());
app.use(require("koa-static")(__dirname + "/dist"));

var router = new Router()
var target = 'https://222.222.222.222:8080' // 要代理的目标地址，vue项目写 vue.config.js 里的 target 地址
router.get(
  '*',
  c2k(
    createProxyMiddleware({
      target,
      changeOrigin: true,
      ws: true
    })
  )
)
app.use(router.routes())

app.listen(9999, () => {
  console.log('服务已启动，请访问：http://127.0.0.1:9999 或 localhost:9999');
})

这时发现请求已经代理成功了，GET 请求的 HTTP 码返回了200，但是 POST、PUT 等其它请求方式依旧 404，那是因为咱仅给GET方法添加了target 地址，再将各种方式都补齐：

const Koa = require('koa') 
const Router = require('koa-router') 
const { createProxyMiddleware } = require('http-proxy-middleware')
const { historyApiFallback } = require('koa2-connect-history-api-fallback');
const c2k = require('koa2-connect')

const app = new Koa() 

app.use(historyApiFallback());
app.use(require("koa-static")(__dirname + "/dist"));

var router = new Router()
var target = 'https://abc.com' // 修改成你要代理的目标地址，vue项目写 vue.config.js 里的 target 地址

//项目一共使用5种请求方式： get post put patch delete  /* 'head','connect','options','trace','patch' */
let method = ['get', 'post', 'put', 'patch','delete']
method.forEach(item => {
  router[item](
    '*',
    c2k(
      createProxyMiddleware({
        target,
        changeOrigin: true,
        ws: true
      })
    )
  )
})

app.use(router.routes()) 
app.listen(9999)

使用 Koa 搭建前端服务大功告成！如果要用 Koa 脚手架搭建的话更加简单，执行以下命令、再安装上述依赖即可。

$ koa koaServer

总结一下，项目依赖一共包括以下几个：

"dependencies": {
    "http-proxy-middleware": "^1.0.6",
    "koa": "^2.13.0",
    "koa-router": "^7.4.0",
    "koa-static": "^5.0.0",
    "koa2-connect": "^1.0.2",
    "koa2-connect-history-api-fallback": "^0.1.3"
  }

tips:

如果习惯使用 npm run serve 或者 yarn serve 启动项目的话，可以为 package.json 文件的 scripts 属性添加一条："serve":"node app.js" 即可
```
"scripts": {
    "serve":"node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
},
```
koa2与koa1的最大区别是koa2实现异步是通过async/awaite，koa1实现异步是通过generator/yield，而express实现异步是通过回调函数的方式。

码农公寓

环境准备

快速开始

从零搭建

相关文章