首页 > 编程学习 > PikPak网页版

PikPak网页版

发布时间:2022/2/7 9:43:59

PikPak网页版

使用Github+Cloudflare Worker 搭建免费的PikPak网页版

​ PikPak这个网盘十分好用,但是目前官方只有安卓客户端,对于PC和MAC电脑用户就十分不友好。
​ 好在网友的力量是强大的,现在Win,Mac,Web的第三方客户端都被开发了出来。
​ 这次就是水一篇教程,教大家怎么用Github+cloudflare worker搭建一个免费的PikPak网页版出来,教程偏新手向。

提醒:这样部署的需要你能够访问github,不然你还要再用Cloudflare Worker部署一个反向代理服务,去反向代理github,反代的教程一搜一大把,我就不说了。

1、注册必须的账号

分别是pikpak github cloudflare,如果你已经都有了,请跳过这一步

1.1、pikpak账号

使用官方的安卓客户端注册,没有安卓手机的,要么借一个手机,要么电脑上用模拟器,要么电脑上用第三方客户端我创建的注册吧。

1.2、GitHub

注册地址(https://github.com/signup)
输入邮箱地址和密码,选择免费计划,验证邮箱地址,按照提示操作,创建您的个人帐户。
PS:如果你感觉部分内容是英文的识别困难,用浏览器的翻译功能吧。

1.3、CloudFlare

注册地址(https://dash.cloudflare.com/sign-up)
输入您的电子邮箱地址和密码。单击 Create Account。
PS:CloudFlare有中文界面,在右上角切换

2、Cloudflare Workers部署

  1. 登录你的Cloudflare

  2. 在主页右侧找到【Workers】
    请添加图片描述

  3. 点进【Workers】选择一个预设的子域,点击【set up】之后,我们选择免费套餐。
    请添加图片描述

  4. 验证完邮箱后再点进【Workers】,选择【创建Workers】
    在这里插入图片描述

  5. (非必须)在服务名称里起个好记好写的名字,比如pikpak,方便自己记忆。记住下边写的那行
    您的服务将被部署到:https://pikpak.XXXXX.workers.dev

    下边的【简介】、【HTTP处理程序】随便选一个就行。点【创建服务】
    在这里插入图片描述
    请添加图片描述

  6. 删除页面左侧代码框内一切内容后,把这里的(https://github.com/mumuchenchen/pikpak/blob/main/cf-worker/index.js) 粘贴到页面左侧的输入框,覆盖原有内容。代码如下(我这里拷贝好了):

    addEventListener('fetch', event => {
      event.passThroughOnException()
    
      event.respondWith(handleRequest(event))
    })
    
    /**
    * Respond to the request
    * @param {Request} request
    */
    async function handleRequest(event) {
      const { request } = event;
    
      //请求头部、返回对象
      let reqHeaders = new Headers(request.headers),
          outBody, outStatus = 200, outStatusText = 'OK', outCt = null, outHeaders = new Headers({
              "Access-Control-Allow-Origin": reqHeaders.get('Origin'),
              "Access-Control-Allow-Methods": "GET, POST, PUT, PATCH, DELETE, OPTIONS",
              "Access-Control-Allow-Headers": reqHeaders.get('Access-Control-Allow-Headers') || "Accept, Authorization, Cache-Control, Content-Type, DNT, If-Modified-Since, Keep-Alive, Origin, User-Agent, X-Requested-With, Token, x-access-token, Notion-Version"
          });
    
      try {
          //取域名第一个斜杠后的所有信息为代理链接
          let url = request.url.substr(8);
          url = decodeURIComponent(url.substr(url.indexOf('/') + 1));
    
          //需要忽略的代理
          if (request.method == "OPTIONS" && reqHeaders.has('access-control-request-headers')) {
              //输出提示
              return new Response(null, PREFLIGHT_INIT)
          }
          else if(url.length < 3 || url.indexOf('.') == -1 || url == "favicon.ico" || url == "robots.txt") {
              return Response.redirect('https://baidu.com', 301)
          }
          //阻断
          else if (blocker.check(url)) {
              return Response.redirect('https://baidu.com', 301)
          }
          else {
              //补上前缀 http://
              url = url.replace(/https:(\/)*/,'https://').replace(/http:(\/)*/, 'http://')
              if (url.indexOf("://") == -1) {
                  url = "http://" + url;
              }
              //构建 fetch 参数
              let fp = {
                  method: request.method,
                  headers: {}
              }
    
              //保留头部其它信息
              let he = reqHeaders.entries();
              for (let h of he) {
                  if (!['content-length'].includes(h[0])) {
                      fp.headers[h[0]] = h[1];
                  }
              }
              // 是否带 body
              if (["POST", "PUT", "PATCH", "DELETE"].indexOf(request.method) >= 0) {
                  const ct = (reqHeaders.get('content-type') || "").toLowerCase();
                  if (ct.includes('application/json')) {
                        let requestJSON = await request.json()
                        console.log(typeof requestJSON)
                      fp.body = JSON.stringify(requestJSON);
                  } else if (ct.includes('application/text') || ct.includes('text/html')) {
                      fp.body = await request.text();
                  } else if (ct.includes('form')) {
                      fp.body = await request.formData();
                  } else {
                      fp.body = await request.blob();
                  }
              }
              // 发起 fetch
              let fr = (await fetch(url, fp));
              outCt = fr.headers.get('content-type');
              if(outCt.includes('application/text') || outCt.includes('text/html')) {
                try {
                  // 添加base
                  let newFr = new HTMLRewriter()
                  .on("head", {
                    element(element) {
                      element.prepend(`<base href="${url}" />`, {
                        html: true
                      })
                    },
                  })
                  .transform(fr)
                  fr = newFr
                } catch(e) {
                }
              }
              outStatus = fr.status;
              outStatusText = fr.statusText;
              outBody = fr.body;
          }
      } catch (err) {
          outCt = "application/json";
          outBody = JSON.stringify({
              code: -1,
              msg: JSON.stringify(err.stack) || err
          });
      }
    
      //设置类型
      if (outCt && outCt != "") {
          outHeaders.set("content-type", outCt);
      }
    
      let response = new Response(outBody, {
          status: outStatus,
          statusText: outStatusText,
          headers: outHeaders
      })
    
      return response;
    
      // return new Response('OK', { status: 200 })
    }
    
    /**
    * 阻断器
    */
    const blocker = {
      keys: [".m3u8", ".ts", ".acc", ".m4s", "photocall.tv", "googlevideo.com"],
      check: function (url) {
          url = url.toLowerCase();
          let len = blocker.keys.filter(x => url.includes(x)).length;
          return len != 0;
      }
    }
    
  7. 点击【保存并部署】按钮,

  8. 记住你在第5步里的Worker的域名本文是https://aaa.zzzwxyz.workers.dev之后要用到

3、GitHub部署

3.1、Github Aciton

  1. 登录你的Github,并且进入项目(https://github.com/mumuchenchen/pikpak)

  2. 点击右上角的【Fork】将项目复刻到你自己的仓库

  3. 点击上侧一排的最后一个按钮【settings】切换到设置页面

  4. 选择左侧的【secrets】项,点击【new repository secrets】

    请添加图片描述

  5. Name填CF_DOMAIN,Value填你Worker的域名(Cloudflare Workers部署第五步里让你记住的那个,比如)pikpak.XXXX.workers.dev(注意只是域名本身,不带https://之类的累赘),点【Add secret】

  6. 如果你修改了仓库名则进行这一步,否则直接执行下边的第7步
    点击【new repository secrets】,Name填BASE_PATH,Value填你的仓库名如tjskypikpak

  7. 点击上侧一排的【actions】按钮,点【I understand my workdlows, go ahead and enable them】表示你明白你要干啥。
    请添加图片描述

  8. 点击左侧的【deploy】,点右侧的【Run workflow ▽】切换到main分支,选择绿色的【Run workflow】 按钮。等待代码被构架并运行,如果没出什么问题,你会看到一个绿色√出现。(不超过5分钟)

3.2 、Github Page

  1. 再次点击上侧那一排按钮中最后的【settings】切换到设置页面

  2. 这次选择左侧的【pages】

  3. 把Source这一项的branch切换到【gh-pages】【/(root)】,然后点击保存。

  4. 等1分钟左右你就可以通过页面上部显示的
    请添加图片描述

  5. 到这一步就弄完了,按上面绿框给的地址访问就行

4、后续更新和细节

4.1、 后期更新

因为网页版还在不断的迭代中,上游代码更新后,如果你希望更新,那么需要这样更新一下

更新正常流程

  1. 回到你的Github主页(https://github.com/)切换到项目。

  2. 点击【Fetch upsteam ▽】,如果上游有更新,【Fetch and merge】按钮会是可点击的,选择【Fetch and merge】。

  3. 正常来说,没自己改过文件,就不会出问题,Github Aciton会自动重新deploy,在几分钟内就更新好了。如果出现无法合并,deploy时出错等等问题,要么自己介入处理导致了报错的文件,要么用更新出错时流程更新吧。

    PS:只需合并main分支即可,不需要合并gh-pages分支,合并main后deploy会更新gh_pages分支内容。

  4. 检查一下https://github.com/mumuchenchen/pikpak/blob/main/cf-worker/index.js 在你部署后有没有更新过,如果有更新,将更新后的代码,更新到你的Workers中,重新部署Workers

更新出错时流程

这个操作不是最简单的,但是是最不容易出错的方式

  1. 首先注意一下https://github.com/mumuchenchen/pikpak/blob/main/cf-worker/index.js 在你部署后有没有更新过,如果有更新,将更新后的代码,更新到你的Workers中,重新部署Workers(或者就直接不管是否更新,就直接无脑复制过去重新部署)
  2. 回到你的Github主页(https://github.com/)切换到项目,选择【settings】,拉到底,在Danger Zone中找到【Delete this repository】,在输入框中输入他要求的XXXX/pikpak删除整个仓库。
  3. 然后重新执行一遍 GitHub部署 操作

一些可能需要你注意的东西

  • 最好自己部署并审查代码,毕竟涉及了一次反代,如果在反带部分动动手脚,反代的搭建者是很容易知道你存了什么东西的。(当然能动手脚的地方不止这一处,想干坏事的人的方法多了)
  1. 没必要绑定自己的域名,用github.io就好,github的那个绑定咋说呢,广播的有点慢。进行绑定子域时,站点会有不短的一段时间都无法访问,尤其是在你设置了HTTPS时。
  2. 一般来说没必要改仓库名,保持是XXXX/pikpak,如果你真的希望改,请新建一个secrets,Name填BASE_PATH,Value填你的仓库名如/tjskypikpak
  3. 如果你想绑自己的域名,因为绑定后地址就从类似tjsky.github.io/pikpak/变成了类似pikpak.tjsky.net的无子目录状态,所以新建的secrets,Name填BASE_PATH,Value填一个/就可以了。
  4. Cloudflare Workers是有限制的,免费计划每分钟最多1000次请求,每天最多10W次请求,超了就会报错。
  5. 这个的部署方式非常多,比如你可以用cloudflare page代替GitHub page部署网站,可以用自己的服务器,替代Cloudflare Workers去做反代。。。等等很多方式。
  6. 最近官方出了邀请新用户得会员的活动,这里说一下怎么把网页版登录页里的邀请注册换成你自己的:

– 首先在官方APP里得到你的邀请链接(类似https://toapp.mypikpak.com/activity/invited?code=367394&g=1)
– 然后新建一个secrets,Name填INVITE_CODE,Value填邀请链接中的数字,比如我的是367394

  • 20220101更新:如果你用的是最新代码部署,你的网页版右侧栏有个【邀请】标签,可以直接看到你的邀请链接和下载你的专属邀请用APK。对于IOS用户十分方便
  1. 可以在secrets里自定义的东西

    NameValue
    CF_DOMAINCF反代的域名(写DIRECT就是不走反代)
    BASE_PATH自定义仓库名
    INVITE_CODE设置你的专属邀请链接
    CNAME_DOMAIN如果你设置了CNAME这里写你的域名
  2. 源码中目前删除了【资源库】,这是因为官方出于当地法律风险(pikpak是新加坡公司,有些类型的资源(比如成人内容,盗版电影)在网盘里持有(储存)是合法的,但是传播(分享)就会给pikpak带来被警方上门的风险)不建议搞这个,所以大佬给去除了。
    这是个开源的东西,有代码基础的估计一看历史修改记录就懂怎么改回来。:joy:
    src/router/index.ts(40~50行左右)
    src/views/layout/index.vue(120~130行左右)
    src/views/list.vue(1090~1010行左右)

Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000