Mission: Ship It, 나의 Claude Ops Center를 배포하라

import * as cdk from "aws-cdk-lib";
import { Construct } from "constructs";
import * as dynamodb from "aws-cdk-lib/aws-dynamodb";
import * as lambda from "aws-cdk-lib/aws-lambda";
import * as apigwv2 from "aws-cdk-lib/aws-apigatewayv2";
import * as integrations from "aws-cdk-lib/aws-apigatewayv2-integrations";
import * as s3 from "aws-cdk-lib/aws-s3";
import * as s3deploy from "aws-cdk-lib/aws-s3-deployment";
import * as cloudfront from "aws-cdk-lib/aws-cloudfront";
import * as origins from "aws-cdk-lib/aws-cloudfront-origins";
import * as iam from "aws-cdk-lib/aws-iam";

export class OpsCenterStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    const askModelId = this.node.tryGetContext("askModelId") ?? "global.anthropic.claude-sonnet-4-6";

    // ── Phase 1: 이벤트 저장소와 API ──
    const table = new dynamodb.Table(this, "EventsTable", {
      partitionKey: { name: "pk", type: dynamodb.AttributeType.STRING },
      sortKey: { name: "sk", type: dynamodb.AttributeType.STRING },
      billingMode: dynamodb.BillingMode.PAY_PER_REQUEST,
      removalPolicy: cdk.RemovalPolicy.DESTROY,
    });

    const eventsFn = new lambda.Function(this, "EventsFn", {
      runtime: lambda.Runtime.NODEJS_22_X,
      handler: "events.handler",
      code: lambda.Code.fromAsset("lambda"),
      environment: { TABLE_NAME: table.tableName },
      timeout: cdk.Duration.seconds(10),
    });
    table.grantReadWriteData(eventsFn);

    const api = new apigwv2.HttpApi(this, "OpsApi", {
      corsPreflight: {
        allowOrigins: ["*"],
        allowMethods: [apigwv2.CorsHttpMethod.GET, apigwv2.CorsHttpMethod.POST, apigwv2.CorsHttpMethod.OPTIONS],
        allowHeaders: ["Content-Type"],
      },
    });
    api.addRoutes({
      path: "/events",
      methods: [apigwv2.HttpMethod.GET, apigwv2.HttpMethod.POST],
      integration: new integrations.HttpLambdaIntegration("EventsInt", eventsFn),
    });

    // ── Phase 3: Bedrock /ask ──
    const askFn = new lambda.Function(this, "AskFn", {
      runtime: lambda.Runtime.NODEJS_22_X,
      handler: "ask.handler",
      code: lambda.Code.fromAsset("lambda"),
      environment: {
        ASK_MODEL_ID: askModelId,
        // 다른 계정 발급 Bedrock API 키, 배포 셸에서 주입 (IAM 정책 불필요)
        AWS_BEARER_TOKEN_BEDROCK: process.env.AWS_BEARER_TOKEN_BEDROCK ?? "",
      },
      timeout: cdk.Duration.seconds(29),
      memorySize: 512,
    });
    api.addRoutes({
      path: "/ask",
      methods: [apigwv2.HttpMethod.POST],
      integration: new integrations.HttpLambdaIntegration("AskInt", askFn),
    });

    // ── Phase 2: 프론트엔드 (S3 + CloudFront) ──
    const siteBucket = new s3.Bucket(this, "SiteBucket", {
      blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
      removalPolicy: cdk.RemovalPolicy.DESTROY,
      autoDeleteObjects: true,
    });

    const dist = new cloudfront.Distribution(this, "SiteDist", {
      defaultBehavior: {
        origin: origins.S3BucketOrigin.withOriginAccessControl(siteBucket),
        viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
      },
      defaultRootObject: "index.html",
    });

    new s3deploy.BucketDeployment(this, "DeploySite", {
      sources: [s3deploy.Source.asset("frontend")],
      destinationBucket: siteBucket,
      distribution: dist,
      distributionPaths: ["/*"],
    });

    // ── Outputs ──
    new cdk.CfnOutput(this, "ApiUrl", { value: api.apiEndpoint });
    new cdk.CfnOutput(this, "SiteUrl", { value: `https://${dist.distributionDomainName}` });
    new cdk.CfnOutput(this, "AskModelId", { value: askModelId });
  }
}

import * as cdk from "aws-cdk-lib";
import { OpsCenterStack } from "./ops-center-stack";

const app = new cdk.App();
new OpsCenterStack(app, "OpsCenterStack", {
  env: { region: process.env.CDK_DEFAULT_REGION ?? "ap-northeast-2" },
  tags: { project: "capstone-ops-center" },
});

import { DynamoDBClient } from "@aws-sdk/client-dynamodb";
import { DynamoDBDocumentClient, PutCommand, QueryCommand } from "@aws-sdk/lib-dynamodb";

