最近在编写 JS 逆向 hook 类插件，然后需要获取当前代码执行时所在的位置，方便代码定位，于是就总结下 JavaScript 如何输出函数调用栈。

## 演示代码

```javascript
function main() {
  let a = fun('hello world')
  console.log(a)
}

function fun(a) {
  return a
}

main()
```

## 方法

### console.trace()

使用如下

```javascript {7}
function main() {
  let a = fun('hello world')
  console.log(a)
}

function fun(a) {
  console.trace('fun')
  return a
}

main()
```

输出结果为

```
Trace: fun
    at fun (c:\Users\zeyu\Desktop\demo\main.js:7:11)
    at main (c:\Users\zeyu\Desktop\demo\main.js:2:11)
    at Object.<anonymous> (c:\Users\zeyu\Desktop\demo\main.js:11:1)    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:79:12)
    at node:internal/main/run_main_module:17:47
hello world
```

其中`console.trace()`可以传入参数，最终都将直接输出在 Trace 后面，如这里的 fun，但只能在控制台中输出

不过 IE6 并不支持，不过应该也没人用了吧

### arguments.callee.caller

在**非严格模式**下，可以直接输出`arguments`，便会打印出所调用的参数，以及调用的函数，使用如下

```javascript {7-10}
function main() {
  let a = fun('hello world')
  console.log(a)
}

function fun(a) {
  console.log(fun.caller.toString())
  console.log(arguments)
  console.log(arguments.callee.toString())
  console.log(arguments.callee.caller.toString())

  return a
}

main()
```

输出结果为

```
function main() {
  let a = fun('hello world')
  console.log(a)
}
[Arguments] { '0': 'hello world' }
function fun(a) {
  console.log(fun.caller.toString())
  console.log(arguments)
  console.log(arguments.callee.toString())
  console.log(arguments.callee.caller.toString())

  return a
}
function main() {
  let a = fun('hello world')
  console.log(a)
}
hello world
```

成功的将我们当前运行的函数给打印了出来（这里使用 toString 方便将函数打印出来），而上级的函数的话通过`fun.caller`和`arguments.callee.caller`都能得到。

![image-20211015094231693](https://img.kuizuo.cn/image-20211015094231693.png)

`caller`便是调用的上层函数，也就是这里的 main 函数，不难发现每个 caller 对象下都有一个 caller 属性，也就是`caller`的上层函数，由于我这里是 node 环境，所以这里的 caller 的 caller 我也不知道是个什么玩意。。。反正这不是所要关注的重点，重点是**`fun.caller`和``arguments.callee.caller`便可以打印出上层函数**，直到 caller 为空

另外圈的`[[FunctionLocation]]`便是函数所在位置，不过可惜是，这个并不是 caller 的属性，仅供 js 引擎使用的，所以无法输出。

总结下来：

**fun.caller == arguments.callee.caller 代表 fun 的执行环境 (上层函数)**

**arguments.callee 代表的是正在执行的 fun**

**前提: 非严格模式下**

### new Error().stack

众所周知，程序一旦出错 W，便会直接停止运行，同时输出报错信息，而这里的报错信息就包括调用的函数以及具体位置，相对于上面的方法而言，这个能直接在执行环境中输出，而不是单纯的在控制台显示。

同样还是上面的代码

```javascript {7,11-14}
function main() {
  let a = fun('hello world')
  console.log(a)
}

function fun(a) {
  printStack()
  return a
}

function printStack() {
  let stack = new Error().stack
  console.log(stack)
}

main()
```

输出的结果为一串字符串，如下

```
Error
    at printStack (c:\Users\zeyu\Desktop\demo\main.js:12:16)
    at fun (c:\Users\zeyu\Desktop\demo\main.js:7:3)
    at main (c:\Users\zeyu\Desktop\demo\main.js:2:11)
    at Object.<anonymous> (c:\Users\zeyu\Desktop\demo\main.js:16:1)    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:79:12)
    at node:internal/main/run_main_module:17:47
hello world
```

由于结果是个字符串，所以通过 split 分割一下，便能得到调用的函数（fun）以及调用位置（c:\Users\zeyu\Desktop\demo\main.js:7:3），稍加处理一下，如下

```javascript {7}
function main() {
  let a = fun('hello world')
  console.log(a)
}

