mcpField
H
http-endpoints

http-endpoints

github.com/val-town開発1042 回インストール5 週間前に更新
リポジトリ

http-endpoints について

Val Town の開発者向けに、受信リクエストを処理する HTTP val の作成方法を案内します。エンドポイント URL、アクセス制限、実装パターン、プラットフォームの制約を説明します。

主な機能

  1. 01HTTP リクエスト処理
  2. 02ライブ URL の確認方法
  3. 03アクセス制限の挙動
  4. 04CORS とリダイレクトの扱い
  5. 05プラットフォーム制約の説明

活用シーン

  1. 01Val Town での HTTP API 作成
  2. 02HTTP val からの静的ファイル配信
  3. 03編集後のエンドポイント応答確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/val-town/plugins --skill http-endpoints

インストール後、Claude Code で/http-endpointsを入力して読み込まれたか確認します。

詳細

HTTP エンドポイント

HTTP val（fileType: "http"）はリクエストハンドラーをエクスポートし、HTTP リクエストを受信するたびに実行されます。各 HTTP ファイルにはライブ URL が割り当てられます。自分で URL を作成せず、list_files または create_file のレスポンスから links.endpoint を読み取るか、fetch_val_endpoint を呼び出してください。

val のアプリへのアクセス設定（httpPrivacy）が restricted でない限り、この URL は誰でも利用できます。restricted の場合、認証されていない呼び出し元にはレスポンスではなく、ログインページへの 302 が返されます。詳しくは restricted-access スキルを参照してください。

基本的なハンドラー

// Learn more: https://docs.val.town/vals/http/
export default async function (req: Request): Promise<Response> {
  return Response.json({ ok: true });
}

このファイルには export が必要です。ハンドラーには export default を使用してください。

Hono

Hono を使用する場合は、app ではなく app.fetch をエクスポートしてください。

import { Hono } from "npm:hono";
import { parseVal, serveImmutableFile } from "https://esm.town/v/std/utils/index.ts";

const app = new Hono();

app.get("/", (c) => c.text("hello"));

// Immutable asset caching (see the client-side-js skill): serves the
// current-version URLs your HTML shell stamps with immutableFileUrl()
app.get("/__immutable/*", (c) => serveImmutableFile(c.req.path));

// View source redirect
app.get("/source", (c) => c.redirect(parseVal().links.self.val));

// Always add this for full stack traces on errors:
app.onError((err) => Promise.reject(err));

export default app.fetch;

Hono の serveStatic は Val Town では動作しません。静的ファイルには std/utils の serveFile / staticHTTPServer を使用してください。std/utils の API 全体（readFile、serveFile、staticHTTPServer、listFiles、listFilesByPath、httpEndpoint、parseVal、…）については、https://utilities.val.run/docs.md を取得してください。

CORS

Val Town はデフォルトで寛容な CORS ヘッダー（Access-Control-Allow-Origin: *）を追加するため、99％のケースでは CORS に関する対応は不要です。Hono の cors ミドルウェアを使う必要はほとんどありません。

CORS ヘッダーを1つでも独自に設定すると、Val Town はデフォルトのヘッダーをすべて追加しなくなります。そのため、CORS を完全に自分で処理するか、まったく変更しないでください。

リダイレクト

Val Town では Response.redirect は動作しません。代わりに次のいずれかを使用してください。

return new Response(null, { status: 302, headers: { Location: "/path" } });
// or, with Hono:
return c.redirect("/path");

利用できない機能

  • WebSocket：Val Town は受信 WebSocket 接続を受け付けません。代わりにポーリング、ロングポーリング、またはサーバー送信イベントを使用してください。
  • ファイルシステムへのアクセス：プラットフォームの制約を参照してください。永続状態には std/sqlite または std/blob を使用してください。

クライアント側のエラーを確認する

HTML レスポンスの場合は、このスクリプトタグを追加して、ブラウザーのエラーを val のログ（get_logs で表示）に送信してください。

<script src="https://esm.town/v/std/catch"></script>

変更の確認

HTTP val を編集した後は、期待どおりの HTTP レスポンスが返されることを確認するために、val を取得してください。この手順を行わずに、変更が完了したと報告しないでください。

コメント

Markdown 対応