const ddb = DynamoDBDocumentClient.from(new DynamoDBClient({}));
const TABLE = process.env.TABLE_NAME;
const CORS = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "Content-Type",
  "Access-Control-Allow-Methods": "GET,POST,OPTIONS",
};

export const handler = async (event) => {
  const method = event.requestContext?.http?.method ?? "GET";
  if (method === "OPTIONS") return { statusCode: 204, headers: CORS };

  try {
    if (method === "POST") {
      const body = JSON.parse(event.body ?? "{}");
      const item = {
        pk: "session",
        sk: `${Date.now()}#${Math.random().toString(36).slice(2, 8)}`,
        kind: String(body.kind ?? "unknown").slice(0, 40),
        detail: String(body.detail ?? "").slice(0, 300),
        cost_usd: Number(body.cost_usd ?? 0),
        turns: Number(body.turns ?? 0),
        at: new Date().toISOString(),
      };
      await ddb.send(new PutCommand({ TableName: TABLE, Item: item }));
      return { statusCode: 201, headers: CORS, body: JSON.stringify({ ok: true }) };
    }

    const res = await ddb.send(new QueryCommand({
      TableName: TABLE,
      KeyConditionExpression: "pk = :p",
      ExpressionAttributeValues: { ":p": "session" },
      ScanIndexForward: false,
      Limit: 50,
    }));
    const items = res.Items ?? [];
    const summary = {
      count: items.length,
      total_cost_usd: Number(items.reduce((a, x) => a + (x.cost_usd || 0), 0).toFixed(4)),
      total_turns: items.reduce((a, x) => a + (x.turns || 0), 0),
    };
    return { statusCode: 200, headers: CORS, body: JSON.stringify({ summary, items }) };
  } catch (err) {
    console.error(err);
    return { statusCode: 500, headers: CORS, body: JSON.stringify({ error: err.message }) };
  }
};

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Claude Ops Center</title>
<style>
  :root { --bg:#12181F; --card:#1B242E; --line:#2A3542; --text:#E8ECF1; --muted:#8B96A5; --accent:#FF9900; --purple:#7a3ff2; --green:#3FB950; }
  * { box-sizing:border-box; margin:0; }
  body { background:var(--bg); color:var(--text); font-family:system-ui,sans-serif; padding:28px 20px 60px; }
  .wrap { max-width:960px; margin:0 auto; }
  header h1 { font-size:24px; } header .sub { color:var(--muted); font-size:13px; margin-top:4px; }
  header h1 em { color:var(--accent); font-style:normal; }
  .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
  .card .k { color:var(--muted); font-size:12px; letter-spacing:.08em; }
  .card .v { font-size:26px; font-weight:700; margin-top:6px; }
  .card .v.orange { color:var(--accent); } .card .v.purple { color:#c9a2ff; } .card .v.green { color:var(--green); }
  .panel { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:16px; }
  .panel h2 { font-size:14px; color:var(--muted); letter-spacing:.06em; margin-bottom:12px; }
  canvas { width:100%; height:120px; }
  ul#feed { list-style:none; max-height:220px; overflow:auto; }
  ul#feed li { padding:8px 4px; border-bottom:1px solid var(--line); font-size:13.5px; display:flex; gap:10px; }
  ul#feed .kind { color:var(--accent); min-width:110px; font-weight:600; }
  ul#feed .at { color:var(--muted); margin-left:auto; font-size:12px; }
  .askrow { display:flex; gap:10px; }
  input#q { flex:1; background:#0C1117; border:1px solid var(--line); border-radius:8px; color:var(--text); padding:12px; font-size:14px; }
  button { background:var(--purple); border:0; border-radius:8px; color:#fff; padding:0 22px; font-weight:700; cursor:pointer; }
  button:disabled { opacity:.5; }
  #answer { margin-top:12px; font-size:14px; line-height:1.7; white-space:pre-wrap; }
  #answer .meta { color:var(--muted); font-size:12px; margin-top:6px; }
  .empty { color:var(--muted); font-size:13px; }
</style>
</head>
<body>
<div class="wrap">
  <header>
    <h1><em>Claude</em> Ops Center</h1>
    <div class="sub">내 Claude Code 세션 관측 대시보드 - Capstone Lab</div>
  </header>

  <div class="cards">
    <div class="card"><div class="k">EVENTS</div><div class="v orange" id="stat-count">-</div></div>
    <div class="card"><div class="k">TOTAL COST (USD)</div><div class="v purple" id="stat-cost">-</div></div>
    <div class="card"><div class="k">TOTAL TURNS</div><div class="v green" id="stat-turns">-</div></div>
  </div>

  <div class="panel">
    <h2>SESSION COST TIMELINE</h2>
    <canvas id="chart" width="900" height="120"></canvas>
  </div>

  <div class="panel">
    <h2>EVENT FEED (5초 폴링)</h2>
    <ul id="feed"><li class="empty">아직 이벤트가 없습니다. Mission 4의 Hook이 연결되면 여기에 세션이 쌓입니다.</li></ul>
  </div>

  <div class="panel">
    <h2>ASK BEDROCK (Global Inference)</h2>
    <div class="askrow">
      <input id="q" placeholder="예: 방금 배포한 아키텍처를 한 문장으로 설명해줘">
      <button id="askbtn">Ask</button>
    </div>
    <div id="answer"></div>
  </div>
</div>

<script>
"use strict";
var API_BASE = "PASTE_API_URL"; // 예: https://abc123.execute-api.ap-northeast-2.amazonaws.com

function fmt(n, d) { return Number(n || 0).toFixed(d); }

function drawChart(items) {
  var c = document.getElementById("chart");
  var ctx = c.getContext("2d");
  ctx.clearRect(0, 0, c.width, c.height);
  var data = items.slice(0, 24).reverse().map(function (x) { return x.cost_usd || 0; });
  if (!data.length) return;
  var max = Math.max.apply(null, data.concat([0.001]));
  var bw = c.width / data.length;
  data.forEach(function (v, i) {
    var h = Math.max(3, (v / max) * (c.height - 10));
    ctx.fillStyle = "#7a3ff2";
    ctx.fillRect(i * bw + 3, c.height - h, bw - 6, h);
  });
}

function refresh() {
  fetch(API_BASE + "/events")
    .then(function (r) { return r.json(); })
    .then(function (d) {
      document.getElementById("stat-count").textContent = d.summary.count;
      document.getElementById("stat-cost").textContent = "$" + fmt(d.summary.total_cost_usd, 4);
      document.getElementById("stat-turns").textContent = d.summary.total_turns;
      var feed = document.getElementById("feed");
      if (d.items.length) {
        feed.innerHTML = d.items.map(function (x) {
          return '<li><span class="kind">' + x.kind + '</span><span>' + (x.detail || "") +
                 '</span><span class="at">' + (x.at || "").slice(11, 19) + "</span></li>";
        }).join("");
      }
      drawChart(d.items);
    })
    .catch(function () { /* API 미연결 상태 허용 */ });
}

document.getElementById("askbtn").addEventListener("click", function () {
  var q = document.getElementById("q").value.trim();
  if (!q) return;
  var btn = this, ans = document.getElementById("answer");
  btn.disabled = true; ans.textContent = "생각 중...";
  fetch(API_BASE + "/ask", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ question: q })
  })
    .then(function (r) { return r.json(); })
    .then(function (d) {
      ans.innerHTML = "";
      var t = document.createElement("div"); t.textContent = d.answer || d.message || "(응답 없음)";
      var m = document.createElement("div"); m.className = "meta";
      m.textContent = d.model ? d.model + " / in " + d.usage.inputTokens + " out " + d.usage.outputTokens : "";
      ans.appendChild(t); ans.appendChild(m);
    })
    .catch(function (e) { ans.textContent = "오류: " + e.message; })
    .finally(function () { btn.disabled = false; });
});

