记录一下，教程十分详细。
运行环境，Debian9
项目地址：
1.clash：GitHub
2.前端subconverter: GitHub
3.后端sub-web : github

教程开始：

一.前端sub-web搭建教程

1.第一步，安装必要环境 apt update && apt-get upgrade apt-get install -y curl wget sudo nodejs git npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install -g yarn 2.命令执行完毕以后，请运行下面的代码查询 Node 与 Yarn 是否安装成功，若是成功会返回版本号，如下图： 
node -v
yarn --version


3.下载并安装 Sub-Web
拉取 sub-web 程序，并进入 sub-web 文件夹

git clone https://github.com/CareyWang/sub-web.git
cd sub-web

在项目目录中安装构建依赖项，构建的过程稍微有点长

yarn install

如果出现错误，进行这个设置之后，会正常。 

yarn config set ignore-engines true

使用 webpack 运行 Web 客户端以进行本地开发。

yarn serve

到目前为止，浏览器访问 http://服务器ip:8080/ 应该可以进行前端 sub-web 的预览了。

4.修改默认后端地址
找到 VPS /root/sub-web/src/views/Subconverter.vue 文件
找到 257 行 backendOptions:（写博客的时候是这行），替换后面的 http://127.0.0.1:25500/sub? 为
https://你的前端域名/sub?
（注意两个地方：域名为你刚才准备的后端域名，是 https 而非 http）

5.更换远程规则
因为这个版本更新以后，规则方面很少，经常用到的一些经典的 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 ，退出当前调试，然后执行下面的命令进行打包：

yarn build

执行以下打包命令，在 /root/sub-web 下面会生成一个 dist 目录，这个目录即为网页的发布目录。

6.我们选择项目根目录下的 .env 并根据自己需求修改『下面是一些相关参数的含义』：

VUE_APP_PROJECT：前端项目地址，即点击前端网页Github图标会跳转的地址
VUE_APP_BOT_LINK：TG链接，即点击前端网页TG图标会跳转的地址
VUE_APP_BACKEND_RELEASE：后端项目地址，无需修改
VUE_APP_SUBCONVERTER_REMOTE_CONFIG：远程配置，无需修改
VUE_APP_SUBCONVERTER_DEFAULT_BACKEND：API后端地址，请修改成我们自己想用的转换网址
VUE_APP_MYURLS_DEFAULT_BACKEND：短链接后端，如果你有自己的短链转换服务，可修改
VUE_APP_CONFIG_UPLOAD_BACKEND：文本托管后端，如果你有自己的，可修改

二、后端subconverter搭建教程

1.下载并解压后端程序 
cd /root
wget https://github.com/tindy2013/subconverter/releases/download/v0.6.3/subconverter_linux64.tar.gz
tar -zxvf subconverter_linux64.tar.gz

完成以后，在

/root
文件夹下会多出一个
subconverter
的文件夹，这个就是我们的后端程序
完成以后，在/root文件夹下会多出一个subconverter的文件夹，这个就是我们的后端程序

2.修改配置文件参数
现在我们需要修改后端配置文件中的一些参数
找到VPS文件 /root/subconverter/pref.ini ，找到如下参数进行修改

api_access_token=abcdefg                #随意设置自己知道就行
managed_config_prefix=https://后端域名   #设置成我们刚刚解析的后端域名
listen=127.0.0.1                        #这里改成 127.0.0.1 进行反代

3.创建服务进程并启动
接下来我们需要创建一个服务，让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

到这里，后端也就搭建完毕了。

三、Caddy 网页反代

1.安装caddy 
wget -N --no-check-certificate https://raw.githubusercontent.com/seal0207/caddy_install/master/caddy_install.sh && chmod +x caddy_install.sh && bash caddy_install.sh

2.配置caddy,修改下列域名执行：

echo "
https://后端域名 {
 gzip
 proxy / 127.0.0.1:25500 {
    websocket
    header_upstream Host {host}
    header_upstream X-Real-IP {remote}
    header_upstream X-Forwarded-For {remote}
    header_upstream X-Forwarded-Port {server_port}
    header_upstream X-Forwarded-Proto {scheme}
  }
}

https://前端域名 {
 root /root/sub-web/dist
 gzip
} " > /usr/local/caddy/Caddyfile

重启caddy
service restart caddy
到此，教程结束。

最后修改：2021 年 03 月 01 日 10 : 30 PM
© 允许规范转载