search

YMFE / yapi

YApi 是一个可本地部署的、打通前后端及QA的、可视化的接口管理平台
http://yapi.smart-xwork.cn/
Apache License 2.0
27.32k stars 4.78k forks source link

配置访问 二级域 #1431

Open 4593645 opened 4 years ago

4593645 commented 4 years ago

版本号

~ 1.8.4

什么问题

~ 问题1.想配置访问 二级域 。如：http://ip/yapi 。

如何复现此问题

~

什么浏览器

~

什么系统（Linux, Windows, macOS）

JohnGao818 commented 4 years ago

这不是二级域，是路径前缀，这个实现起来暂时有点难，要改源码。

tangcent commented 4 years ago

考虑下nginx即可， https://www.baidu.com/s?wd=nginx%E4%BA%8C%E7%BA%A7%E5%9F%9F%E5%90%8D%E8%BD%AC%E5%8F%91

Qixingchen commented 4 years ago

在服务器转发上改 nginx caddy 等都支持

JohnGao818 commented 4 years ago

楼主问的，http://ip/yapi，访问的方式是配置统一的路径缀，这个可以通过nginx转发实现，但是yapi比较坑的一点是它没有一个统一的路径前缀。http://yapi.domain.com，这种访问方式才是子域名转发，而且是三级域名转发不是二级域名。

tangcent commented 4 years ago

楼主问的，http://ip/yapi，访问的方式是配置统一的路径缀，这个可以通过nginx转发实现，但是yapi比较坑的一点是它没有一个统一的路径前缀。http://yapi.domain.com，这种访问方式才是子域名转发，而且是三级域名转发不是二级域名。

这个需求理论上讲跟yapi本身没关系. 不过这里确实不是二级域名，只是nginx里配置一条location 我猜,大概是这样子

location ^~ /yapi {
      proxy_pass http://127.0.0.1:3000;
}
JohnGao818 commented 4 years ago

@tangcent 我也是这样配的，然后发现，静态文件和api接口的路径都不统一， image image image 所以要把/prd，/api，/icontfont等所有你还有不知道的路径前缀都要配上，要不然网站是打不开的 这就比较坑了，所以需要一个统一的路径前缀，最好是可配置的，这样就好办了。但目前版本的yapi是不支持的。替代方案就是配置子域名转发了，但是需要新增子域名的解析。

4593645 commented 4 years ago

@tangcent 我也是这样配的，然后发现，静态文件和api接口的路径都不统一， image image image 所以要把/prd，/api，/icontfont等所有你还有不知道的路径前缀都要配上，要不然网站是打不开的 这就比较坑了，所以需要一个统一的路径前缀，最好是可配置的，这样就好办了。但目前版本的yapi是不支持的。替代方案就是配置子域名转发了，但是需要新增子域名的解析。

请问您是怎么配置的？我用花生壳映射到内网，然后就没有办法映射出外部了，内网还是用mac mini 装ngin，然后还必须统一映射到http://ip:端口/yapi/ 这种路径下面才行，否则外面的所有应用都访问不了。

tangcent commented 4 years ago

