This page looks best with JavaScript enabled

Piped | 利用Docker-compose搭建YouTube开源替代前端

自由地观看和收听Youtube内容

 ·  ☕ 4 min read

前言

今天在翻lala的博客旧文的时候发现了Yotter，一个Youtube/Twitter替代前端。想起bgme站长搭建过Nitter（Twitter替代前端），为了隐私友好就想搭建一个类似的平台。不过Yotter项目正好在几月前停止维护了，这时我发现了Piped，遂有此文。

通常情况下这类开源前端都是及其重视隐私的，而且都鼓励自托管，Piped也不例外。关于隐私方面的更多介绍请看Why did I create Piped?。对于没有技术基础/没有条件自托管的朋友，开发者也提供了自己的服务：https://piped.kavin.rocks/。

Piped
Piped: 登录后的界面

搭建过程

首先安装git，docker和docker-compose等必要工具：

apt -y update
apt -y install curl nginx python-certbot-nginx
curl -sSL https://get.docker.com/ | sh
systemctl start docker
systemctl enable docker nginx
curl -L "https://github.com/docker/compose/releases/download/v2.2.3/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
#以v2.2.3为例，这里替换为最新版本
chmod +x /usr/local/bin/docker-compose
apt install git-all

在任意目录下运行git clone https://github.com/TeamPiped/Piped-Docker && cd Piped-Docker下载必要配置文件并跳转至文件夹，其中包含docker-compose.yml。

运行文件夹中的脚本：

./configure-instance.sh

按顺序填写三个域名：

piped.yourdomain.com   #前端域名
pipedapi.yourdomain.com   #后台域名
pipedproxy.yourdomain.com   #代理域名

然后填写代理方式，填写caddy或nginx。由于nginx我比较熟悉所以我选用nginx。

应答流程结束。

虽然此时直接运行docker-compose up -d即可一步搭建，但安全起见先编辑一下docker-compose.yml文件：

nano docker-compose.yml

可能需要改动两个内容：数据库密码以及端口号。贴一下我的配置，注意看注释部分即可，不能直接抄：

services:
    pipedfrontend:
        image: 1337kavin/piped-frontend:latest
        restart: unless-stopped
        depends_on:
            - piped
        container_name: piped-frontend
        entrypoint: ash -c 'sed -i s/pipedapi.kavin.rocks/pipedapi.yourdomain.com/g /usr/share/nginx/html/js/* && /docker-entrypoint.sh && nginx -g "daemon off;"'
    ytproxy:
        image: 1337kavin/ytproxy:latest
        restart: unless-stopped
        volumes:
            - ytproxy:/app/socket
        container_name: ytproxy
    piped:
        image: 1337kavin/piped:latest
        restart: unless-stopped
        volumes:
            - ./config/config.properties:/app/config.properties:ro
        depends_on:
            - postgres
        container_name: piped-backend
    varnish:
        image: varnish:7.0-alpine
        restart: unless-stopped
        volumes:
            - ./config/default.vcl:/etc/varnish/default.vcl:ro
        container_name: varnish
        depends_on:
            - piped
        healthcheck:
            test: ash -c "wget --no-verbose --tries=1 --spider 127.0.0.1:80/trending?region=US || (varnishreload && exit 1)"
            interval: 10s
            timeout: 10s
            retries: 1
    nginx:
        image: nginx:mainline-alpine
        restart: unless-stopped
        ports:
            - "8080:80"  #8080为对外开放端口，如果8080端口已使用请改为其他任意可用端口
        volumes:
            - ./config/nginx.conf:/etc/nginx/nginx.conf:ro
            - ./config/pipedapi.conf:/etc/nginx/conf.d/pipedapi.conf:ro
            - ./config/pipedproxy.conf:/etc/nginx/conf.d/pipedproxy.conf:ro
            - ./config/pipedfrontend.conf:/etc/nginx/conf.d/pipedfrontend.conf:ro
            - ./config/ytproxy.conf:/etc/nginx/snippets/ytproxy.conf:ro
            - ytproxy:/var/run/ytproxy
        container_name: nginx
        depends_on:
            - piped
            - varnish
            - ytproxy
            - pipedfrontend
    postgres:
        image: postgres:13-alpine
        restart: unless-stopped
        volumes:
            - ./data/db:/var/lib/postgresql/data
        environment:
            - POSTGRES_DB=piped
            - POSTGRES_USER=piped
            - POSTGRES_PASSWORD=yourpassw0rd  #数据库密码
        container_name: postgres
    watchtower:
        image: containrrr/watchtower
        restart: always
        volumes:
            - /var/run/docker.sock:/var/run/docker.sock
            - /etc/timezone:/etc/timezone:ro
        environment:
            - WATCHTOWER_CLEANUP=true
            - WATCHTOWER_INCLUDE_RESTARTING=true
        container_name: watchtower
        command: piped-frontend piped-backend ytproxy varnish nginx postgres watchtower
volumes:
    ytproxy:

随后运行docker-compose up -d，Piped就搭好了。此时还不算完成，需要为Piped添加反向代理。

Nginx反向代理

首先去DNS服务商添加一条指向服务器ip，内容为域名的A记录，然后回到服务器运行以下命令：

sudo -i   #切换至root用户
apt install nginx -y    #安装nginx
apt install snapd
snap install core   #安装snap
snap install certbot --classic  #使用snap安装certbot

由于服务器中已经有nginx容器，那么只需要将虚拟机内的端口映射到主机端口。运行nano /etc/nginx/conf.d/piped.conf，内容如下：

server {
    listen 80;
    server_name piped.yourdomain.com pipedapi.yourdomain.com pipedproxy.yourdomain.com;  #填写自己设置的三个域名，以空格分开

    location / {
       proxy_pass http://127.0.0.1:8080;   #8080改为对外开放端口
       proxy_set_header Host $host;
    }
}

测试配置文件是否有错误（试运行）：

nginx -t

若没有错误，生效新的配置文件并运行 Nginx，开机启动：

nginx -s reload
systemctl start nginx
systemctl enable nginx

运行sudo certbot --nginx获取SSL证书。

使用

Piped支持以HTML语法嵌入视频，以PizaCG的Unknown Mother-Goose这支影片为例，将src项设为https://piped.yourdomain.com/embed/r9V5gy-s2J0即可嵌入视频。例如https://piped.kavin.rocks/embed/r9V5gy-s2J0。

在Hugo博客中，可以使用短代码嵌入视频。在/root/layouts/shortcode/下新建piped.html，写入内容：

<div><iframe id="piped-player" src="https://piped.kavin.rocks/embed/{{ index .Params 0 }}" scrolling="no" frameborder="no" allowfullscreen="true" autoplay="0"> </iframe></div>
<style>
    // 嵌入piped视频
    #piped-player {
        width: 100%;
        height: 355px;   //按需调整高度
    }

    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
        #piped-player {
            width: 100%;
            height: 200px;   //按需调整高度（移动端）
        }
    }
</style>

用法：找到你喜欢的视频，复制链接中embed/后的内容，例如r9V5gy-s2J0，然后在markdown中输入：

1

{{< piped r9V5gy-s2J0 >}}

效果：

对比一下Youtube：

Roelxy
WRITTEN BY
Roelxy
新世紀摸魚戰士

See Also