wheatandcatの開発ブログ

技術系記事を投稿してます

Tauri 2でアプリ内からhttp://localhostにアクセスする方法の紹介

概要

Replit を契約していると毎月 25 ドル分のクレジットを使い切らないともったいないという心理が働き、結果として毎月アプリを作るルーティンが発生する。 今月は "GraphQL Client" アプリを作成。AI に実装を任せたところ、ローカルで起動した GraphQL サーバーにアクセスする部分でつまずき、自力で実装した経緯を残す。

PR

開発したアプリの紹介

  • GraphQL Client を自分用に作成
  • GraphQL エンドポイントごとにヘッダーや実行履歴を管理
  • Docs タブで GraphQL のスキーマを閲覧可能
  • Mac アプリとしてビルド

使用技術

実装経緯

Replit でのプロトタイプ

まず Replit で雛形を作成。ある程度形になった段階で Claude Code に引き継ぎ、Mac 向けにビルドできるよう改修を依頼。

AI がハマった箇所

  • GraphQL Client で http://localhost のエンドポイントを扱えるようにする
  • fetch では localhost へのアクセスが CORS でブロックされるため回避策が必要
  • AI は vite の proxy 経由アクセスやブラウザ併用コードを提案したが、Tauri でのみ動かせば十分なので方針が噛み合わず採用を断念

人力での解決

Tauri 2 公式の HTTP プラグイン @tauri-apps/plugin-http を利用すればアプリ側で localhost へアクセス可能と判明。

手順

1. 依存関係追加
npm run tauri add http
2. 権限付与 – src-tauri/capabilities/default.json に追記
{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "main-capability",
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": [
    {
      "identifier": "http:default",
      "allow": [{ "url": "http://localhost:*" }],
      "deny": []
    }
  ]
}
3. fetch を差し替え – client/src/lib/graphql-client.ts
import { fetch as tauriFetch } from "@tauri-apps/plugin-http";

// 中略

let clientFetch = fetch;
if (endpoint.includes("http://localhost")) {
  clientFetch = tauriFetch; // localhost ならプラグイン fetch を使用
}

const response = await clientFetch(endpoint, fetchOptions);

これでエンドポイントに http://localhost:8080/query を指定しても問題なく動作するようになった。

まとめ

  • Tauri 2 と @tauri-apps/plugin-http を組み合わせれば localhost へのリクエストをネイティブに通せる
  • 現状のAIのレベルだなニッチな機能の開発は弱いと実感。今回はAIで開発しようと頑張ってしまった結果。無駄に2時間くらい開発にかかってしまった。今後はこの辺の判断能力もエンジニアスキルとして必要になりそうな予感
  • 今後追加したい機能
    • Authorization ヘッダーの自動更新スクリプト
    • 実行結果を Markdown 形式でクリップボードへコピー
    • エンドポイントごとに背景色を変更