结合Nginx给YAPI添加二级目录访问

结合Nginx给YAPI添加二级目录访问

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+”
Comments are closed.