Miro MCP Serverのコンテナイメージを作る

コンテナ名を指定するように修正

docker-compose.yml

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "${PORT:-8899}:${PORT:-8899}"
    volumes:
      - .:/app
      - /app/node_modules
    restart: unless-stopped
    env_file:
      - .env
+    container_name: mcp-server-miro

docker compose build

yama

VSCodeの設定

作業用ディレクトリを作成
root dir
└.devcontainer
　　└Dockerfile
　　└devcontainer.json
　　└.env
└docker-compose.yml

Dockerfile

FROM node:lts-bookworm-slim
WORKDIR /workspace
COPY . .

docker-compose.yml

services:
  mcp-server:
    image: mcp-server-miro-app
    restart: unless-stopped
    env_file:
      - .devcontainer/.env
  workspace:
    build:
      context: .
      dockerfile: .devcontainer/Dockerfile
    volumes:
      - .:/workspace
    command: /bin/sh -c "while sleep 1000; do :; done"

.env

MIRO_API_TOKEN=your_api_token
MIRO_BOARD_ID=miro_board_id

devcontainer.json

{
  "name": "MCP Server Development",
  "dockerComposeFile": [
    "../docker-compose.yml"
  ],
  "service": "workspace",
  "workspaceFolder": "/workspace",
  "forwardPorts": [8899],
  "remoteUser": "node",
  "customizations": {
    "vscode": {
      "settings": {
        "terminal.integrated.defaultProfile.linux": "bash"
      },
      "extensions": [
        "ms-azuretools.vscode-docker",
        "github.copilot",
        "github.copilot-chat",
        "saoudrizwan.claude-dev"
      ]
    }
  }
}

yama

clineの設定

今回はgithub copilotの契約があるのでAPI Providerはそちらを利用
API Provider: VS Code LM API
Custom Instructions: 日本語で応答してください
Advinced settingsのPreferred Language: Japanese

clineignoreの設定

クレデンシャルなど読まれたくないファイルを記載

.clineignore

.devcontainer/.env

mcpサーバーの設定

上部のサーバーアイコンからInstalled、Configure MCP Serversで設定ファイルを開く

{
  "mcpServers": {
    "miromcp": {
      "type":"sse",
      "url": "http://mcp-server:8899/sse"
    }
  }
}

yama

結果

プレゼン資料を作るという意味では全然使い物にならなかった
中身を読ませるくらいならできそう