🚀 使用 Docker Compose 部署 pic smaller

下面是一份为新手准备的 Pic Smaller 在线图片压缩工具 Docker Compose 部署教程，能帮你快速在服务器上搭建一个安全、高效的私有化图片压缩服务。

🎯 Pic Smaller 简介与核心优势

Pic Smaller 是一款免费开源的在线图片压缩工具，基于现代化的 Vite + React 技术栈构建。它通过在浏览器本地进行图片处理，确保了用户隐私和数据安全，因为图片不会上传到任何远程服务器。

主要功能特点： * 📁 多格式支持：智能压缩 JPEG、PNG、WEBP、AVIF、SVG 和 GIF 图像。 * 🚀 批量处理：支持批量图片和整个文件夹的压缩。 * ⚙️ 灵活配置：提供各种压缩参数配置，满足不同质量和大小的需求。 * 🔍 效果对比：支持压缩前后图片效果的直观对比。 * 🌐 多语言：支持国际化多语言界面。 * 🛡️ 隐私安全：纯本地压缩，无服务器端逻辑，图片不会离开你的计算机或服务器。

技术亮点： Pic Smaller 运用了包括 OffscreenCanvas、WebAssembly 和 Web Worker 在内的现代浏览器技术，并整合了如 wasm-image-compressor (PNG压缩)、gifsicle-wasm-browser (GIF压缩)、wasm_avif (AVIF编码/解码) 和 svgo (SVG优化) 等一系列基于 WebAssembly 的高性能图像处理库，以实现高效压缩。

⚙️ 一、部署前准备

1. 环境要求

   • 已安装 Docker 和 Docker Compose。
   • 建议系统内存不少于 1GB。
   • 确保服务器的 3002 端口（或你自定义的其他端口）未被占用。

2. 环境检查 在终端中执行以下命令，确认 Docker 环境正常： bash docker --version docker-compose --version 如果未安装，请参考 Docker 官方文档进行安装。对于 Docker Compose，在 Linux 上可以通过以下命令安装： bash sudo curl -L https://get.daocloud.io/docker/compose/releases/download/1.27.4/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose sudo chmod +x /usr/local/bin/docker-compose

3. 创建项目目录并准备文件 建议创建一个独立的目录来管理 Pic Smaller 的所有文件。 bash mkdir -p /opt/docker/pic-smaller cd /opt/docker/pic-smaller 将提供的 Dockerfile 和 docker-compose.yml 文件放入此目录。你的目录结构应类似于： /opt/docker/pic-smaller/ ├── docker-compose.yml └── Dockerfile

🛠️ 二、配置部署文件

1. 创建 Dockerfile

基于你提供的配置，这是一个优化后的 Dockerfile，用于构建 Pic Smaller 镜像：

#FROM node:latest #使用现有镜像
# 使用更小巧的Node.js Alpine基础镜像，减少最终镜像体积
FROM node:20-alpine
#先拉取镜像再应用这个镜像alpine，再用国内网络去拉取和安装npm的项目。

#如果使用远程仓库，可取消注释 git clone 并删除 COPY行：
#RUN git clone https://github.com/joye61/pic-smaller.git /app
# 设置容器内的工作目录
WORKDIR /app

# 假设已将 pic-smaller 项目代码放置在当前目录的 `pic-smaller` 文件夹下
# 将项目文件复制到容器中
COPY ./pic-smaller /app
#RUN apk update && apk upgrade && apk add git -y
#RUN apk add git
#RUN git clone https://github.com/joye61/pic-smaller.git

# 安装项目依赖并构建
# 使用 `--ignore-scripts` 可跳过某些包可能不兼容的安装后脚本，按需使用
RUN set -eux \
  && npm install --ignore-scripts \
  && npm run build:preview
  #&& npm install \
  #&& npm run dev
# 设置启动命令
CMD [ "npm", "run", "preview" ]
# 声明容器运行时暴露的端口
EXPOSE 3001

注意：你需要确保在 Dockerfile 同级的 pic-smaller 目录下存在 Pic Smaller 的项目源码。可以通过 git clone https://github.com/joye61/pic-smaller.git 命令获取源码。

2. 创建 docker-compose.yml

以下是与你提供的配置兼容的 docker-compose.yml 文件：

#services:
  #picsmaller:
    #image: picsmaller
    #container_name: picsmaller
    #ports:
      #- 3001:3001