refresh();
setInterval(refresh, 5000);
</script>
</body>
</html>

import { BedrockRuntimeClient, ConverseCommand } from "@aws-sdk/client-bedrock-runtime";

const client = new BedrockRuntimeClient({});
const MODEL_ID = process.env.ASK_MODEL_ID ?? "global.anthropic.claude-sonnet-4-6";
const CORS = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "Content-Type",
  "Access-Control-Allow-Methods": "POST,OPTIONS",
};

export const handler = async (event) => {
  const method = event.requestContext?.http?.method ?? "POST";
  if (method === "OPTIONS") return { statusCode: 204, headers: CORS };

  try {
    const { question } = JSON.parse(event.body ?? "{}");
    if (!question) return { statusCode: 400, headers: CORS, body: JSON.stringify({ error: "question 필요" }) };

    const res = await client.send(new ConverseCommand({
      modelId: MODEL_ID,
      system: [{ text: "당신은 이 워크샵 참가자의 AWS/Claude Code 조수입니다. 3문장 이내로 한국어로 답하세요." }],
      messages: [{ role: "user", content: [{ text: String(question).slice(0, 2000) }] }],
      inferenceConfig: { maxTokens: 600 },
    }));

    const answer = res.output?.message?.content?.map((c) => c.text ?? "").join("") ?? "";
    const usage = res.usage ?? {};
    return {
      statusCode: 200, headers: CORS,
      body: JSON.stringify({ answer, model: MODEL_ID, usage }),
    };
  } catch (err) {
    console.error(err);
    return { statusCode: 502, headers: CORS, body: JSON.stringify({ error: err.name, message: err.message }) };
  }
};