一键部署！一款开源自托管的照片画廊神器！
<p>大家好，我是 <code>Java陈序员</code>。</p><p>在这个数字时代，我们的手机和相机里存满了无数珍贵的照片 —— 家人的笑脸、旅行的风景、生活的点滴瞬间。但这些回忆往往被淹没在杂乱的相册里，要么受制于云存储的隐私风险，要么因格式兼容问题难以完整呈现。</p>
<p>这时候，我们可以搭建一个完全属于自己、能按时间和地点梳理回忆的照片画廊。</p>
<p>今天，给大家推荐一款专注于流畅体验的自托管个人画廊神器，支持一键部署！</p>
<blockquote>
<p>关注微信公众号：【Java陈序员】，获取<strong>开源项目分享、AI副业分享、超200本经典计算机电子书籍等。</strong></p>
</blockquote>
<h2 id="项目介绍">项目介绍</h2>
<p><code>chronoframe</code> —— 一个丝滑的照片展示和管理应用，支持多种图片格式和大尺寸图片渲染。</p>
<p><strong>功能特色</strong>：</p>
<ul>
<li><strong>强大的照片管理</strong>：支持通过网页界面轻松管理和浏览照片，并在地图上查看照片拍摄地点</li>
<li><strong>轻量部署体验</strong>：基于 Docker 一键部署，无需额外配置数据库（内置 SQLite），几分钟内即可完成私有化部署</li>
<li><strong>多存储后端适配</strong>：支持本地文件系统、S3 兼容存储多种存储方式，满足不同场景需求</li>
<li><strong>地图可视化浏览</strong>：自动提取照片 GPS 信息，使用 Mapbox 进行地理编码，在地图上展示照片拍摄位置</li>
<li><strong>响应式设计</strong>：完美适配桌面端和移动端，支持触摸操作和手势控制，提供原生应用般的体验</li>
<li><strong>Live/Motion Photo 支持</strong>：完整支持 Apple LivePhoto 格式和 Google 标准的 Motion Photo，自动检测和处理 MOV 视频文件，保留动态照片效果</li>
</ul>
<p><strong>技术栈</strong>：Nuxt4 + TypeScript + TailwindCSS + Drizzle ORM</p>
<h2 id="快速上手">快速上手</h2>
<h3 id="配置信息">配置信息</h3>
<p>创建 <code>.env</code> 文件，下面是使用本地存储的最小示例。</p>
<pre><code class="language-bash"># 管理员邮箱（必须）
CFRAME_ADMIN_EMAIL=
# 管理员用户名（可选，默认 ChronoFrame）
CFRAME_ADMIN_NAME=
# 管理员密码（可选，默认 CF1234@!）
CFRAME_ADMIN_PASSWORD=
# 站点信息（均可选）
NUXT_PUBLIC_APP_TITLE=
NUXT_PUBLIC_APP_SLOGAN=
NUXT_PUBLIC_APP_AUTHOR=
NUXT_PUBLIC_APP_AVATAR_URL=
# 地图提供器 (maplibre/mapbox)
NUXT_PUBLIC_MAP_PROVIDER=maplibre
# 使用 MapLibre 需要 MapTiler 访问令牌
NUXT_PUBLIC_MAP_MAPLIBRE_TOKEN=
# 使用 Mapbox 需要 Mapbox 访问令牌
NUXT_PUBLIC_MAPBOX_ACCESS_TOKEN=
# 存储提供者（local 或 s3 或 openlist）
NUXT_STORAGE_PROVIDER=local
NUXT_PROVIDER_LOCAL_PATH=/app/data/storage
# 会话密码（必须，32 位随机字符串）
NUXT_SESSION_PASSWORD=
# 是否开启允许 IP 直接访问
NUXT_ALLOW_INSECURE_COOKIE=true
</code></pre>
<p>如选择使用 S3 存储，请将存储部分的配置替换为：</p>
<pre><code class="language-bash">NUXT_STORAGE_PROVIDER=s3
NUXT_PROVIDER_S3_ENDPOINT=
NUXT_PROVIDER_S3_BUCKET=chronoframe
NUXT_PROVIDER_S3_REGION=auto
NUXT_PROVIDER_S3_ACCESS_KEY_ID=
NUXT_PROVIDER_S3_SECRET_ACCESS_KEY=
NUXT_PROVIDER_S3_PREFIX=photos/
NUXT_PROVIDER_S3_CDN_URL=
</code></pre>
<p>若选择使用 OPENLIST，请将存储部分的配置替换为：</p>
<pre><code class="language-bash">NUXT_STORAGE_PROVIDER=openlist
NUXT_PROVIDER_OPENLIST_BASE_URL=https://openlist.example.com
NUXT_PROVIDER_OPENLIST_ROOT_PATH=/115pan/chronoframe
NUXT_PROVIDER_OPENLIST_TOKEN=your-static-token
</code></pre>
<p>如果需要集成 Github 登录，需配置 GitHub OAuth 变量：</p>
<pre><code class="language-bash">NUXT_OAUTH_GITHUB_CLIENT_ID=
NUXT_OAUTH_GITHUB_CLIENT_SECRET=
</code></pre>
<h3 id="docker-部署">Docker 部署</h3>
<p>1、拉取镜像</p>
<pre><code class="language-bash">docker pull ghcr.io/hoshinosuzumi/chronoframe:latest
</code></pre>
<p>2、创建挂载目录和配置文件</p>
<pre><code class="language-bash">mkdir -p /data/software/chronoframe/data
cd /data/software/chronoframe
# 配置文件参考前文的配置文件信息
vim .env
</code></pre>
<p>3、运行容器</p>
<pre><code class="language-bash">docker run -d \
--name chronoframe \
-p 3000:3000 \
-v /data/software/chronoframe/data:/app/data \
--env-file .env \
ghcr.io/hoshinosuzumi/chronoframe:latest
</code></pre>
<h3 id="docker-compose-部署">Docker Compose 部署</h3>
<p>1、创建 <code>docker-compose.yml</code> 文件</p>
<pre><code class="language-yaml">services:
chronoframe:
image: ghcr.io/hoshinosuzumi/chronoframe:latest
container_name: chronoframe
restart: unless-stopped
ports:
- '3000:3000'
volumes:
- ./data:/app/data
env_file:
- .env
</code></pre>
<p>2、启动服务</p>
<pre><code class="language-bash"># 启动服务
docker compose up -d
# 查看日志
docker compose logs -f chronoframe
# 停止服务
docker compose down
# 更新到最新版本
docker compose pull
docker compose up -d
</code></pre>
<h3 id="反向代理">反向代理</h3>
<p>如需要使用反向代理服务器（如 Nginx 或 Caddy）来处理 HTTPS 和域名解析，可参考如下配置。</p>
<pre><code class="language-bash">server {
listen 80;
server_name your-domain.com;
# HTTPS 重定向
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl http2;
server_name your-domain.com;
# SSL 证书配置
ssl_certificate /path/to/your/certificate.crt;
ssl_certificate_key /path/to/your/private.key;
# SSL 安全配置
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384;
ssl_prefer_server_ciphers off;
# 上传大小限制
client_max_body_size 100M;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_cache_bypass $http_upgrade;
# WebSocket 支持
proxy_set_header Connection "upgrade";
proxy_set_header Upgrade $http_upgrade;
# 超时设置
proxy_connect_timeout 60s;
proxy_send_timeout 60s;
proxy_read_timeout 60s;
}
# 静态资源缓存
location ~* \.(jpg|jpeg|png|gif|webp|svg|css|js|ico|woff|woff2|ttf|eot)$ {
proxy_pass http://localhost:3000;
expires 1y;
add_header Cache-Control "public, immutable";
proxy_set_header Host $host;
}
}
</code></pre>
<h2 id="功能体验">功能体验</h2>
<h3 id="首页">首页</h3>
<ul>
<li><strong>明亮模式</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/chronoframe/img-20251203112221.png"></p>
<ul>
<li><strong>暗黑模式</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/chronoframe/img-20251203112256.png"></p>
<ul>
<li><strong>照片查看</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/chronoframe/img-20251203112334.png"></p>
<ul>
<li><strong>地球仪</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/chronoframe/img-20251203112559.png"></p>
<ul>
<li><strong>相簿</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/chronoframe/img-20251203112639.png"></p>
<ul>
<li><strong>筛选照片</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/chronoframe/img-20251203112835.png"></p>
<h3 id="控制台">控制台</h3>
<ul>
<li><strong>仪表盘</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/chronoframe/img-20251203112907.png"></p>
<ul>
<li><strong>照片库</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/chronoframe/img-20251203112932.png"></p>
<ul>
<li><strong>上传照片</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/chronoframe/img-20251203112953.png"></p>
<ul>
<li><strong>相簿</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/chronoframe/img-20251203113028.png"></p>
<ul>
<li><strong>队列管理</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/chronoframe/img-20251203113057.png"></p>
<ul>
<li><strong>系统日志</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/chronoframe/img-20251203113128.png"></p>
<p>无论是摄影爱好者整理作品，还是个人珍藏生活片段，<code>chronoframe</code> 都能通过简单的部署方式，为你打造一个流畅、安全且充满温度的私人图片画廊。快去部署体验吧~</p>
<pre><code class="language-bash">项目地址：https://github.com/HoshinoSuzumi/chronoframe
</code></pre>
<h2 id="最后">最后</h2>
<p>推荐的开源项目已经收录到 <code>GitHub</code> 项目，欢迎 <code>Star</code>：</p>
<pre><code>https://github.com/chenyl8848/great-open-source-project
</code></pre>
<p>或者访问网站，进行在线浏览：</p>
<pre><code>https://chencoding.top:8090/#/
</code></pre>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/github/img-20250608222400.png"></p>
<p><strong>我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目</strong>。</p>
<p><strong>但是任何人在群里打任何广告，都会被 T 掉</strong>。</p>
<p><strong>如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群</strong>：</p>
<p><strong>关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群</strong>。</p>
<blockquote>
<p>大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！</p>
</blockquote>
<hr><br><br>
来源：https://www.cnblogs.com/codechen8848/p/19315203
頁:
[1]