services:
  picsmaller:
   #build: .  # 使用当前目录下的 Dockerfile 构建镜像
    image: pic-smaller
    container_name: pic-smaller
    ports:
      - "3002:3001"  # 主机端口:容器端口，可按需修改主机端口 (3002)
    restart: unless-stopped
    deploy:
     resources:
       limits:
        #cpus: '6'
        #memory: 2G
        cpus: '1.0'  # 限制CPU使用，可根据实际情况调整
        memory: 1G    # 限制内存使用，可根据实际情况调整
    #volumes:
      #- ./app:/app #是dockerfile构建的的工作目录，映射进去更没用。

关键配置说明：

配置项	说明与建议
build: .	指定使用当前目录下的 Dockerfile 来构建镜像。
ports	"3002:3001" 将容器内的 3001 端口映射到主机的 3002 端口。你可以修改冒号前的端口（如 3080:3001），但容器内的端口（3001）通常与应用配置相关，不建议修改。
restart: unless-stopped	容器退出时总是重启，除非被手动停止。
资源限制	建议根据实际访问量和服务器资源情况调整 CPU 和内存限制。

🚀 三、构建与启动

1. 构建镜像并启动服务 在 docker-compose.yml 文件所在目录执行： bash docker-compose up -d 此命令会读取 docker-compose.yml 配置，并使用 Dockerfile 构建镜像，然后在后台启动容器。

2. 检查服务状态 bash docker-compose ps 如果看到 pic-smaller 容器的状态为 Up，说明服务已成功启动。

3. 查看实时日志（可选） 如果遇到问题，可以通过以下命令查看容器日志来排查： bash docker-compose logs -f picsmaller

🖥️ 四、访问与使用

1. 访问 Pic Smaller：打开浏览器，输入 http://你的服务器IP地址:3002。如果一切正常，你将看到 Pic Smaller 的 Web 界面。

2. 压缩图片：

   • 你可以直接将图片拖拽到网页上，或点击区域选择图片。
   • Pic Smaller 支持批量处理，你可以一次上传多张图片或整个文件夹。
   • 在压缩前，你可以在界面上调整压缩配置，如图片质量、输出格式等。
   • 压缩完成后，你可以对比压缩效果，并逐个或批量下载压缩后的图片。

🔧 五、维护与管理

• 服务管理：

  • 停止服务：docker-compose down
  • 重启服务：docker-compose restart
  • 查看服务状态：docker-compose ps

• 更新 Pic Smaller：

  1. 拉取最新的项目源码。
  2. 重新构建镜像并启动： bash docker-compose down docker-compose up -d --build

• 数据备份：由于 Pic Smaller 的压缩过程在浏览器本地完成，服务器端主要存储的是静态网页资源。定期备份你的部署目录（/opt/docker/pic-smaller）和 docker-compose.yml 文件即可。

🐛 六、常见问题排查

问题现象	可能原因与解决方法
无法访问 Web 界面	1. 检查防火墙/安全组是否放行了你设置的主机端口（例如 3002）。 2. 确认容器是否正常运行：docker-compose ps。 3. 查看容器日志：docker-compose logs picsmaller。
镜像构建失败	1. 确保 pic-smaller 项目源码已正确放置在构建上下文目录下。 2. 检查网络，确保 npm install 能顺利下载依赖。
容器启动后立即退出	1. 检查 Dockerfile 中的构建命令 (npm run build:preview) 是否成功完成。 2. 确认 CMD 指令是否正确。

💎 进阶配置（可选）

使用域名访问（反向代理）

如果你希望通过域名（例如 picsmaller.yourdomain.com）访问 Pic Smaller，可以设置 Nginx 反向代理。

1. 安装 Nginx (若尚未安装)。
2. 创建 Nginx 配置文件，例如 /etc/nginx/conf.d/picsmaller.conf，内容如下（请替换 your_domain.com 为你的域名）： ```nginx server { listen 80; server_name your_domain.com;

   location / {
       proxy_pass http://127.0.0.1:3002; # 转发给本地运行的 Pic Smaller
       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;
   }
   

   } 3. **测试 Nginx 配置并重载**：bash nginx -t nginx -s reload ``` 4. 将你的域名 DNS 解析到服务器 IP。现在，你就可以通过域名访问 Pic Smaller 了。

希望这份教程能帮助你顺利完成 Pic Smaller 的部署！如果部署过程中遇到问题，可以查阅 Pic Smaller 的 GitHub 项目主页 获取更多信息。