群辉NAS搭建WARP-Clash-API - 保姆级教程 #187

ChengSir-CC · 2024-05-05T13:57:32Z

ChengSir-CC
May 5, 2024

群辉NAS搭建WARP-Clash-API - 保姆级教程：

我是在群辉NAS的docker里部署的，没有一键安装，参数是按照vvbbnn00在其他帖子里的回复，拼出来的映射，群辉安装过程：

1、下载WARP-Clash-API

打开docker（Container Manager） --- 注册表 ---搜索WARP-Clash-API，找到vvbbnn00大佬的下载默认latest版本就行。

2、预置文件

在NAS任意位置新建文件夹：account和logs，空的文件夹就行。

如果你要修改展示页的样式，则新建templates文件夹，并且在git里下载templates/index.html放到NAS对应位置中。每次修改index.html都需要重启容器生效。
群辉手动搭建WARP-Clash-API时，不需要创建.env.local文件。

3、开始安装映像

打开docker --- 映像 --- WARP-Clash-API 进行安装，安装过程重点：

3.1、映射端口

21001->3000

外网用的21001可以自己改别的，内网固定3000。
创建/修改外网端口时，记得同步修改路由的端口转发。

3.2、映射文件夹和文件：

群辉内自建的文件夹 account => /app/account
群辉内自建的文件夹 logs => /app/logs

根据需要：群辉内自建的文件夹 templates => /app/templates

3.3、映射环境变量：

安装时默认会有一些变量，那些不动，在下面新增变量，按照WARP-Clash-API教程里的变量填写就行，例如：

SECRET_KEY    值是    aabbcc自己的密码
DO_GET_WARP_DATA    值是    true 或者不需要刷量的填false

其他变量看自己需要，详见变量说明

3.4、映射网络

默认的bridge

映射参考图：

4、启动、等待生成`account.json`

运行后，稍等个2-3分钟，程序启动后，群辉内自建的文件夹 account 内会生成一个account.json文件。
此时先停止容器运行，准备修改成自己的ID。

5、获取设备key

打开你手机上安装的warp，右上角菜单 - 账户 - “按键”（我这IOS就是这么翻译的...），对应修改到account.json中的license_key。

6、获取设备ID

打开你手机上安装的warp，右上角菜单 - 高级 - 诊断 - 客户端配置栏 - ID，对应修改到account.json中的account_id。

只修改json里的license_key和account_id，其他保持不变。

7、重启容器看是否成功

保存account.json后，再运行容器，过个3-5分钟，刷新手机warp看看流量有没有加。

环境变量里的DO_GET_WARP_DATA值是true才会刷流量，没加流量的先检查一遍，或查看日志看是否有报错。

补充说明：

流量获取上限是24PB，但我不知为何，截止20240510，每次都是到1.2TB就不再获取更多了，后续待观望。
如果看docker日志，报429什么too many的，可以先排查一下是不是json文件有问题，不行就重置你的warpID重刷一个，重置方法：
打开你手机上安装的warp，右上角菜单 - 高级 - 连接选项 - 删除所有设置。
即时使用正确的id和key，我用xshell通过命令的方式发送到NAS仍然是报错code500的，详见我的问题1，没有最终解决，但是直接修改json文件可以绕过这个问题。
网上截止现在，仍有直接获取24pb密钥的方式，建议直接获取一个...或者自己创建个Zero Trust账号，就是无限流量了，创建过程很简单，截止20240510有paypal就可以，paypal随便绑个储蓄卡就可。
如果你有24PB的key，并且已经绑定到设备上正在使用中，那么你在测试这个工具时，务必不要用自己24PB的key和设备ID去测试，否则24PB可能会被重置成 0 GB哦，重置完之后它还会很暖心的每n秒自动获取1GB哦，具体被重置的原因我不清楚，但我今天有幸被重置了一把（2024年05月10日，北京下着雨，总是能听到一阵阵的滴滴答答，一时间有些恍惚，竟分不清那声音是来自外面，还是来自我的心里...）。建议找个备用机的key和设备ID测试。