function fun(a) {
  printStack()
  return a
}

main()

function printStack() {
  const callstack = new Error().stack.split('\n')
  callstack.forEach((s) => {
    let matchArray = s.match(/at (.+?) $(.+?)$/)
    if (!matchArray) return

    let name = matchArray[1]
    let location = matchArray[2]
    console.log(name, location)
  })
}
```

输出结果如下（由于是 Node 环境，所以会输出一些有关模块 modules 的东西）

```
printStack c:\Users\zeyu\Desktop\demo\main.js:14:21
fun c:\Users\zeyu\Desktop\demo\main.js:7:3
main c:\Users\zeyu\Desktop\demo\main.js:2:11
Object.<anonymous> c:\Users\zeyu\Desktop\demo\main.js:11:1
Module._compile node:internal/modules/cjs/loader:1095:14
Object.Module._extensions..js node:internal/modules/cjs/loader:1124:10
Module.load node:internal/modules/cjs/loader:975:32
Function.Module._load node:internal/modules/cjs/loader:816:12
Function.executeUserEntryPoint [as runMain] node:internal/modules/run_main:79:12
hello world
```

### Error.captureStackTrace

Error 中有一个静态方法，同样用于获取调用栈。演示代码如下

```js
function main() {
  let a = fun('hello world')
  console.log(a)
}

function fun(a) {
  let stack = stackTrace()
  console.log(stack)

  return a
}

function stackTrace() {
  const obj = {}
  Error.captureStackTrace(obj, stackTrace)
  return obj.stack
}

main()
```

效果和`new Error().stack`一样，只不过少了一行~~at printStack (c:\Users\zeyu\Desktop\demo\main.js:12:16)~~ 的输出。

不过一般用法如下

```js
function MyError() {
  Error.captureStackTrace(this, MyError)
}

// 如果没有向captureStackTrace传递MyError参数，则在访问.stack属性时，MyError及其内部信息将会出现在堆栈信息中。当传递MyError参数时，这些信息会被忽略。
new MyError().stack
```

其中`Error.captureStackTrace()`源自[V8 引擎的 Stack Trace API](https://link.segmentfault.com/?enc=u3YSqa2uqpuK4qOK1mcE%2BQ%3D%3D.S7z7nzmOapoEFtq3WEZcXOIYfU79dXMyMCaHOU3pUVILksNiqpAhLEXacnQs0fHN)，在自定义 Error 类的内部经常会使用该函数，用以在 error 对象上添加合理的 stack 属性。上文中的 MyError 类即是一个最简单的例子。

```js
function MyError() {
  Error.captureStackTrace(this, MyError)
}

