# sub-web搭建 #### 在线平台的准备 * VPS一台并装好主流的系统（作者演示用CentOS） * 域名托管到 Cloudflare * 解析两个域名（一个用于前端，一个用于后端） #### 本地平台的准备 * PVE（Esxi）下创建的虚拟机VPS #### 前端项目地址 [点击访问](https://v2rayssr.com/go?url=https://github.com/CareyWang/sub-web) #### 后端项目地址 [点击访问](https://v2rayssr.com/go?url=https://github.com/tindy2013/subconverter) ### 在 Cloudflare 解析两个域名 **前端** 我们使用 [sub.mints7.com](https://sub.mints7.com/) 进行解析 **后端** 我们使用 [sua.mints7.com](https://sub.mints7.com/) 进行解析 （PS：若是为了你的服务器安全，建议一定开启CDN，也就是代理状态的小云朵）
**搭建Sub-Web前端** #### 更新系统并安装 Node 与 Yarn 依次运行下面四行代码，若是 Debian/Ubuntu 系统，请自行替换下面前两行命令中的 ***`yum`*** 为 ***`apt`***
``` 1，yum update -y 2，yum install -y curl wget sudo nodejs git 3，npm install -g cnpm --registry=https://registry.npm.taobao.org 4，cnpm install -g yarn code ``` 命令执行完毕以后，请运行下面的代码查询 Node 与 Yarn 是否安装成功，若是成功会返回版本号。 ``` 1，node -v 2，yarn --version ``` #### 下载并安装 Sub-Web 拉取 sub-web 程序，并进入 sub-web 文件夹 ``` 1，git clone https://github.com/CareyWang/sub-web.git 2，cd sub-web ``` 在项目目录中安装构建依赖项，整个过程稍微有点长。 ``` 1，yarn install ``` 使用 webpack 运行 Web 客户端以进行本地开发。 ``` 1，yarn serve ``` 到目前为止，浏览器访问 应该可以进行前端 sub-web 的预览了。 （ps：该界面在完成调试前，不要退出。） #### 修改默认后端地址 找到 `VPS /root/sub-web/src/views/Subconverter.vue` 文件 找到 257行 `backendOptions:`（之前搭建的时候是在这里，如果有变动，直接用搜索功能），替换后面的 `http://127.0.0.1:25500/sub?` 为 `https://sua.mints7.com/sub?` **（注意两个地方：域名为你刚才准备的后端域名，是 https 而非 http）**
#### 更换远程规则 因为这个版本更新以后，规则方面很少，经常用到的一些经典的 ACL4SSR 的规则并没有集成，大家可以看看，若是有，就不需要这样操作。 VPS找到 `/root/sub-web/src/views/Subconverter.vue` 文件，找到 258行 `remoteConfig:`（之前搭建的时候是在这里，同样，如果找不到直接使用查找功能），敲下回车，插入下面内容。 **（个人建议，挑选你常用的即可，不需要全部复制。）** ``` { label: "ACL4SSR", options: [ { label: "ACL4SSR_Online 默认版 分组比较全 (与Github同步)", value: "https://raw.githubusercontent.com/ACL4SSR/ACL4SSR/master/Clash/config/ACL4SSR_Online.ini" }, { label: "ACL4SSR_Online_AdblockPlus 更多去广告 (与Github同步)", value: "https://raw.githubusercontent.com/ACL4SSR/ACL4SSR/master/Clash/config/ACL4SSR_Online_AdblockPlus.ini" }, { label: "ACL4SSR_Online_NoAuto 无自动测速 (与Github同步)", value: "https://raw.githubusercontent.com/ACL4SSR/ACL4SSR/master/Clash/config/ACL4SSR_Online_NoAuto.ini" }, { label: "ACL4SSR_Online_NoReject 无广告拦截规则 (与Github同步)", value: "https://raw.githubusercontent.com/ACL4SSR/ACL4SSR/master/Clash/config/ACL4SSR_Online_NoReject.ini" }, { label: "ACL4SSR_Online_Mini 精简版 (与Github同步)", value: "https://raw.githubusercontent.com/ACL4SSR/ACL4SSR/master/Clash/config/ACL4SSR_Online_Mini.ini" }, { label: "ACL4SSR_Online_Mini_AdblockPlus.ini 精简版 更多去广告 (与Github同步)", value: "https://raw.githubusercontent.com/ACL4SSR/ACL4SSR/master/Clash/config/ACL4SSR_Online_Mini_AdblockPlus.ini" }, { label: "ACL4SSR_Online_Mini_NoAuto.ini 精简版 不带自动测速 (与Github同步)", value: "https://raw.githubusercontent.com/ACL4SSR/ACL4SSR/master/Clash/config/ACL4SSR_Online_Mini_NoAuto.ini" }, { label: "ACL4SSR_Online_Mini_Fallback.ini 精简版 带故障转移 (与Github同步)", value: "https://raw.githubusercontent.com/ACL4SSR/ACL4SSR/master/Clash/config/ACL4SSR_Online_Mini_Fallback.ini" }, { label: "ACL4SSR_Online_Mini_MultiMode.ini 精简版 自动测速、故障转移、负载均衡 (与Github同步)", value: "https://raw.githubusercontent.com/ACL4SSR/ACL4SSR/master/Clash/config/ACL4SSR_Online_Mini_MultiMode.ini" }, { label: "ACL4SSR_Online_Full 全分组 重度用户使用 (与Github同步)", value: "https://raw.githubusercontent.com/ACL4SSR/ACL4SSR/master/Clash/config/ACL4SSR_Online_Full.ini" }, { label: "ACL4SSR_Online_Full_NoAuto.ini 全分组 无自动测速 重度用户使用 (与Github同步)", value: "https://raw.githubusercontent.com/ACL4SSR/ACL4SSR/master/Clash/config/ACL4SSR_Online_Full_NoAuto.ini" }, { label: "ACL4SSR_Online_Full_AdblockPlus 全分组 重度用户使用 更多去广告 (与Github同步)", value: "https://raw.githubusercontent.com/ACL4SSR/ACL4SSR/master/Clash/config/ACL4SSR_Online_Full_AdblockPlus.ini" }, { label: "ACL4SSR_Online_Full_Netflix 全分组 重度用户使用 奈飞全量 (与Github同步)", value: "https://raw.githubusercontent.com/ACL4SSR/ACL4SSR/master/Clash/config/ACL4SSR_Online_Full_Netflix.ini" }, { label: "ACL4SSR 本地 默认版 分组比较全", value: "config/ACL4SSR.ini" }, { label: "ACL4SSR_Mini 本地 精简版", value: "config/ACL4SSR_Mini.ini" }, { label: "ACL4SSR_Mini_NoAuto.ini 本地 精简版+无自动测速", value: "config/ACL4SSR_Mini_NoAuto.ini" }, { label: "ACL4SSR_Mini_Fallback.ini 本地 精简版+fallback", value: "config/ACL4SSR_Mini_Fallback.ini" }, { label: "ACL4SSR_BackCN 本地 回国", value: "config/ACL4SSR_BackCN.ini" }, { label: "ACL4SSR_NoApple 本地 无苹果分流", value: "config/ACL4SSR_NoApple.ini" }, { label: "ACL4SSR_NoAuto 本地 无自动测速 ", value: "config/ACL4SSR_NoAuto.ini" }, { label: "ACL4SSR_NoAuto_NoApple 本地 无自动测速&无苹果分流", value: "config/ACL4SSR_NoAuto_NoApple.ini" }, { label: "ACL4SSR_NoMicrosoft 本地 无微软分流", value: "config/ACL4SSR_NoMicrosoft.ini" }, { label: "ACL4SSR_WithGFW 本地 GFW列表", value: "config/ACL4SSR_WithGFW.ini" } ] }, ``` #### 配置完毕刷新前端网页 配置完毕以后，程序会自动更新，再次刷新前端网页，会出现刚才添加的相关规则，如图所示：
至此，我们的前端搭建完毕，我们现在需要打包，生成一个发布目录 首先停止调试程序，CTRL+C ，退出当前调试，然后执行下面的命令进行打包： ``` 1，yarn build ``` 执行以下打包命令，在 `/root/sub-web` 下面会生成一个 `dist` 目录，这个目录即为网页的发布目录。 ### 安装BT面板并设置网站 CentOS 系统运行下面的命令安装宝塔面板 ``` 1，yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ``` Ubuntu安装命令 ``` 1，wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ``` Debian安装命令 ``` 1，wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && bash install.sh ``` 宝塔环境的安装以及相关的站点设置和反向代理，emmm等有时间，我再慢慢补。 ### SubConverter后台搭建 #### 下载并解压后端程序 ``` 1，cd /root 2，wget https://github.com/tindy2013/subconverter/releases/download/v0.7.2/subconverter_linux64.tar.gz 3，tar -zxvf subconverter_linux64.tar.gz ``` 完成以后，在 `/root` 文件夹下会多出一个 `subconverter` 的文件夹，这个就是我们的后端程序 #### 修改配置文件参数 现在我们需要修改后端配置文件中的一些参数 找到VPS文件 `/root/subconverter/pref.ini` ，找到如下参数进行修改 ``` 1，api_access_token=jrm!wmb1jxv*zvf*PCQf #随意设置自己知道就行 2，managed_config_prefix=https://sua.mints7.com #设置成我们刚刚解析的后端域名 3，listen=127.0.0.1 #这里改成 127.0.0.1 进行反代 ``` #### 创建服务进程并启动 接下来我们需要创建一个服务，让VPS每次重启或是开机自动运行后端程序 找到VPS目录 `/etc/systemd/system`，创建一个名为 `sub.service` 的文件 打开文件，贴入以下内容，保存。 ``` [Unit] Description=A API For Subscription Convert After=network.target [Service] Type=simple ExecStart=/root/subconverter/subconverter WorkingDirectory=/root/subconverter Restart=always RestartSec=10 [Install] WantedBy=multi-user.target ``` 检查运行状态以及设置开机自启 ``` systemctl daemon-reload systemctl start sub systemctl enable sub systemctl status sub ``` 到这里，后端也就搭建完毕了，我们现在可以在浏览器里面访问我们的后端了 （正常的话，会返回sub的版本号：subconverter v0.7.2） ### 后记 OK，sub-web至此搭建完成，教程也结束了。 然后，由于这个账号密码是今天才找回的，教程啥的，都是临时临头整的，缺了很多图片以及宝塔的一些设置，应该会在这几天慢慢补齐，当然，前提是我要记得，并且有时间。貌似上次编辑这个wiki是在一两年前？ --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.mints7.cc/da-jian-jiao-cheng/subweb-da-jian.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.