PassNAT LogoPassNAT

PicX GitHub图床工具自建部署教程,NAS极简配置静态文件服务。外网访问配置帕斯内网穿透实现随时随地管理图床

作者

小编

发布时间

Curving abstract shapes with an orange and blue gradient

根据我获取到的项目信息,PicX 是一个基于 GitHub API 开发的图床工具,但该项目并没有提供 Docker 部署方式。这是一个前端项目,主要通过在线访问使用。让我为您提供一个基于项目特点的部署教程:

项目介绍

PicX 是一款基于 GitHub API 开发的图床工具,提供图片上传托管、生成图片链接和常用图片工具箱服务。它基于 Vue 3 + Element Plus + TypeScript 构建,支持多种图片上传方式、批量操作、图片压缩、水印添加等功能。

PicX 最大的亮点是完全免费且无需自建服务器,所有图片都托管在 GitHub 仓库中,通过 GitHub API 进行管理。界面美观现代,支持暗夜模式,操作简单易用。项目完全开源,数据安全可靠,支持 PWA 离线使用。

由于 PicX 是纯前端项目,可以直接在线使用,也可以自行部署到任何静态网站托管服务上。

项目地址:点我跳转

部署安装

如需在外也打开项目需要配置内网穿透使用,点击前往 帕斯内网穿透,先注册好账号备用。

由于 PicX 是纯前端项目,官方并未提供 Docker 镜像。但我们可以使用 Nginx 容器来部署构建后的静态文件。

打开飞牛 NAS 或其他的 NAS 设备 点击本地镜像-添加镜像-从 URL 添加。这一步先添加 Nginx 镜像

镜像填 nginx:alpine 等待下载完成后点击启动按钮启动容器

勾选开机自动启动后下一步,端口设置这里。请设置容器端口 80 映射到主机端口 3000(如果端口冲突可以修改主机端口,但容器内端口必须保持 80)

存储位置这里,需要创建一个文件夹用于存放 PicX 的静态文件。在 NAS 上创建 /docker/picx/html 文件夹,然后映射到容器的 /usr/share/nginx/html 目录。

环境变量设置:无需设置任何环境变量

其他的都不用填写,直接下一步启动就好了。

重要步骤:部署静态文件

1. 从 PicX Releases 下载最新版本的构建文件 2. 解压后将所有文件上传到刚才创建的 /docker/picx/html 文件夹中 3. 重启 Nginx 容器

创建成功后可以访问 ip:3000 到这里就可以正常显示项目了

使用说明:

- 首次使用需要通过 GitHub OAuth 授权或填写 GitHub Token 登录 - 完成图床配置后即可开始上传图片 - 支持拖拽、复制粘贴、选择文件等多种上传方式

穿透公网

打开帕斯内网穿透控制台,点击隧道管理-隧道列表

点击创建新隧道

隧道节点可以随便选,一般选个负载低的就可以

接下来填写信息,隧道名称可以随便填写

本地 IP 默认就可以

传输协议可以选择 TCP 也可以选择 HTTP/HTTPS

HTTP 就是域名的形式,教程以使用 TCP 为演示

本项目中如果没有修改端口的话默认是 3000 端口,这里本地端口就填 3000

远程端口可以留空也可以自定义。

填写完毕点击确定

点击刚才创建好的隧道,点击获取配置文件

回到飞牛 NAS,点击应用中心下载 frpc 客户端

打开后粘贴刚才复制的配置文件,点击确定即可

复制帕斯内网穿透控制台的访问 IP 和端口

可以看到已经正常穿透成功了

注意事项:

- PicX 需要 GitHub Token 才能正常使用,请提前准备好 GitHub 账号 - 建议使用官方在线版本 https://picx.xpoet.cn 以获得最佳体验 - 自部署版本需要手动更新,官方在线版本会自动更新

本篇教程结束