群辉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部署教程

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

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

ChengSir-CC May 5, 2024