// 如果没有向captureStackTrace传递MyError参数，则在访问.stack属性时，MyError及其内部信息将会出现在堆栈信息中。当传递MyError参数时，这些信息会被忽略。
new MyError().stack
```

[关于 Error.captureStackTrace - SegmentFault 思否](https://segmentfault.com/a/1190000007076507)

## 总结

如果是作为调试阶段，想输出调用栈的话，那么`console.trace()`肯定是个最好的选择，不过只能在控制台显示，无法在运行环境中使用

而`arguments.callee.caller`使用的前提是非严格模式下，所以要使用的话，则需要删除`"use strict";`代码， 但能直接打印出完整的函数，以及调用所传入的参数。

`new Error().stack` 相当于主动报错，由于报错会自动打印报错所在的调用信息，所以能精确的定位到代码的函数名和代码行与列，对于后续要定位代码位置而言优先选择。

JS输出函数调用栈

早闻 RPC（Remote Procedure Call）远程过程调用，这一词了，应该是在安卓逆向的时候听闻的，当时吹嘘的意思是这样的，通过另一个远端服务器来调用安卓代码中的函数，并将执行后的结果返回。比如有一个加密算法，如果要实现脱机（脱离当前环境）运行的话，就需要扣除相对应的代码，补齐对应的环境（模块，上下文，语言），然而要在补齐该加密算法的环境可不好实现，而通过 RPC 则可以免除扣代码，通过数据通信来达到远程调用的目的，听起来是挺牛逼的，实际上也确实挺骚的。这里我将以浏览器与本地搭建一个 websocket 来实现调用浏览器内的函数。



## 算法例子

这里我所采用的是百度登录的密码加密算法，具体逆向实现就不细写了，借用视频教程[志远 2021 全新 js 逆向 RPC](https://www.bilibili.com/video/BV1Kh411r7uR?p=36)

通过关键词`password:` 便可找到对应的加密地点，找到加密调用的函数所出现的位置（loginv5.js 8944 行），发现通过调用`e.RSA.encrypt(s)`（其中 s 为明文 `a123456`），便可得到加密后的结果。

![image-20211008042148653](https://img.kuizuo.cn/image-20211008042148653.png)

![image-20211008041300534](https://img.kuizuo.cn/image-20211008041300534.png)

```
e.RSA.encrypt(s)
'Zhge9q9jkiMA0UTfHxwNeyafnuUG8rcAh/gKfQpZiOQq8EYI/tJO83lKr52c4Im3cew3wVcINf2jEGEqH5EimnMI3g6eOjcdqduGyqynA4JjMJ0wltGdL8VUTTJsknsHUQlJXHOm/7zqx4NaBvOzhWzdDBk5cAOJ2DXgPaqoygg='
```

按照往常的做法，需要将`e.RSA.encrypt(s)`所用的代码处单独抠出来，放在 V8 引擎上测试或使用现有的加密库 如 CryptoJS，找到对应的密钥来进行加密。不过这里使用 RPC 来实现该算法的调用。

## 实现

目前调用的环境有了（浏览器环境），只要我们这个浏览器不停止（使用无头浏览器运行），控制台便能一直输出我们想要的加密后结果。所以要实现的目的很简单，就是其他窗口（指其他语言所实现的程序），能远程调用`e.RSA.encrypt(s)`并将结果输出到其他窗口。

那么就需要建立通信协议了，这里我所采用的是浏览器自带的 Websocket 客户端与 Nodejs 搭建的 Websocket 服务端来进行通信，众所周知 HTTP 请求是无法双向传输的。所以使用 websocket 这样服务端就可以主动向浏览器发送请求，同时 websocket 在当前这个环境下好实现。

### Nodejs 实现 Websocket 服务端

#### 安装 ws 模块

```bash
npm install ws -S
npm install @types/ws -D
```

这里之所以选 ws，是因为 ws 对于 Websocket 协议而已，实现方便，且速度最快，并且浏览器可以通过`let ws = new Websocket()`来创建客户端直接连接，而使用 socket.io 的话，浏览器则需要载入 socket.io 客户端文件，繁琐。

#### 代码例子

```javascript title="server.js"
import WebSocket, { WebSocketServer } from 'ws'

let ws = new WebSocketServer({
  port: 8080,
})

ws.on('connection', socket => {
  function message(msg) {
    console.log('接受到的msg: ' + msg)
    socket.send('我接受到你的数据: ' + msg)
  }

  socket.on('message', message)
})
```

使用 WebSocket 在线测试网站[websocket 在线测试 (websocket-test.com)](http://www.websocket-test.com/)

测试结果如下

![image-20211008043925753](https://img.kuizuo.cn/image-20211008043925753.png)

上面代码写的很简陋，尤其是数据交互的地方，这里可以使用 json 来改进一下。像这样，至于为啥用 try 是防止 json 数据不对导致解析错误（具体代码就不解读了）

```javascript title="server.js"
import WebSocket, { WebSocketServer } from 'ws'

let ws = new WebSocketServer({ port: 8080 })

