一鍵部署！一款開源自託管的照片畫廊神器！詳情 - 前端 codechen8848 博客

大家好，我是 Java陳序員。

在這個數字時代，我們的手機和相機裏存滿了無數珍貴的照片 —— 家人的笑臉、旅行的風景、生活的點滴瞬間。但這些回憶往往被淹沒在雜亂的相冊裏，要麼受制於雲存儲的隱私風險，要麼因格式兼容問題難以完整呈現。

這時候，我們可以搭建一個完全屬於自己、能按時間和地點梳理回憶的照片畫廊。

今天，給大家推薦一款專注於流暢體驗的自託管個人畫廊神器，支持一鍵部署！

關注微信公眾號：【Java陳序員】，獲取開源項目分享、AI副業分享、超200本經典計算機電子書籍等。

項目介紹

chronoframe —— 一個絲滑的照片展示和管理應用，支持多種圖片格式和大尺寸圖片渲染。

功能特色：

強大的照片管理：支持通過網頁界面輕鬆管理和瀏覽照片，並在地圖上查看照片拍攝地點
輕量部署體驗：基於 Docker 一鍵部署，無需額外配置數據庫（內置 SQLite），幾分鐘內即可完成私有化部署
多存儲後端適配：支持本地文件系統、S3 兼容存儲多種存儲方式，滿足不同場景需求
地圖可視化瀏覽：自動提取照片 GPS 信息，使用 Mapbox 進行地理編碼，在地圖上展示照片拍攝位置
響應式設計：完美適配桌面端和移動端，支持觸摸操作和手勢控制，提供原生應用般的體驗
Live/Motion Photo 支持：完整支持 Apple LivePhoto 格式和 Google 標準的 Motion Photo，自動檢測和處理 MOV 視頻文件，保留動態照片效果

技術棧：Nuxt4 + TypeScript + TailwindCSS + Drizzle ORM

快速上手

配置信息

創建 .env 文件，下面是使用本地存儲的最小示例。

# 管理員郵箱（必須）
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

如選擇使用 S3 存儲，請將存儲部分的配置替換為：

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=

若選擇使用 OPENLIST，請將存儲部分的配置替換為：

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

如果需要集成 Github 登錄，需配置 GitHub OAuth 變量：

NUXT_OAUTH_GITHUB_CLIENT_ID=
NUXT_OAUTH_GITHUB_CLIENT_SECRET=

Docker 部署

1、拉取鏡像

docker pull ghcr.io/hoshinosuzumi/chronoframe:latest

2、創建掛載目錄和配置文件

mkdir -p /data/software/chronoframe/data

cd /data/software/chronoframe

# 配置文件參考前文的配置文件信息
vim .env

3、運行容器

docker run -d \
	--name chronoframe \
  -p 3000:3000 \
  -v /data/software/chronoframe/data:/app/data \
  --env-file .env \
  ghcr.io/hoshinosuzumi/chronoframe:latest

Docker Compose 部署

1、創建 docker-compose.yml 文件

services:
  chronoframe:
    image: ghcr.io/hoshinosuzumi/chronoframe:latest
    container_name: chronoframe
    restart: unless-stopped
    ports:
      - '3000:3000'
    volumes:
      - ./data:/app/data
    env_file:
      - .env

2、啓動服務

# 啓動服務
docker compose up -d

# 查看日誌
docker compose logs -f chronoframe

# 停止服務
docker compose down

# 更新到最新版本
docker compose pull
docker compose up -d

反向代理

如需要使用反向代理服務器（如 Nginx 或 Caddy）來處理 HTTPS 和域名解析，可參考如下配置。

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;
    }
}

功能體驗

首頁

明亮模式

暗黑模式

照片查看

地球儀

相簿

篩選照片

控制枱

儀表盤

照片庫

上傳照片

相簿

隊列管理

系統日誌

無論是攝影愛好者整理作品，還是個人珍藏生活片段，chronoframe 都能通過簡單的部署方式，為你打造一個流暢、安全且充滿温度的私人圖片畫廊。快去部署體驗吧~

項目地址：https://github.com/HoshinoSuzumi/chronoframe

最後

推薦的開源項目已經收錄到 GitHub 項目，歡迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者訪問網站，進行在線瀏覽：

https://chencoding.top:8090/#/

我創建了一個開源項目交流羣，方便大家在羣裏交流、討論開源項目。

但是任何人在羣裏打任何廣告，都會被 T 掉。

如果你對這個交流羣感興趣或者在使用開源項目中遇到問題，可以通過如下方式進羣：

關注微信公眾號：【Java陳序員】，回覆【開源項目交流羣】進羣，或者通過公眾號下方的菜單添加個人微信，並備註【開源項目交流羣】，通過後拉你進羣。

大家的點贊、收藏和評論都是對作者的支持，如文章對你有幫助還請點贊轉發支持下，謝謝！

codechen8848 博客

codechen8848 博客

博客 / 詳情