最后，感谢vvbbnn00大佬！

ChengSir-CC · 2024-05-10T13:35:42Z

ChengSir-CC
May 10, 2024
Author

修改前端样式

修改群辉NAS内自建的templates/index.html。
我这里对index.html稍微优化了一下

调整内容：

关掉了前端生成主机信息的超链接
调整展示样式xxxx
调整文案xxxx
移除各个默认勾选项
下拉默认选择“仅代理”
底部追加超链

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WARP+订阅生成</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
            color: #333;
        }

        h1 {
            margin-bottom: 20px;
        }

        #passwordInput {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        #qrcode {
            max-width: 200px;
        }

        footer {
            margin-top: 50px;
            line-height: 0.5;
        }

        a {
            color: #1e88e5;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        .warning {
            max-width: 400px;
            padding: 20px;
            background-color: #fff9c4;
            color: #807d62;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            margin: 0 auto 20px;
        }

        textarea {
            resize: none;
            border: none;
            text-align: center;
            width: 100%;
            max-width: 500px;
            font-size: 16px;
            margin-bottom: 10px;
            word-break: break-all;
        }

        textarea:focus {
            outline: none;
        }

        .toast {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            padding: 10px 20px;
            background-color: rgba(110, 255, 114);
            color: #4caf50;
            border-radius: 4px;
            font-size: 16px;
            opacity: 0;
            transition: opacity 0.2s;
            z-index: 1000;
        }

        .show {
            opacity: 1;
        }

        .tip {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .custom-hr {
            height: 10px;
            background-color: pink; /* 可选：设置水平线的颜色 */
            border: none; /* 可选：去掉默认的边框 */
            margin: 0; /* 可选：去掉默认的外边距 */
        }
	    
		.section {
		    padding: 15px; /* 调整填充 */
		    margin: 0 auto 20px; /* 外边距 */
		    border-radius: 10px; /* 边框圆角 */
		    width: 90%; /* 使用百分比宽度 */
		    max-width: 800px; /* 最大宽度 */
		    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
		    display: flex; /* 使用 Flexbox 布局 */
		    flex-direction: column; /* 垂直布局 */
		    align-items: center; /* 在主轴上水平居中 */
		    text-align: center; /* 文本水平居中 */
		}
		
		/* 在手机端使用更小的填充 */
		@media (max-width: 600px) {
		    .section {
		        padding: 10px;
		    }
		}

	    .centered {
		    text-align: center;
		    margin: 0 auto;
		}
		
		.qrcode-container {
		    display: inline-block;
		    text-align: center;
		}
    </style>
</head>
<body>
<div id="toast" class="toast"></div>

<div class="warning" style="display: none" id="ip-warn">
    <p>您的域名看起来似乎是本地域名，这意味着您的订阅地址<b>无法</b>被局域网及公网访问。</p>
</div>

<h2>WARP+订阅生成</h2>
<div style="height: 20px;"></div>
<form action="javascript:generateLink()" style="display: flex; flex-direction: column; align-items: center; text-align: left;">
    <div style="color: #999; font-size: 14px; margin-bottom: 10px;">身份确认</div>
    <div style="margin-bottom: 10px;">
        <input type="password" name="password" id="passwordInput" placeholder="请输入订阅密码" style="padding: 5px; font-size: 14px;">
    </div>
<div style="height: 10px;"></div>
    <div style="color: #999; font-size: 14px; margin-bottom: 10px;">节点选项</div>
    <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <input type="checkbox" id="alwaysBest" onchange="generateLink()" style="margin-right: 10px;">
        <label for="alwaysBest" style="margin-right: 20px;">始终最优节点</label>
    </div>
    <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <input type="checkbox" id="randomName" onchange="generateLink()" style="margin-right: 10px;">
        <label for="randomName" style="margin-right: 20px;">随机生成节点名称</label>
    </div>
    <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <input type="checkbox" id="ipv6" onchange="generateLink()" style="margin-right: 10px;">
        <label for="ipv6" style="margin-right: 20px;">只开启IPv6（慎选）</label>
    </div>
<div style="height: 10px;"></div>
    <div style="color: #999; font-size: 14px; margin-bottom: 10px;">节点格式</div>
    <div style="margin-bottom: 10px;">
        <select id="proxyFormat" onchange="generateLink()" style="padding: 5px; font-size: 14px;">
	        <option value="only_proxies" selected>纯代理</option>
	        <option value="with_groups">代理+分组（慎选）</option>
	        <option value="full">代理+分组+规则（慎选）</option>
        </select>
    </div>
</form>

<div class="centered">
    <div class="section">
	    <h2>自动判断订阅类型</h2>
	    <textarea id="autoSubscriptionLink" rows="3" readonly onclick="copyText('autoSubscriptionLink')"></textarea>
	    <div class="qrcode-container" id="qrcode_auto"></div>
    </div>
    
    <div class="section">
	    <h2>Clash</h2>
	    <textarea id="subscriptionLink" rows="3" readonly onclick="copyText('subscriptionLink')"></textarea>
	    <div class="qrcode-container" id="qrcode_clash"></div>
    </div>
    
    <div class="section">
	    <h2>ShadowRocket</h2>
	    <textarea id="subShadowRocketSubscriptionLink" rows="3" readonly onclick="copyText('subShadowRocketSubscriptionLink')"></textarea>
	    <div class="qrcode-container" id="qrcode_sr" ></div>
    </div>
    
    <div class="section">
	    <h2>Surge</h2>
	    <textarea id="subSurgeScriptionLink" rows="3" readonly onclick="copyText('subSurgeScriptionLink')"></textarea>
    </div>
    
    <div class="section">
	    <h2>Sing-Box</h2>
	    <textarea id="subSingBoxScriptionLink" rows="3" readonly onclick="copyText('subSingBoxScriptionLink')"></textarea>
    </div>
    
    <div class="section">
	    <h2>Loon</h2>
	    <textarea id="subLoonScriptionLink" rows="3" readonly onclick="copyText('subLoonScriptionLink')"></textarea>
    </div>
    
    <div class="section">
	    <h2>Wireguard</h2>
	    <textarea id="WireguardLink" rows="3" readonly onclick="copyText('WireguardLink')"></textarea>
	    <div class="qrcode-container" id="qrcode_wg"></div>
	</div>
</div>

<footer>
	<hr />
    <p><a href="https://baichengkeji.com">WARP-Clash-API订阅生成</a></p>
    <p><a href="https://github.com/vvbbnn00/WARP-Clash-API">WARP-Clash-API Github vvbbnn00</a></p>
</footer>

<script>
    if (location.hostname === 'localhost' || location.hostname === '127.0.0.1' || location.hostname === '0.0.0.0') {
        document.getElementById('ip-warn').style.display = 'block';
    }

    function generateLink() {
        const password = document.getElementById('passwordInput').value;
        const best = document.getElementById('alwaysBest').checked;
        const randomName = document.getElementById('randomName').checked;
        const proxyFormat = document.getElementById('proxyFormat').value;
        const ipv6 = document.getElementById('ipv6').checked;
        // Get the directory part of location.pathname
        const basePath = location.pathname.substring(0, location.pathname.lastIndexOf('/') + 1);
        // Construct the baseUrl
        const baseUrl = location.origin + basePath;
        const queryParams = new URLSearchParams({
            best,
            randomName,
            proxyFormat,
            ipv6
        });

        if (password.length) {
            queryParams.append('key', password);
        }

        document.getElementById('autoSubscriptionLink').textContent = baseUrl + "sub?" + queryParams.toString();
        document.getElementById('subscriptionLink').textContent = baseUrl + "api/clash?" + queryParams.toString();
        document.getElementById('subShadowRocketSubscriptionLink').textContent = baseUrl + "api/shadowrocket?" + queryParams.toString();
        document.getElementById('subSurgeScriptionLink').textContent = baseUrl + "api/surge?" + queryParams.toString();
        document.getElementById('subSingBoxScriptionLink').textContent = baseUrl + "api/sing-box?" + queryParams.toString();
        document.getElementById('subLoonScriptionLink').textContent = baseUrl + "api/loon?" + queryParams.toString();
        document.getElementById('WireguardLink').textContent = baseUrl + "api/wireguard?" + queryParams.toString();
        // document.getElementById('AccountLink').href = baseUrl + "api/account?" + queryParams.toString();

        const qrcodeContainerClash = document.getElementById('qrcode_clash');
        qrcodeContainerClash.innerHTML = '';
        const qrcodeClash = new QRCode(qrcodeContainerClash, {
            text: document.getElementById('subscriptionLink').textContent,
            width: 200,
            height: 200
        });

        const qrcodeContainerAuto = document.getElementById('qrcode_auto');
        qrcodeContainerAuto.innerHTML = '';
        const qrcodeAuto = new QRCode(qrcodeContainerAuto, {
            text: document.getElementById('autoSubscriptionLink').textContent,
            width: 200,
            height: 200
        });

        const qrcodeContainerSr = document.getElementById('qrcode_sr');
        qrcodeContainerSr.innerHTML = '';
        const qrcodeSr = new QRCode(qrcodeContainerSr, {
            text: document.getElementById('subShadowRocketSubscriptionLink').textContent,
            width: 200,
            height: 200
        });

        getQrCodeWg();
    }

    function copyText(elem) {
        const textarea = document.getElementById(elem);
        textarea.select();
        document.execCommand('copy');
        showToast("已复制到剪贴板");
    }


    function showToast(message) {
        const toast = document.getElementById('toast');
        toast.textContent = message;
        toast.classList.add('show');
        setTimeout(() => {
            toast.classList.remove('show');
        }, 1000);
    }

    function getQrCodeWg() {
        const qrcodeContainerWg = document.getElementById('qrcode_wg');
        const url = document.getElementById('WireguardLink').textContent;
        fetch(url, {method: 'GET'}).then(res => res.text()).then(res => {
            qrcodeContainerWg.innerHTML = '';
            const qrcode2 = new QRCode(qrcodeContainerWg, {
                text: res,
                width: 200,
                height: 200
            });
        }).catch(err => {
            showToast(`Error ${err.status}: ${err.statusText}`)
        });
    }

    generateLink()
</script>

</body>
</html>

手机效果图：

都是拿GPT改的，格式乱七八糟，但是能运行！凑合用哈。

0 replies

leetown3113 · 2024-05-11T08:25:02Z

leetown3113
May 11, 2024

请问我登上zero帐号后，设备key是哪个？

0 replies

a5412398 · 2024-05-17T03:57:15Z

a5412398
May 17, 2024

不错，不错，谢谢大佬

0 replies

ddzzhff · 2024-05-17T21:25:53Z

ddzzhff
May 17, 2024

求个op的docker部署教程

2 replies

ChengSir-CC Jun 6, 2024
Author

我没装OpenWrt，我不会，陪你一起蹲个大大佬

ddzzhff Jun 6, 2024

后面自己修改指令装上了

ChengSir-CC · 2024-06-06T17:37:51Z

ChengSir-CC
Jun 6, 2024
Author

关于Zero账户获取key，我没试过，参考一下这位好腿子的：
@hahach 原文：#193 里提供的这个链接：https://github.com/rany2/warp.sh

0 replies

aibpegwffg · 2024-06-13T16:23:28Z

aibpegwffg
Jun 13, 2024

warp流量有增加，但21001端口无法打开，报错The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there is an error in the application.

2 replies

dszz453 Mar 31, 2025

你怎么部署的，我的一直报错

a5412398 Mar 31, 2025

你怎么部署的，我的一直报错

这项目很久都没维护了, 报错也正常, 散了吧

qimlisky · 2024-06-30T04:19:14Z

qimlisky
Jun 30, 2024

我自己研究了个手机版本

0 replies

Testamibition · 2024-10-15T12:17:13Z

Testamibition
Oct 15, 2024

所以这个是干嘛的

0 replies

群辉NAS搭建WARP-Clash-API - 保姆级教程 #187

Uh oh!

Uh oh!