ws.on('connection', socket => {
  console.log('有人连接了')
  function message(data) {
    try {
      let json = JSON.parse(data) // data: {"type":"callbackPasswordEnc","value":"a123456"}
      let { type, value } = json
      switch (type) {
        case 'callbackPasswordEnc':
          // doSomething()
          console.log('得到的加密密文为:' + value)
          break
      }
    } catch (error) {
      console.error(error)
    }
  }

  socket.on('message', message)

  // 浏览器通信1秒后向浏览器调用加密算法
  setTimeout(() => {
    let jsonStr = JSON.stringify({
      type: 'getPasswordEnc',
      value: 'a123456',
    })
    socket.send(jsonStr)
  }, 1000)
})
```

### 浏览器实现 websocket

既然要实现我们的代码，那么就需要将我们的代码注入到原来的代码上，这里我使用的是 Chrome 的开发者工具中的覆盖功能，选择一个本地文件夹，并允许权限。

![image-20211008054918531](https://img.kuizuo.cn/image-20211008054918531.png)

选择要替换代码的文件，选择保存以备替换（前提得开启覆盖）

![image-20211008055032125](https://img.kuizuo.cn/image-20211008055032125.png)

接着在覆盖中找到文件，找到加密的代码块，添加如下代码

```javascript title="browser.js"
!(function () {
  let url = 'ws://127.0.0.1:8080'
  let ws = new WebSocket(url)

  // 浏览器连接后告诉服务端是浏览器
  ws.onopen = function (event) {
    ws.send(JSON.stringify({ type: 'isBrowser', value: true }))
  }

  ws.onmessage = function (event) {
    let json = JSON.parse(event.data)
    let { type, value } = json
    switch (type) {
      case 'getPasswordEnc':
        let passwordEnc = e.RSA.encrypt(value)
        let jsonStr = JSON.stringify({
          type: 'callbackPasswordEnc',
          value: passwordEnc,
        })
        console.log(jsonStr)
        ws.send(jsonStr)
        break
    }
  }
})()
```

![image-20211008201809446](https://img.kuizuo.cn/image-20211008201809446.png)

然后就是最关键的地方了，触发加密函数，并将结果返回。触发加密函数只需要向浏览器发送指定数据`{"type":"getPasswordEnc","value":"a123456"}`，浏览器接受到对应的类型与数据，便调用相应的函数，并将结果`{"type":"callbackPasswordEnc","value":"FM6SK3XiL5X0RF9NZi7qhIsu7Pd46mfKnn6YkWUNSGrJO+XXhiXyoG8huaqQW4BnmYuo0JVVQj28C+BK/r6NTNbLcV4gMSREB2hYU/oIYedCJsZ9sbZQ89p1aI9kVcDeRlXBhjNUxkcS9Rh+vKzyNApwpbPcAuGTCSZhKst8vVo="}`返回即可。

服务端的效果如下图

![image-20211008204247104](https://img.kuizuo.cn/image-20211008204247104.png)

## 优化执行流程

实现是实现了，但是代码貌似很不优雅，甚至有点别扭。按理来说因为是浏览器作为 websocket 服务端，我们作为客户端，客户端向服务器获取数据才合理，但在这里浏览器当不了 websocket 服务端这个角色，所以只能使用如此别扭的方式来调用。像上面例子的话，如果我的程序要实现一个某度登录的话，那么我这个程序就需要搭建一个 ws 服务器来进行两者的通信，有没有好的办法又不太依赖于 ws 服务端，就像 http 那样，程序只需要发送一个请求，给定类型和数值进行加密处理后返回即可。于是我处理的思路是这样的。

## 思路

我的做法是将 websocket 服务端当个中转站，而浏览器的 websocket 客户端作为一个加密算法的服务，再添加一个登录算法实现的客户端简称为用户调用的，所以现在一共有三份代码（websocket 服务端，浏览器端，用户调用端）。这里我还是以 nodejs 为例。

### 浏览器端

浏览器 websocket 客户端的代码，在初次连接的时候，告诉 websocket 服务端是不是浏览器。并将于浏览器连接的 socket 句柄存入全局对象，以便用户获取加密参数的时候向浏览器调用。

```javascript title="browser.js"
ws.onopen = function (event) {
  ws.send(JSON.stringify({ type: 'isBrowser', value: true }))
}
```

### 用户调用端

```javascript title="client.js"
import WebSocket from 'ws'

async function getPasswordEnc(password) {
  return new Promise((resolve, reject) => {
    const ws = new WebSocket('ws://127.0.0.1:8080')

    ws.on('open', () => {
      let jsonStr = JSON.stringify({
        type: 'getPasswordEnc',
        value: password,
      })
      ws.send(jsonStr)
    })

    ws.on('message', message => {
      let json = JSON.parse(message)
      let { type, value } = json
      switch (type) {
        case 'callbackPasswordEnc':
          ws.close()
          resolve(value)
          break
      }
    })
  })
}

async function run() {
  let passwordEnc = await getPasswordEnc('a123456')
  console.log(passwordEnc)
}

