Figma-Context-MCP 容器化部署：Dockerfile与docker-compose配置

Figma-Context-MCP 容器化部署：Dockerfile与docker-compose配置

【免费下载链接】Figma-Context-MCP MCP server to provide Figma layout information to AI coding agents like Cursor 项目地址: https://gitcode.com/gh_mirrors/fi/Figma-Context-MCP

1. 项目概述

Figma-Context-MCP 是一个为AI编码工具（如Cursor）提供Figma布局信息的MCP服务器。本文将详细介绍如何通过Docker和docker-compose实现该服务的容器化部署，确保环境一致性和部署效率。

1.1 核心功能架构

1.2 部署优势对比

部署方式	环境一致性	部署复杂度	扩展性	隔离性
传统部署	❌ 依赖本地环境	⭐⭐⭐ 高	⭐⭐ 中等	❌ 低
Docker容器	✅ 完全一致	⭐ 低	⭐⭐⭐ 高	✅ 高
Kubernetes	✅ 完全一致	⭐⭐⭐⭐ 极高	⭐⭐⭐⭐ 极高	✅ 高

2. 环境准备

2.1 系统要求

- Docker Engine: 20.10.0+
- Docker Compose: 2.0.0+
- 内存: 至少2GB
- 磁盘空间: 1GB可用空间

2.2 必要文件清单

figma-context-mcp/
├── Dockerfile          # 应用容器构建文件
├── docker-compose.yml  # 服务编排配置
├── .env                # 环境变量配置
└── .dockerignore       # Docker构建忽略文件

3. Dockerfile 配置详解

3.1 基础镜像选择

基于项目package.json分析，选择Node.js 18 LTS版本作为基础镜像，匹配项目指定的Node.js版本要求（>=18.0.0）。

# 构建阶段
FROM node:18-alpine AS builder

# 设置工作目录
WORKDIR /app

# 复制依赖文件
COPY package.json pnpm-lock.yaml ./

# 安装pnpm
RUN npm install -g pnpm

# 安装依赖
RUN pnpm install --frozen-lockfile

# 复制源代码
COPY . .

# 构建项目
RUN pnpm run build

# 生产阶段
FROM node:18-alpine

# 创建非root用户
RUN addgroup -g 1001 -S nodejs
RUN adduser -S appuser -u 1001

# 设置工作目录
WORKDIR /app

# 复制构建产物
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./

# 设置权限
RUN chown -R appuser:nodejs /app
USER appuser

# 暴露端口
EXPOSE 3000

# 健康检查
HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
  CMD wget --no-verbose --tries=1 --spider http://localhost:3000/health || exit 1

# 启动命令
CMD ["pnpm", "start"]

3.2 Dockerfile 优化说明

1. 多阶段构建：将构建环境与运行环境分离，减小最终镜像体积
2. 非root用户：提高容器安全性，避免以root权限运行应用
3. 健康检查：实现容器状态自动检测
4. 依赖缓存：合理排序指令，最大化利用Docker构建缓存

4. docker-compose 配置

4.1 基础服务配置

version: '3.8'

services:
  figma-mcp:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: figma-context-mcp
    restart: unless-stopped
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - PORT=3000
      - FIGMA_ACCESS_TOKEN=${FIGMA_ACCESS_TOKEN}
      - MCP_HOST=0.0.0.0
    volumes:
      - ./logs:/app/logs
    networks:
      - figma-network
    healthcheck:
      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3000/health"]
      interval: 30s
      timeout: 5s
      retries: 3
      start_period: 10s

networks:
  figma-network:
    driver: bridge

4.2 高级配置（带监控）

version: '3.8'

services:
  figma-mcp:
    # 基础配置同上...
    
  prometheus:
    image: prom/prometheus:v2.45.0
    volumes:
      - ./prometheus.yml:/etc/prometheus/prometheus.yml
      - prometheus-data:/prometheus
    ports:
      - "9090:9090"
    networks:
      - figma-network

  grafana:
    image: grafana/grafana:10.1.0
    volumes:
      - grafana-data:/var/lib/grafana
    ports:
      - "3001:3000"
    depends_on:
      - prometheus
    networks:
      - figma-network

volumes:
  prometheus-data:
  grafana-data:

networks:
  figma-network:
    driver: bridge

5. 环境变量配置

创建.env文件，配置必要的环境变量：