location ^~/yapi/ { rewrite ^/yapi/(.*)$ /$1 break; proxy_pass http://localhost:3000; }

也可以考虑这样写:

location / { root html; index index.html index.htm; set $yapi_redirect 0; if ($http_referer ~ "http://localhost:8080/yapi") { set $yapi_redirect 1; } if ($uri ~ "/yapi") { set $yapi_redirect 0; } if ($yapi_redirect = 1) { proxy_pass http://localhost:3000; } }

location ^~/yapi/ { rewrite ^/yapi/(.*)$ /$1 break; proxy_pass http://localhost:3000; }



- 另外，考虑使用`sub_filter`，将yapi响应的html中的链接`src="/`&`href="/`进行修改，加上`/yapi`

---

- 如果无法解决，可以考虑自行维护一个yapi分支，为所有的url加上前缀 `/yapi`
- 如有谬误,恭请指正
4593645 commented 4 years ago

  • @4593645 wow,我不能够完全明白你现在的状况，不过如果你的需求是将yapi的所有请求统一映射到http://ip:端口/yapi/ 这种路径下面，貌似有点困难.

  • 我未能想到很好的解决方案

  • 如下简单方案仅供参考:【假设配置nginx使得可以通过http://localhost:8080/yapi访问部署在http://localhost:3000的yapi】

    • 将 ~/yapi指向3000
    • 将referer为~/yapi的重定向到 ~/yapi
set $yapi_redirect 0;
if ($http_referer ~* "http://localhost:8080/yapi") {
    set $yapi_redirect 1;
}
if ($uri ~* "/yapi") {
    set $yapi_redirect 0;
}
if ($yapi_redirect = 1) {
    rewrite ^/(.*)$ http://localhost:8080/yapi/$1 break;
}

location ^~/yapi/ {
    rewrite ^/yapi/(.*)$ /$1 break;
    proxy_pass   http://localhost:3000;
}

也可以考虑这样写:


 location / {
    root   html;
    index  index.html index.htm;
    set $yapi_redirect 0;
    if ($http_referer ~* "http://localhost:8080/yapi") {
        set $yapi_redirect 1;
    }
    if ($uri ~* "/yapi") {
        set $yapi_redirect 0;
    }
    if ($yapi_redirect = 1) {
        proxy_pass   http://localhost:3000;
    }
 }

 location ^~/yapi/ {
    rewrite ^/yapi/(.*)$ /$1 break;
    proxy_pass   http://localhost:3000;
 }

  • 另外，考虑使用sub_filter，将yapi响应的html中的链接src="/&href="/进行修改，加上/yapi

  • 如果无法解决，可以考虑自行维护一个yapi分支，为所有的url加上前缀 /yapi

  • 如有谬误,恭请指正

目前我只能解决到一半，默认页面下部是有显示，Chrome 开发者工具显示没有错误，就是上部分是白页。


        proxy_set_header Host $host;
        proxy_set_header  X-Real-IP        $remote_addr;
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;

        proxy_pass http://localhost:3000;

    }

    location / {
        proxy_pass    http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }`
tangcent commented 4 years ago 
location / {
    proxy_pass    http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
}`

你既然可以配这条规则, 那何必一定要使用/api呢, 如果这条规则生效的话, 直接/就可以正常访问了吧?

4593645 commented 4 years ago 
location / {
    proxy_pass    http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
}`

你既然可以配这条规则, 那何必一定要使用/api呢, 如果这条规则生效的话, 直接/就可以正常访问了吧?

机器是内网，其实本地不需要安装Nginx，只是没有办法才想去安装一个Nginx，若yapi项目支持相对路径的话。本想修改源代码谁知道git clone 源码进入webstorm 后起不来，错误

` node server/app.js

module.js:550 throw err; ^

Error: Cannot find module '../../config.json' at Function.Module._resolveFilename (module.js:548:15) at Function.Module._load (module.js:475:25) ` 把安装好的文件 cp 去也启动不了。

tangcent commented 4 years ago
4593645 commented 4 years ago
  • 错误提示还是很明显的,Error: Cannot find module '../../config.json' 这里要求你将config.js配置在yapi的上级目录中
  • 具体的配置参数参考:https://hellosean1025.github.io/yapi/devops/index.html
  • 你也可以找到其他一些相关的issue:例如#1296

Error: Cannot find module '../../config.json' at Function.Module._resolveFilename (module.js:548:15) at Function.Module._load (module.js:475:25) at Module.require (module.js:597:17) at require (internal/module.js:11:18) at Object.<anonymous> (/Users/lizf/git/yapi-v1.8.5/server/yapi.js:4:16)

--- 有这个文件 cp 过来了，启动也报错 lizfdeMBP:yapi-v1.8.5 lizf$ ls /Users/lizf/git/yapi-v1.8.5/config.json /Users/lizf/git/yapi-v1.8.5/config.json

tangcent commented 4 years ago

你的yapi的源码是在/Users/lizf/git/yapi-v1.8.5还是/Users/lizf/git/yapi-v1.8.5/yapi 如果是在/Users/lizf/git/yapi-v1.8.5的话 你这里的配置文件应该放到/Users/lizf/git/config.json

配置文件不落在yapi文件夹里，而是平级

yanqiw commented 4 years ago

我通过以下方式暂时实现了二级路径。 假设应用会部署在 /yapi 这个路径下

  1. 从指定的版本 checkout 出新的分支。 例如： git checkout -b release/yapi-sub-dir

  2. 修改 client/Application.js 的路由部分，添加 basename='/yapi' 属性。

    ...
    <Router basename="/yapi" getUserConfirmation={this.showConfirm}>
...

  3. 重修构建 client, 运行 npm run build-client

    构建之前需要先安装依赖，在项目根目录下运行 npm install

  4. 推送构建后的代码到仓库，并发布到服务器。

  5. 配置 nginx

    
upstream mock_service_upstream {
server 127.0.0.1:3000;
}
location /yapi/ {
    rewrite ^/yapi/?(.*) /$1 break;
    proxy_pass http://mock_service_upstream;
}

location ~ ^/(api|iconfont|image|prd|mock)/ { # 这里处理的不是很好，如果根目录下有其他 asset 会受到影响。需要优化 proxy_pass http://mock_service_upstream; }


本地开发调试时，需要在 static 目录下创建一个 `yapi` 文件夹，并将 static/dev.html 复制进去。
```bash
# project root dir
mkdir static/yapi
cp static/dev.html static/yapi/dev.html

运行 npm run dev。 打开 http://localhost:3000/yapi 可以看到应用运行。

4593645 commented 4 years ago

我通过以下方式暂时实现了二级路径。 假设应用会部署在 /yapi 这个路径下

  1. 从指定的版本 checkout 出新的分支。 例如： git checkout -b release/yapi-sub-dir
  2. 修改 client/Application.js 的路由部分，添加 basename='/yapi' 属性。
...
        <Router basename="/yapi" getUserConfirmation={this.showConfirm}>
...
  1. 重修构建 client, 运行 npm run build-client
  2. 推送构建后的代码到仓库，并发布到服务器。
  3. 配置 nginx
upstream mock_service_upstream {
    server 127.0.0.1:3000;
}
location /yapi/ {
        rewrite ^/yapi/?(.*) /$1 break;
        proxy_pass http://mock_service_upstream;
    }

location ~ /(api|iconfont|image|prd|mock)/ { # 这里处理的不是很好，如果根目录下有其他 asset  会受到影响。需要优化
        proxy_pass http://mock_service_upstream;
   }

本地开发调试时，需要在 static 目录下创建一个 yapi 文件夹，并将 static/dev.html 复制进去。

# project root dir
mkdir static/yapi
cp static/dev.html static/yapi/dev.html

运行 npm run dev。 打开 http://localhost:3000/yapi 可以看到应用运行。

走到您提示的第三部 遇到问题了


lizhifeng@lizhifengdeMBP yapi % npm run build-client

> yapi-vendor@1.8.5 build-client /Users/lizhifeng/git/yapi
> NODE_ENV=production ykit pack -m

sh: ykit: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! yapi-vendor@1.8.5 build-client: `NODE_ENV=production ykit pack -m`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the yapi-vendor@1.8.5 build-client script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/lizhifeng/.npm/_logs/2019-11-04T03_48_20_296Z-debug.log
lizhifeng@lizhifengdeMBP yapi % cat /Users/lizhifeng/.npm/_logs/2019-11-04T03_48_20_296Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/Users/lizhifeng/.nvm/versions/node/v12.13.0/bin/node',
1 verbose cli   '/Users/lizhifeng/.nvm/versions/node/v12.13.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build-client'
1 verbose cli ]
2 info using npm@6.12.0
3 info using node@v12.13.0
4 verbose run-script [ 'prebuild-client', 'build-client', 'postbuild-client' ]
5 info lifecycle yapi-vendor@1.8.5~prebuild-client: yapi-vendor@1.8.5
6 info lifecycle yapi-vendor@1.8.5~build-client: yapi-vendor@1.8.5
7 verbose lifecycle yapi-vendor@1.8.5~build-client: unsafe-perm in lifecycle true
8 verbose lifecycle yapi-vendor@1.8.5~build-client: PATH: /Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/lizhifeng/git/yapi/node_modules/.bin:/Users/lizhifeng/.nvm/versions/node/v12.13.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
9 verbose lifecycle yapi-vendor@1.8.5~build-client: CWD: /Users/lizhifeng/git/yapi
10 silly lifecycle yapi-vendor@1.8.5~build-client: Args: [ '-c', 'NODE_ENV=production ykit pack -m' ]
11 info lifecycle yapi-vendor@1.8.5~build-client: Failed to exec build-client script
12 verbose stack Error: yapi-vendor@1.8.5 build-client: `NODE_ENV=production ykit pack -m`
12 verbose stack spawn ENOENT
12 verbose stack     at ChildProcess.<anonymous> (/Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
12 verbose stack     at ChildProcess.emit (events.js:210:5)
12 verbose stack     at maybeClose (internal/child_process.js:1021:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
13 verbose pkgid yapi-vendor@1.8.5
14 verbose cwd /Users/lizhifeng/git/yapi
15 verbose Darwin 19.0.0
16 verbose argv "/Users/lizhifeng/.nvm/versions/node/v12.13.0/bin/node" "/Users/lizhifeng/.nvm/versions/node/v12.13.0/bin/npm" "run" "build-client"
17 verbose node v12.13.0
18 verbose npm  v6.12.0
19 error code ELIFECYCLE
20 error syscall spawn
21 error file sh
22 error errno ENOENT
23 error yapi-vendor@1.8.5 build-client: `NODE_ENV=production ykit pack -m`
23 error spawn ENOENT
24 error Failed at the yapi-vendor@1.8.5 build-client script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]
lizhifeng@lizhifengdeMBP yapi % ```
yanqiw commented 4 years ago

我通过以下方式暂时实现了二级路径。 假设应用会部署在 /yapi 这个路径下

  1. 从指定的版本 checkout 出新的分支。 例如： git checkout -b release/yapi-sub-dir
  2. 修改 client/Application.js 的路由部分，添加 basename='/yapi' 属性。
...
        <Router basename="/yapi" getUserConfirmation={this.showConfirm}>
...
  1. 重修构建 client, 运行 npm run build-client
  2. 推送构建后的代码到仓库，并发布到服务器。
  3. 配置 nginx
upstream mock_service_upstream {
    server 127.0.0.1:3000;
}
location /yapi/ {
        rewrite ^/yapi/?(.*) /$1 break;
        proxy_pass http://mock_service_upstream;
    }

location ~ /(api|iconfont|image|prd|mock)/ { # 这里处理的不是很好，如果根目录下有其他 asset  会受到影响。需要优化
        proxy_pass http://mock_service_upstream;
   }

本地开发调试时，需要在 static 目录下创建一个 yapi 文件夹，并将 static/dev.html 复制进去。

# project root dir
mkdir static/yapi
cp static/dev.html static/yapi/dev.html

运行 npm run dev。 打开 http://localhost:3000/yapi 可以看到应用运行。

走到您提示的第三部 遇到问题了

lizhifeng@lizhifengdeMBP yapi % npm run build-client

> yapi-vendor@1.8.5 build-client /Users/lizhifeng/git/yapi
> NODE_ENV=production ykit pack -m

sh: ykit: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! yapi-vendor@1.8.5 build-client: `NODE_ENV=production ykit pack -m`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the yapi-vendor@1.8.5 build-client script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/lizhifeng/.npm/_logs/2019-11-04T03_48_20_296Z-debug.log
lizhifeng@lizhifengdeMBP yapi % cat /Users/lizhifeng/.npm/_logs/2019-11-04T03_48_20_296Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/Users/lizhifeng/.nvm/versions/node/v12.13.0/bin/node',
1 verbose cli   '/Users/lizhifeng/.nvm/versions/node/v12.13.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build-client'
1 verbose cli ]
2 info using npm@6.12.0
3 info using node@v12.13.0
4 verbose run-script [ 'prebuild-client', 'build-client', 'postbuild-client' ]
5 info lifecycle yapi-vendor@1.8.5~prebuild-client: yapi-vendor@1.8.5
6 info lifecycle yapi-vendor@1.8.5~build-client: yapi-vendor@1.8.5
7 verbose lifecycle yapi-vendor@1.8.5~build-client: unsafe-perm in lifecycle true
8 verbose lifecycle yapi-vendor@1.8.5~build-client: PATH: /Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/lizhifeng/git/yapi/node_modules/.bin:/Users/lizhifeng/.nvm/versions/node/v12.13.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
9 verbose lifecycle yapi-vendor@1.8.5~build-client: CWD: /Users/lizhifeng/git/yapi
10 silly lifecycle yapi-vendor@1.8.5~build-client: Args: [ '-c', 'NODE_ENV=production ykit pack -m' ]
11 info lifecycle yapi-vendor@1.8.5~build-client: Failed to exec build-client script
12 verbose stack Error: yapi-vendor@1.8.5 build-client: `NODE_ENV=production ykit pack -m`
12 verbose stack spawn ENOENT
12 verbose stack     at ChildProcess.<anonymous> (/Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
12 verbose stack     at ChildProcess.emit (events.js:210:5)
12 verbose stack     at maybeClose (internal/child_process.js:1021:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
13 verbose pkgid yapi-vendor@1.8.5
14 verbose cwd /Users/lizhifeng/git/yapi
15 verbose Darwin 19.0.0
16 verbose argv "/Users/lizhifeng/.nvm/versions/node/v12.13.0/bin/node" "/Users/lizhifeng/.nvm/versions/node/v12.13.0/bin/npm" "run" "build-client"
17 verbose node v12.13.0
18 verbose npm  v6.12.0
19 error code ELIFECYCLE
20 error syscall spawn
21 error file sh
22 error errno ENOENT
23 error yapi-vendor@1.8.5 build-client: `NODE_ENV=production ykit pack -m`
23 error spawn ENOENT
24 error Failed at the yapi-vendor@1.8.5 build-client script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]
lizhifeng@lizhifengdeMBP yapi % ```

试一下全局安装 ykit ： npm install -g ykit

4593645 commented 4 years ago

npm install -g ykit

装了也是错误，不知道问题出在哪了。

lizhifengdeMBP:yapi lizhifeng$ npm run build-client

> yapi-vendor@1.8.5 build-client /Users/lizhifeng/git/yapi
> NODE_ENV=production ykit pack -m

internal/modules/cjs/loader.js:797
    throw err;
    ^

Error: Cannot find module 'assets-webpack-plugin'
Require stack:
- /Users/lizhifeng/git/yapi/ykit.config.js
- /Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/ykit/lib/models/Project.js
- /Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/ykit/lib/modules/manager.js
- /Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/ykit/lib/cli.js
- /Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/ykit/bin/ykit
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/lizhifeng/git/yapi/ykit.config.js:2:20)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/lizhifeng/git/yapi/ykit.config.js',
    '/Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/ykit/lib/models/Project.js',
    '/Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/ykit/lib/modules/manager.js',
    '/Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/ykit/lib/cli.js',
    '/Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/ykit/bin/ykit'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! yapi-vendor@1.8.5 build-client: `NODE_ENV=production ykit pack -m`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the yapi-vendor@1.8.5 build-client script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/lizhifeng/.npm/_logs/2019-11-06T01_04_48_073Z-
yanqiw commented 4 years ago

npm install -g ykit

装了也是错误，不知道问题出在哪了。

lizhifengdeMBP:yapi lizhifeng$ npm run build-client

> yapi-vendor@1.8.5 build-client /Users/lizhifeng/git/yapi
> NODE_ENV=production ykit pack -m

internal/modules/cjs/loader.js:797
    throw err;
    ^

Error: Cannot find module 'assets-webpack-plugin'
Require stack:
- /Users/lizhifeng/git/yapi/ykit.config.js
- /Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/ykit/lib/models/Project.js
- /Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/ykit/lib/modules/manager.js
- /Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/ykit/lib/cli.js
- /Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/ykit/bin/ykit
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/lizhifeng/git/yapi/ykit.config.js:2:20)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/lizhifeng/git/yapi/ykit.config.js',
    '/Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/ykit/lib/models/Project.js',
    '/Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/ykit/lib/modules/manager.js',
    '/Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/ykit/lib/cli.js',
    '/Users/lizhifeng/.nvm/versions/node/v12.13.0/lib/node_modules/ykit/bin/ykit'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! yapi-vendor@1.8.5 build-client: `NODE_ENV=production ykit pack -m`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the yapi-vendor@1.8.5 build-client script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/lizhifeng/.npm/_logs/2019-11-06T01_04_48_073Z-

看上去是没有安装过工程的依赖， 是否在项目下运行过 npm install 或者 yarn 安装过项目的依赖了？

jifengg commented 3 years ago

YAPI 是高效、易用、功能强大的 api 管理平台。
安装官网部署之后，可以通过 IP+PORT 的方式访问。如http://127.0.0.1:3000/
如果想用nginx做代理，并用二级目录的方式，如 http://127.0.0.1/docs/，用以下配置并不能直接生效

  location /docs/ {
    proxy_pass http://127.0.0.1:3000/;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
  }

这是因为，前端资源和路由，全部都是基于/的，如api，即使你用http://127.0.0.1/docs/访问，还是会请求http://127.0.0.1/api/，此时，还有一个办法就是在nginx中对所有yapi可以请求的二级目录做代理。但是不推荐这种方式。

有网友发了重新编译的方式，因为我本地编译失败，所以没有验证。

最后我自己用了一个比较“笨”的方法：直接修改编译后的html、css、js文件！

还好，总共就三个文件。

vendors/static/index.html 在这里添加一个变量window.baseurl，后面js也要使用这个变量，要修改目录就该这个变量就行

<!DOCTYPE html>
<html>

<head>
    <meta id="cross-request-sign" charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="keywords" content="yapi接口管理,api管理,接口管理,api,接口,接口文档,api文档,接口管理系统" />
    <meta name="description"
        content="YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API，YApi 还为用户提供了优秀的交互体验，开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的管理。" />
    <title>YApi-高效、易用、功能强大的可视化接口管理平台</title>
    <!-- <link rel="icon" type="image/png" sizes="192x192" href="/image/favicon.png"> -->
    <script>
        window.baseurl = '/docs/';
        var link = document.createElement('link');
        link.setAttribute('rel', 'icon');
        link.setAttribute('type', 'image/png');
        link.setAttribute('sizes', '192x192');
        link.setAttribute('href', baseurl + 'image/favicon.png');
        document.head.appendChild(link);
        document.write('<script src="' + baseurl + 'prd/assets.js?v=' + Math.random() + '"><\/script>');
    </script>

    <script>
        document.write('<link rel="stylesheet"  href="' + baseurl + 'prd/' + window.WEBPACK_ASSETS['index.js'].css + '" />');
    </script>

</head>

<body>
    <div id="yapi" style="height: 100%;"></div>

    <script>
        document.write('<script src="' + baseurl + 'prd/' + window.WEBPACK_ASSETS['manifest'].js + '"><\/script>');
    </script>
    <script>
        document.write('<script src="' + baseurl + 'prd/' + window.WEBPACK_ASSETS['lib3'].js + '"><\/script>');
    </script>
    <script>
        document.write('<script src="' + baseurl + 'prd/' + window.WEBPACK_ASSETS['lib2'].js + '"><\/script>');
    </script>
    <script>
        document.write('<script src="' + baseurl + 'prd/' + window.WEBPACK_ASSETS['lib'].js + '"><\/script>');
    </script>

    <script>
        document.write('<script src="' + baseurl + 'prd/' + window.WEBPACK_ASSETS['index.js'].js + '"><\/script>');
    </script>
</body>

</html>

接下来修改css和js。官方编译的.css和.js文件直接使用会报错，需要使用.gz里面的文件。

$ cd vendors/static/prd
$ #删除两个index。这里文件名以“1.9.2”为准，其他版本请自行替换
$ rm -f index@0d94707b92cfe07218e7.css index@0d94707b92cfe07218e7.js
$ gzip -d index@0d94707b92cfe07218e7.js.gz
$ gzip -d index@0d94707b92cfe07218e7.css.gz
$ #替换路由
$ sed -i "s/\"\/api/window.baseurl+\"api/g; \
s/\"\/group/window.baseurl+\"group/g; \
s/\"\/user/window.baseurl+\"user/g; \
s/\"\/project/window.baseurl+\"project/g; \
s/\"\/mock/window.baseurl+\"mock/g; \
s/path:\"\//path:window.baseurl+\"/g; \
s/to:\"\//to:window.baseurl+\"/g;" \
s/history.push(\"\//history.push(window.baseurl+\"/g;" "./index@0d94707b92cfe07218e7.js"
$ #替换字体文件路径，里面的“docs”自行替换成自己的目录
$ sed -i "s/\/iconfont\//\/docs\/iconfont\//g" "./index@0d94707b92cfe07218e7.css"
$ #重新生成.gz文件
$ gzip -c index@0d94707b92cfe07218e7.js > index@0d94707b92cfe07218e7.js.gz
$ gzip -c index@0d94707b92cfe07218e7.css > index@0d94707b92cfe07218e7.css.gz

此时，用上面的nginx配置做代理，就可以用 http://127.0.0.1/docs/访问yapi项目了。
因为改的都是前端静态资源，所以yapi服务无需重启，只要浏览器清理缓存重新访问即可。

js中替换的文本： 原字符 替换成
"/api window.baseurl+"api
"/group window.baseurl+"group
"/user window.baseurl+"user
"/project window.baseurl+"project
"/mock window.baseurl+"mock
path:"/ path:window.baseurl+"
to:"/ to:window.baseurl+"
history.push("/ history.push(window.baseurl+"
ChenDapengJava commented 3 years ago

YAPI 是高效、易用、功能强大的 api 管理平台。 安装官网部署之后，可以通过 IP+PORT 的方式访问。如http://127.0.0.1:3000/ 如果想用nginx做代理，并用二级目录的方式，如 http://127.0.0.1/docs/，用以下配置并不能直接生效

  location /docs/ {
    proxy_pass http://127.0.0.1:3000/;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
  }

这是因为，前端资源和路由，全部都是基于/的，如api，即使你用http://127.0.0.1/docs/访问，还是会请求http://127.0.0.1/api/，此时，还有一个办法就是在nginx中对所有yapi可以请求的二级目录做代理。但是不推荐这种方式。

有网友发了重新编译的方式，因为我本地编译失败，所以没有验证。

最后我自己用了一个比较“笨”的方法：直接修改编译后的html、css、js文件！

还好，总共就三个文件。

vendors/static/index.html 在这里添加一个变量window.baseurl，后面js也要使用这个变量，要修改目录就该这个变量就行

<!DOCTYPE html>
<html>

<head>
    <meta id="cross-request-sign" charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="keywords" content="yapi接口管理,api管理,接口管理,api,接口,接口文档,api文档,接口管理系统" />
    <meta name="description"
        content="YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API，YApi 还为用户提供了优秀的交互体验，开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的管理。" />
    <title>YApi-高效、易用、功能强大的可视化接口管理平台</title>
    <!-- <link rel="icon" type="image/png" sizes="192x192" href="/image/favicon.png"> -->
    <script>
        window.baseurl = '/docs/';
        var link = document.createElement('link');
        link.setAttribute('rel', 'icon');
        link.setAttribute('type', 'image/png');
        link.setAttribute('sizes', '192x192');
        link.setAttribute('href', baseurl + 'image/favicon.png');
        document.head.appendChild(link);
        document.write('<script src="' + baseurl + 'prd/assets.js?v=' + Math.random() + '"><\/script>');
    </script>

    <script>
        document.write('<link rel="stylesheet"  href="' + baseurl + 'prd/' + window.WEBPACK_ASSETS['index.js'].css + '" />');
    </script>

</head>

<body>
    <div id="yapi" style="height: 100%;"></div>

    <script>
        document.write('<script src="' + baseurl + 'prd/' + window.WEBPACK_ASSETS['manifest'].js + '"><\/script>');
    </script>
    <script>
        document.write('<script src="' + baseurl + 'prd/' + window.WEBPACK_ASSETS['lib3'].js + '"><\/script>');
    </script>
    <script>
        document.write('<script src="' + baseurl + 'prd/' + window.WEBPACK_ASSETS['lib2'].js + '"><\/script>');
    </script>
    <script>
        document.write('<script src="' + baseurl + 'prd/' + window.WEBPACK_ASSETS['lib'].js + '"><\/script>');
    </script>

    <script>
        document.write('<script src="' + baseurl + 'prd/' + window.WEBPACK_ASSETS['index.js'].js + '"><\/script>');
    </script>
</body>

</html>

接下来修改css和js。官方编译的.css和.js文件直接使用会报错，需要使用.gz里面的文件。

$ cd vendors/static/prd
$ #删除两个index。这里文件名以“1.9.2”为准，其他版本请自行替换
$ rm -f index@0d94707b92cfe07218e7.css index@0d94707b92cfe07218e7.js
$ gzip -d index@0d94707b92cfe07218e7.js.gz
$ gzip -d index@0d94707b92cfe07218e7.css.gz
$ #替换路由
$ sed -i "s/\"\/api/window.baseurl+\"api/g; \
s/\"\/group/window.baseurl+\"group/g; \
s/\"\/user/window.baseurl+\"user/g; \
s/\"\/project/window.baseurl+\"project/g; \
s/\"\/mock/window.baseurl+\"mock/g; \
s/path:\"\//path:window.baseurl+\"/g; \
s/to:\"\//to:window.baseurl+\"/g;" \
s/history.push(\"\//history.push(window.baseurl+\"/g;" "./index@0d94707b92cfe07218e7.js"
$ #替换字体文件路径，里面的“docs”自行替换成自己的目录
$ sed -i "s/\/iconfont\//\/docs\/iconfont\//g" "./index@0d94707b92cfe07218e7.css"
$ #重新生成.gz文件
$ gzip -c index@0d94707b92cfe07218e7.js > index@0d94707b92cfe07218e7.js.gz
$ gzip -c index@0d94707b92cfe07218e7.css > index@0d94707b92cfe07218e7.css.gz

此时，用上面的nginx配置做代理，就可以用 http://127.0.0.1/docs/访问yapi项目了。 因为改的都是前端静态资源，所以yapi服务无需重启，只要浏览器清理缓存重新访问即可。

js中替换的文本：

原字符 替换成 "/api window.baseurl+"api "/group window.baseurl+"group "/user window.baseurl+"user "/project window.baseurl+"project "/mock window.baseurl+"mock path:"/ path:window.baseurl+" to:"/ to:window.baseurl+" history.push("/ history.push(window.baseurl+"

这个可行！ 有一点就是关于history.push("/的替换我这样改才生效：

sed -i 's|history.push("/|history.push(window.baseurl+"|g' ./index@4df3f8796e0eea779ba6.js
hypertextPreprocessor commented 1 year ago

与其像楼上说的修改静态文件还不如直接重新编译客户端。 我的解决方案： 首先我说说我用的版本（v1.8.8)，其他版本应该大同小异； 1.定位找到你的文件../myYapi/vendors/client/Application.js 修改router 配置basename

      r = (
        <Router getUserConfirmation={this.showConfirm} basename="/yapi"> <!--这里配置您的二级目录-->
          <div className="g-main">
            <div className="router-main">
              {this.props.curUserRole === 'admin' && <Notify />}
              {alertContent()}
              {this.props.loginState !== 1 ? <Header /> : null}
              <div className="router-container">
                {Object.keys(AppRoute).map(key => {
                  let item = AppRoute[key];
                  console.log(item);
                  return key === 'login' ? (
                    <Route key={key} path={item.path} component={item.component} />
                  ) : key === 'home' ? (
                    <Route key={key} exact path={item.path} component={item.component} />
                  ) : (
                    <Route
                      key={key}
                      path={item.path}
                      component={requireAuthentication(item.component)}
                    />
                  );
                })}
              </div>
              {/* <div className="router-container">
                <Route exact path="/" component={Home} />
                <Route path="/group" component={requireAuthentication(Group)} />
                <Route path="/project/:id" component={requireAuthentication(Project)} />
                <Route path="/user" component={requireAuthentication(User)} />
                <Route path="/follow" component={requireAuthentication(Follows)} />
                <Route path="/add-project" component={requireAuthentication(AddProject)} />
                <Route path="/login" component={Login} />
                {/* <Route path="/statistic" component={statisticsPage} /> */}
              {/* </div> */}
            </div>
            <Footer />
          </div>
        </Router>
      );

2.然后在vendor目录下操作 进行编译运行 

npm run build-client

这里可能会遇到报错：（我遇到的） 报错一：若是遇到react的弃用api报错直接按照报错提示全局替换成新的api即可（通常是componentWillMount 建议替换成UNSAFE_componentWillMount, componentWillUpdate 替换成UNSAFE_componentWillUpdate) 报错二：报错关键字 /swagger-client/lib/resolver.js unexpected token 根据报错提示就是缺少这个文件的loader，找到文件...myYapi/vendors/ykit.config.js 合适的位置添加

baseConfig.module.preLoaders.push({
          test: /\.(js|jsx)$/,
          include: [path.resolve(__dirname, './node_modules/swagger-client')],
          loader: 'babel-loader'
})

再次运行 

npm run build-client

成功之后启动 

pm2 start yapi

我的nginx代理配置

location ^~/yapi {
                proxy_set_header Host $host;
                proxy_set_header  X-Real-IP        $remote_addr;
                proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
                proxy_set_header X-NginX-Proxy true;
                proxy_set_header Connection "upgrade";
                proxy_set_header Upgrade $http_upgrade;
                proxy_http_version 1.1;
                rewrite ^/yapi/(.*)$ /$1 break;
                proxy_pass http://127.0.0.1:3000;
        }
        location ~* ^/(prd|image|api|iconfont) {
                proxy_set_header Connection "upgrade";
                proxy_set_header Upgrade $http_upgrade;
                proxy_http_version 1.1;
                rewrite ^/(.*)$ /$1 break;
                proxy_pass http://127.0.0.1:3000;
        }
zhangkl commented 2 months ago

与其像楼上说的修改静态文件还不如直接重新编译客户端。 我的解决方案： 首先我说说我用的版本（v1.8.8)，其他版本应该大同小异； 1.定位找到你的文件../myYapi/vendors/client/Application.js 修改router 配置basename

      r = (
        <Router getUserConfirmation={this.showConfirm} basename="/yapi"> <!--这里配置您的二级目录-->
          <div className="g-main">
            <div className="router-main">
              {this.props.curUserRole === 'admin' && <Notify />}
              {alertContent()}
              {this.props.loginState !== 1 ? <Header /> : null}
              <div className="router-container">
                {Object.keys(AppRoute).map(key => {
                  let item = AppRoute[key];
                  console.log(item);
                  return key === 'login' ? (
                    <Route key={key} path={item.path} component={item.component} />
                  ) : key === 'home' ? (
                    <Route key={key} exact path={item.path} component={item.component} />
                  ) : (
                    <Route
                      key={key}
                      path={item.path}
                      component={requireAuthentication(item.component)}
                    />
                  );
                })}
              </div>
              {/* <div className="router-container">
                <Route exact path="/" component={Home} />
                <Route path="/group" component={requireAuthentication(Group)} />
                <Route path="/project/:id" component={requireAuthentication(Project)} />
                <Route path="/user" component={requireAuthentication(User)} />
                <Route path="/follow" component={requireAuthentication(Follows)} />
                <Route path="/add-project" component={requireAuthentication(AddProject)} />
                <Route path="/login" component={Login} />
                {/* <Route path="/statistic" component={statisticsPage} /> */}
              {/* </div> */}
            </div>
            <Footer />
          </div>
        </Router>
      );

2.然后在vendor目录下操作 进行编译运行

npm run build-client

这里可能会遇到报错：（我遇到的） 报错一：若是遇到react的弃用api报错直接按照报错提示全局替换成新的api即可（通常是componentWillMount 建议替换成UNSAFE_componentWillMount, componentWillUpdate 替换成UNSAFE_componentWillUpdate) 报错二：报错关键字 /swagger-client/lib/resolver.js unexpected token 根据报错提示就是缺少这个文件的loader，找到文件...myYapi/vendors/ykit.config.js 合适的位置添加

baseConfig.module.preLoaders.push({
          test: /\.(js|jsx)$/,
          include: [path.resolve(__dirname, './node_modules/swagger-client')],
          loader: 'babel-loader'
})

再次运行

npm run build-client

成功之后启动

pm2 start yapi

我的nginx代理配置

location ^~/yapi {
                proxy_set_header Host $host;
                proxy_set_header  X-Real-IP        $remote_addr;
                proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
                proxy_set_header X-NginX-Proxy true;
                proxy_set_header Connection "upgrade";
                proxy_set_header Upgrade $http_upgrade;
                proxy_http_version 1.1;
                rewrite ^/yapi/(.*)$ /$1 break;
                proxy_pass http://127.0.0.1:3000;
        }
        location ~* ^/(prd|image|api|iconfont) {
                proxy_set_header Connection "upgrade";
                proxy_set_header Upgrade $http_upgrade;
                proxy_http_version 1.1;
                rewrite ^/(.*)$ /$1 break;
                proxy_pass http://127.0.0.1:3000;
        }

可以一下编译后的静态资源包吗。我这死活编译不过，json-loader有问题