run()
```

这里对代码进行解读一下，我自行封装了一个函数，其中函数返回的是一个 Promise 对象，值则是对应的加密后的密文。如果我这边不采用 promise 来编写的话，那么获取到的数据将十分不好返回给我们的主线程。这里对于 js 的 Promise 使用需要花费点时间去理解。总而言之，通过 promise，以及 async await 语法糖，能很轻松的等待 websocket 连接与接收数据。但还是用 websocket 协议

### websocket 服务端

同时 websocket 服务端肯定要新增一个类型用于判断是登录算法实现的客户端。同时又新的用户要调用，所以这里使用了 uuid 这个模块来生成唯一的用户 id，同时还定义一个变量 clients 记录所连接过的用户（包括浏览器），完整代码如下

```javascript title="server.js"
import WebSocket, { WebSocketServer } from 'ws'
import { v4 as uuidv4 } from 'uuid'

let ws = new WebSocketServer({ port: 8080 })

let browserWebsocket = null
let clients = []

ws.on('connection', socket => {
  let client_id = uuidv4()
  clients.push({
    id: client_id,
    socket: socket,
  })

  socket.on('close', () => {
    for (let i = 0; i < clients.length; i++) {
      if (clients[i].id == client_id) {
        clients.splice(i, 1)
        break
      }
    }
  })

  socket.on('message', message => {
    try {
      let json = JSON.parse(message)
      let { id, type, value } = json
      switch (type) {
        case 'isBrowser':
          if (value) {
            browserWebsocket = socket
          }
          console.log('浏览器已初始化')
          break

        // 发送给浏览器 让浏览器来调用并返回
        case 'callbackPasswordEnc':
          // 根据id找到调用用户的socket,并向该用户发送加密后的密文
          let temp_socket = clients.find(c => c.id == id).socket

          temp_socket.send(message)
          break
        // 用户发送过来要加密的明文
        case 'getPasswordEnc':
          let jsonStr = JSON.stringify({
            id: client_id,
            type: type,
            value: value,
          })

          // 这里一定要是浏览器的websocket句柄发送，才能调用
          browserWebsocket.send(jsonStr)
          break
      }
    } catch (error) {
      console.log(error.message)
    }
  })
})
```

最终演示效果如下视频（浏览器代码是提前注入进去的）

<video width="800px" height="450px" controls="controls" >
<source id="mp4" src="https://img.kuizuo.cn/rpc.mp4" type="video/mp4" />
</video >

其实还是一些是要完善的，这里的 Websocket 只是实现了连接，还有心跳包异常断开，浏览器异常关闭导致 websocket 断开无法调用函数等等，以及浏览器的代码还需要手动注入很不优化，后续如果使用 Chrome 插件开发一个实现注入 js 代码的功能也许会好一些。（正准备编写 Chrome 插件）

## HTTP 协议调用实现

但是，以上都是基于 WebSocket 协议，就连用户端调用也是，然而用户调用没必要保持长连接且不利于调用（相对一些语言而言），有没有能直接使用 http 协议，通过 POST 请求来实现获取参数，这才是我所要实现的。

其实要实现也很简单，我只要把用户调用的 `getPasswordEnc` 这个函数 弄到 node 创建的一个 http 服务端就行了，我这里的做法也是如此。像下面这样

```javascript title="server_http.js"
async function getPasswordEnc(password) {
  return new Promise((resolve, reject) => {
    const ws = new WebSocket('ws://127.0.0.1:8080')

    ws.on('open', () => {
      let jsonStr = JSON.stringify({
        type: 'getPasswordEnc',
        value: password,
      })
      ws.send(jsonStr)
    })

    ws.on('message', message => {
      let json = JSON.parse(message)
      let { type, value } = json
      switch (type) {
        case 'callbackPasswordEnc':
          ws.close()
          resolve(value)
          break
      }
    })
  })
}

// 创建http服务
const app = http.createServer(async (request, response) => {
  let { pathname, query } = url.parse(request.url, true)

  if (pathname == '/getPasswordEnc') {
    let passwordEnc = await getPasswordEnc(query.password)
    response.end(passwordEnc)
  }
})

