pikpak网页版部署方式

将PikPak网页版部署在个人服务器上

PikPak介绍

PikPak一款来自新加坡的(网盘+离线下载+资源抓取)网盘,支持简体中文,网盘有6T空间(会员),目前免费提供会员兑换码。离线下载大概 70~80% 的概率能秒传,不能秒的下载成功率也很高(比百度盘的离线强很多,甚至于很多死的种子也可以下载),同时另外支持抓取(电报、Tiktok、Twitter)的资源。

注意:官方目前只有Android App,网页端、Win、Mac均为第三方开发

PikPak官方不对第三方客户端“品质”或“安全性”提供任何形式保证!

现在来说一下如何部署mumuchenchen大佬抓包开发的网页端

个人网页版部署

项目地址:pikpak web

项目采用的是Vite2+Vue3+Ts+axios

项目打包

  • 环境需要:nodejs、git、npm(包管理器,yarn、pnpm、ni均可)

Clone Project

执行以下命令,将项目clone至本地

1
git clone git@github.com:mumuchenchen/pikpak.git

执行以下命令,安装项目所需要的包

1
2
3
cd pikpak
npm install
#其他包管理使用方式自行搜索

等到所需包安装完毕后,执行以下命令:

1
2
npx vite
#尝试运行项目,看能否在本地运行

如果只是想打包项目出来的话只需要执行以下命令即可:

1
npx vite build

注意:这里打包完成的项目自带一个前缀路径pikpak,因此在部署到服务器上时,应当是放在网站根目录下的pikpak文件夹(自己建立)内

如果想自定义前缀可以按如下更改:

打开项目目录下的vite.config.ts文件,该文件为项目的vite配置文件

1
base: mode === 'development' ? '' : '/pikpak'

将上方的/pikpak修改为想要更改的路径即可,如/ceshi/pikpak,如果不想在增加额外路径直接将改行删除即可

也可以选择在打包时传入参数如

1
2
npx vite build --base=/pikpak
#将会在路径前自动加入pikpak,效果同上方配置文件

打包完成后的项目默认在项目目录下dist文件夹内,将里面所有文件直接放到服务器的对应网站根目录下即可!

进阶配置

vite配置

在本地通过vite实现对项目的gzip压缩

方法很简单,执行以下命令:

1
2
npm i -D vite-plugin-compression
#安装vite官方制作的gzip插件

在vite.config.ts文件的import vue from '@vitejs/plugin-vue'下增加一行import viteCompression from 'vite-plugin-compression'(用于导入包),再将plugins: [vue()]字段修改为plugins: [vue(), viteCompression()],此时重新打包即可,打包完成的dist文件夹中会存在诸如以下形式的文件

这即是在本地配置完成gzip打包

nginx配置

nginx具体如何安装方法不在这里阐述,请读者自行在网络搜索或者查看官方文档!

在nginx对应域名的serve模块中添加以下字段:

1
2
3
4
5
6
7
8
9
gzip on;
gzip_static on;
gzip_vary on;
gzip_http_version 1.1;
gzip_proxied expired no-cache no-store private auth;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_min_length 256;
gzip_types application/atom+xml application/geo+json application/javascript application/x-javascript application/json application/ld+json application/manifest+json application/rdf+xml application/rss+xml application/xhtml+xml application/xml font/eot font/otf font/ttf image/svg+xml text/css text/javascript text/plain text/xml;
命令 作用
gzip 是否开启gzip
gzip_static 读取预先压缩的gz文件
gzip_vary 是否传输gzip压缩标志
gzip_http_version 版本,默认是1.1, 使用 gzip_static,就是要 1.1的版本
gzip_proxied Nginx作为反向代理的时候启用,开启或者关闭后端服务器返回的结果
gzip_comp_level 推荐6 压缩级别(级别越高,压的越小,越浪费CPU计算资源)
gzip_buffers 缓冲(压缩在内存中缓冲几块? 每块多大?)
gzip_min_length 开始压缩的最小长度
gzip_types 对哪些类型的文件用压缩

字段添加完成后将nginx重启配置即可!