05_frp_web调试

frp web 调试

背景

通过前面几个章节，我们知道 frp 在客户端以及服务器都是有控制台的，如下:

服务器:

客户端:

有 web 代表什么呢，代表后端有接口啊；虽然 fpr 官网里对这里部分只字不提，但是不提不代表我就拿不到。

在 github 上可以看到以下界面：

可以看到这个 web 使用 vue 写的，之后我还看了一下这个还是用 element 的组件写的。

所以呢，这一节的内容就是把 frp 的 web 在自己的电脑上跑起来。

web 源码

git clone https://github.com/fatedier/frp

这里就是 frp 的 web 工程了。

运行 frpc dashboard

frps 是一样的，就不演示了。

下载 frp 并且安装依赖。

# pwd : /home/haorui/Desktop/frp
cd web/frpc/
git checkout v0.38.0

然后编辑以下内容：

然后修改一下 package.json

这个版本完整的配置贴在后面，可以直接替换掉:

{
  "name": "frpc-web",
  "description": "An admin web ui for frp client.",
  "author": "fatedier",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server -d --inline --hot --env.dev",
    "build": "rimraf dist && webpack -p --progress --hide-modules",
    "serve": "vue-cli-service serve"
  },
  "dependencies": {
    "element-ui": "^2.5.3",
    "vue": "^2.5.22",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.2",
    "whatwg-fetch": "^3.0.0"
  },
  "engines": {
    "node": ">=6"
  },
  "devDependencies": {
    "@vue/cli-service": "~4.5.0",
    "autoprefixer": "^9.4.7",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^7.1.5",
    "babel-plugin-component": "^1.1.1",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^2.1.0",
    "eslint": "^5.12.1",
    "eslint-config-enough": "^0.3.4",
    "eslint-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^2.24.1",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "postcss-loader": "^3.0.0",
    "rimraf": "^2.6.3",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^15.6.2",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^2.7.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

# 由于之前 npm 替换过淘宝的镜像源用不了，如果没有替换过应该是可以 npm install 的
cnpm install

然后使用 npm run server 就可以把 web 运行起来了，如下:

上面的修改点主要是:

• 新版本的 vue 不允许 vm 使用 template
• 在 package.json 中添加 vue 的脚手架

一个实例

剩下的慢慢再研究了，只要能 debug ,都是小事情。