# Figma API访问令牌
FIGMA_ACCESS_TOKEN=your_figma_access_token_here

# 服务器配置
PORT=3000
MCP_HOST=0.0.0.0
NODE_ENV=production

# 日志配置
LOG_LEVEL=info
LOG_DIR=./logs

# 缓存设置
CACHE_TTL=3600
MAX_CACHE_SIZE=100

6. 构建与启动

6.1 构建镜像

# 构建Docker镜像
docker-compose build

# 查看构建的镜像
docker images | grep figma-context-mcp

6.2 启动服务

# 后台启动服务
docker-compose up -d

# 查看服务状态
docker-compose ps

# 查看日志
docker-compose logs -f

6.3 验证服务

# 检查服务健康状态
docker inspect -f '{{.State.Health.Status}}' figma-context-mcp

# 测试API端点
curl http://localhost:3000/health

7. 部署优化策略

7.1 资源限制配置

services:
  figma-mcp:
    # 其他配置...
    deploy:
      resources:
        limits:
          cpus: '0.5'    # 限制CPU使用为0.5核
          memory: 512M   # 限制内存使用为512MB
        reservations:
          cpus: '0.2'    # 保留0.2核CPU
          memory: 256M   # 保留256MB内存

7.2 日志轮转配置

创建docker-compose.logrotate文件：

/var/lib/docker/containers/*/*.log {
    daily
    rotate 7
    compress
    delaycompress
    missingok
    copytruncate
}

7.3 自动重启策略

services:
  figma-mcp:
    # 其他配置...
    restart: unless-stopped  # 除非手动停止，否则总是重启
    # 或
    restart: on-failure:3    # 失败时重启，最多3次

8. 常见问题解决

8.1 容器启动失败

8.2 性能优化建议

1. 启用缓存：设置适当的CACHE_TTL值减少重复请求
2. 资源调整：根据实际负载调整CPU和内存限制
3. 网络优化：对于频繁访问Figma API的场景，考虑配置网络代理

9. 部署流程自动化

9.1 CI/CD流程示例

9.2 部署脚本

创建deploy.sh：

#!/bin/bash
set -e

# 更新代码
git pull origin main

# 构建镜像
docker-compose build

# 重启服务
docker-compose up -d

# 检查状态
docker-compose ps

echo "部署完成！"

10. 总结与展望

Figma-Context-MCP的容器化部署通过Docker和docker-compose实现了环境一致性、简化部署流程和提高系统隔离性。随着项目发展，可以进一步考虑：

1. Kubernetes迁移：对于大规模部署，可迁移至Kubernetes实现更精细的编排和扩展
2. 自动伸缩：结合监控指标实现基于负载的自动扩缩容
3. 多区域部署：通过容器编排工具实现跨区域高可用部署

通过本文档提供的配置和最佳实践，您可以快速、可靠地部署Figma-Context-MCP服务，为AI编码工具提供稳定的Figma布局信息支持。

附录：完整配置文件

Dockerfile

FROM node:18-alpine AS builder
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm
RUN pnpm install --frozen-lockfile
COPY . .
RUN pnpm run build

FROM node:18-alpine
RUN addgroup -g 1001 -S nodejs
RUN adduser -S appuser -u 1001
WORKDIR /app
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./
RUN chown -R appuser:nodejs /app
USER appuser
EXPOSE 3000
HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
  CMD wget --no-verbose --tries=1 --spider http://localhost:3000/health || exit 1
CMD ["pnpm", "start"]

docker-compose.yml

version: '3.8'

services:
  figma-mcp:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: figma-context-mcp
    restart: unless-stopped
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - PORT=3000
      - FIGMA_ACCESS_TOKEN=${FIGMA_ACCESS_TOKEN}
      - MCP_HOST=0.0.0.0
    volumes:
      - ./logs:/app/logs
    networks:
      - figma-network
    healthcheck:
      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3000/health"]
      interval: 30s
      timeout: 5s
      retries: 3
      start_period: 10s
    deploy:
      resources:
        limits:
          cpus: '0.5'
          memory: 512M
        reservations:
          cpus: '0.2'
          memory: 256M

networks:
  figma-network:
    driver: bridge

【免费下载链接】Figma-Context-MCP MCP server to provide Figma layout information to AI coding agents like Cursor 项目地址: https://gitcode.com/gh_mirrors/fi/Figma-Context-MCP