app.listen(8000, () => {
  console.log(`服务已运行 http://127.0.0.1:8000/`)
})
```

发送 GET 请求 URL 为 [http://127.0.0.1:8000/getPasswordEnc?password=a123456](http://127.0.0.1:8000/getPasswordEnc?password=a123456) 实现效果如图

![image-20211009040704534](https://img.kuizuo.cn/image-20211009040704534.png)

对于用户调用来说相对友好了不少（其实是很好），不用在创建 websocket 客户端，只需要发送 HTTP 请求（GET 或 POST），不过我这边使用的是 Node 自带的 http 模块来搭建的一个 http 服务器，实际使用中将会采用 express 来编写路由提高开发效率和代码可读性，这里只是作为演示。

至于说我为什么要在 http 内在新建一个 ws 客户端，主要原因还是 websocket 服务端向浏览器发送调用的算法，但只能在 websocket 服务端中的通过 onmessage 接受，无法在 http 服务端接受到，就别说向用户端返回了。这里其实只是不让用户来进行连接 websocket，而是我们本地（服务器）在接受到 getPasswordEnc 请求，复现了一遍上面用户连接 websocket 的例子，并将其转为 http 请求返回给用户而已。

**其实也就是多了一个调用的 HTTP 服务器，而这里将 http 服务器与 websocket 服务器写到一起而已**

## 代码地址

https://github.com/kuizuo/rpc-browser.git

运行方式请查看 README.md

RPC远程调用浏览器函数

### ISSUE_TEMPLATE

**issues 默认模版**

[Configuring issue templates for your repository - GitHub Docs](https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository)

### CODEOWNERS

**仓库代码拥有者。用于合并请求批准**

```
# https://help.github.com/articles/about-codeowners/

* @kuizuo
```

### FUNDING.yml

**配置赞助者按钮**

[在仓库中显示赞助者按钮 - GitHub Docs](https://docs.github.com/cn/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository#about-funding-files)

### CONTRIBUTING.md

**贡献指南**

.github 其他文件

### Github Dependabot

介绍：[About Dependabot security updates - GitHub Docs](https://docs.github.com/cn/code-security/dependabot/dependabot-security-updates/about-dependabot-security-updates)

简单说就是一个能够自动更新项目依赖，确保仓库代码依赖的包和应用程序一直处于最新版本的机器人。

将 `dependabot.yml` 配置文件放入仓库的 `.github` 目录中即可开启。当然也可以到 `Insights` => `Dependency graph` => `Dependabot` 中开启。如下图

![image-20221001171946879](https://img.kuizuo.cn/image-20221001171946879.png)

然后创建你的配置文件，默认内容如下

![image-20221001172149673](https://img.kuizuo.cn/image-20221001172149673.png)

其中要修改 package-ecosystem 配置，也就是包管理器，比如node就用npm，python就用pip。可以在 [About Dependabot version updates - GitHub Docs](https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/about-dependabot-version-updates#supported-repositories-and-ecosystems) 中查看。

然后配置完毕后，根据时间周期，就会自动检测依赖更新，并创建一个pull request 请求，仓库拥有者根据实际需要合并即可。

### [Stale](https://github.com/marketplace/stale)

可在一段时间不活动后关闭废弃的问题。即**关闭长时间未回复的issues**。

### [Imgbot](https://github.com/marketplace/imgbot)

Imgbot是一个友好的机器人，可以优化您的图像并节省您的时间。优化的图像意味着在不牺牲质量的情况下减小文件大小。

### [giscus](https://github.com/marketplace/giscus)

由 GitHub 讨论提供支持的评论系统。让访问者通过GitHub在您的网站上发表评论和反应！

### [WakaTime](https://github.com/marketplace/wakatime)

从编程活动中自动生成的生产力指标、见解和时间跟踪。

### [wxwork](https://github.com/marketplace/wxwork-github-webhook)

Github 企业微信群机器人，无需配置轻松集成 Github 与 企业微信。

github apps示例

## 事情背景

用户花了几百块购买了一份 ThinkPHP 一个后台管理的网站源码，要求更换下部分失效接口，或是重写一个类似这样的网站。我想既然都有源码了，我改改不就完事了，这不比重写一个来的省事。虽说我不是主学 PHP 的，但至少我学过一丢丢的 PHP 语法，接触过 ThinkPHP 项目。不过层面都是局限在本地，部署到生产环境与本地还是有比较大的差别的，于是便有了这篇文章来记录一下自己部署 ThinkPHP 所遇到的一些坑。

## Windows 部署

也可理解为本地部署，本地部署就相对比较简单的了。不过需要一个工具，PHPStudy，来帮助我们配置本地的环境（Apache、Nginx、PHP、Mysql）

[小皮面板(phpstudy) - 让天下没有难配的服务器环境！ (xp.cn)](https://www.xp.cn/)

下载安装打开界面，选择网站，创建网站

![image-20210925143601530](https://img.kuizuo.cn/image-20210925143601530.png)

由于是本机，所以域名就填写 localhost 或 127.0.0.1，端口的话这边所填写的是 4200，别和其他端口冲突即可。

由于 ThinkPHP 的根目录要选择的是根目录下的 public 目录，不然找不到 index.php 这个文件，所以这里根目录自己指定一下源码的位置，点击确认即可。

### 初次启动 Not Found

这时候访问 http://localhost:4200 提示如下

![image-20210925143752775](https://img.kuizuo.cn/image-20210925143752775.png)

本着不会就百度的原则，很快就找到了解决办法

[ThinkPHP 报错 The requested URL /index/index/xxx.html was not found on this server](https://blog.csdn.net/qq_42940241/article/details/112461625)

在入口文件夹 public 下查看.htaccess 是否存在。不存在则新建，存在的话，那内容替换为下面这串代码 就可以解决 Not Fund 问题

```xml
#<IfModule mod_rewrite.c>
#  Options +FollowSymlinks -Multiviews
#  RewriteEngine On
#
#  RewriteCond %{REQUEST_FILENAME} !-d
#  RewriteCond %{REQUEST_FILENAME} !-f
#  RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]
#</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php?/$1 [QSA,PT,L]
</IfModule>
```

### 页面报错 开启 Debug

上面配置完毕后，再次打开出现如下提示。

![image-20210925144143248](https://img.kuizuo.cn/image-20210925144143248.png)

遇到错误是很正常的，现在要做的就是输出报错信息，而不是简短的文字。到根目录下 config/app.php 中，将调试更改为 true（切记，生产环境中一定要更改为 false，不然用户就能查看报错详情以及对应代码）

![image-20210925144424361](https://img.kuizuo.cn/image-20210925144424361.png)

### 配置数据库

再次访问页面提示

**![image-20210925144620953](https://img.kuizuo.cn/image-20210925144620953.png)**

报错信息倒是很全，不过要关注的是报错行和提示，大致意思就是没有定义数据库用户名 ml 以及密码，毕竟数据库啥的都好像没配置，要是能启动起来那估计就真是一个 bug 了，那就先找到配置文件，看看原本的账号密码是多少，数据库配置文件位置`config/database.php`

![image-20210925145740851](https://img.kuizuo.cn/image-20210925145740851.png)

不过 PHPstudy 用户名和密码长度都要在 6 位以上（Linux 倒是不用），所以勉为其难，把用户名和密码都改成 ml1234，接着 Mysql 导入源码给定的数据库文件(sql 文件)，什么，你说源码没有给数据库文件，那我建议直接删源码，并且接下来的内容也可以不用看了。

数据库导入完毕后，再次访问便能看到正常的首页了，就此就算部署完毕了，这里就不放首页图了。

## Linux 部署

Linux 部署和 Windows 部署是有一丢丢差别的，这里我也列举一下，环境是 CentOS 7.6，安装了宝塔面板

在宝塔面板出网站，添加网站，如同 PHPstudy，配置大致相同。

![image-20210926050508693](https://img.kuizuo.cn/image-20210926050508693.png)

### 关闭防跨站攻击

情况 1，如图

![image-20210925155027023](https://img.kuizuo.cn/image-20210925155027023.png)

解决办法：点击网站，设置，将防跨站攻击关闭并保持，如下

![image-20210925155445084](https://img.kuizuo.cn/image-20210925155445084.png)

### 设置伪静态

接着再次访问网站会出现 404 页面不存在报错，在设置中找到伪静态，添加一个 thinkphp 的配置，如下

![image-20210925155705573](https://img.kuizuo.cn/image-20210925155705573.png)

再次访问后，出现的就是数据库配置的问题，配置一下数据库，导入数据，然后再次访问便可。

:::warning 再次提醒，生产环境下请将`app_debug`设置为 false，不然非法用户可以通过人为试错，查询对应报错代码。

:::