Home

2026-01-27 Tailscale外部アクセス plan

Tailscale外部アクセス 実装計画

概要

外出先やスマホから開発中のアプリ（Next.js + Go API）を確認できるようにする。 Tailscaleの直接アクセス方式を採用。

現状分析

コンポーネント現状対応
Go API0.0.0.0:8080 でリッスン変更不要
Next.jslocalhost:3000 でリッスン-H 0.0.0.0 オプション追加が必要
Makefile外部アクセス用コマンドなし任意で追加

懸念点と解決策

懸念点1: Next.js の環境分離

問題: package.json の dev スクリプトを直接変更すると、ローカル開発時も常に 0.0.0.0 でリッスンすることになる。セキュリティ上、通常は localhost でリッスンする方が安全。

選択肢:

  • 案A（推奨）: Makefileで -H 0.0.0.0 を指定

    • package.json は変更せず、Makefileの外部アクセス用ターゲットでのみ -H 0.0.0.0 を指定
    • 通常の npm run dev は localhost のまま

  • 案B: package.json に dev:external スクリプト追加

    • "dev:external": "next dev -H 0.0.0.0" を追加
    • 明示的に外部アクセス用スクリプトを用意

  • 案C: package.json の dev を変更

    • 常に 0.0.0.0 でリッスン
    • 最もシンプルだが、セキュリティ面で懸念

懸念点2: フロントエンドからバックエンドへのAPI呼び出し

調査結果:

API呼び出し箇所現状外部アクセス時の動作
メインAPI（lib/api.ts）NEXT_PUBLIC_API_BASE 環境変数、未設定時は相対パスNext.jsのプロキシ経由で動作するため問題なし
ヘルスチェック（lib/constants.ts）localhost:8080 ハードコード外部アクセス時は接続不可

問題: サーバー再起動機能のヘルスチェックが localhost:8080 にハードコードされている。外部アクセス時はスマホから開発マシンの localhost に接続できないため、この機能は動作しない。

選択肢:

  • 案A（推奨）: 現状維持

    • サーバー再起動機能は開発マシン上での操作を想定した機能
    • 外部アクセス時に使えなくても実用上問題ない
    • ユーザーには「再起動機能は外部からは使用不可」と伝える

  • 案B: 環境変数化

    • NEXT_PUBLIC_BACKEND_URL のような環境変数で設定可能にする
    • 外部アクセス時は Tailscale IP を設定
    • 実装コストがかかる

実装ステップ

ステップ1: Makefileに外部アクセス用ターゲット追加

変更ファイル: Makefile

追加内容:

  • dev-external ターゲット: 両サーバーを外部アクセス可能な状態で起動
  • frontend-external ターゲット: フロントエンドを -H 0.0.0.0 で起動
  • ヘルプメッセージの更新

ステップ2: 確認とテスト

  1. Tailscaleがインストール・接続されていることを確認
  2. make dev-external で起動
  3. tailscale ip -4 でIPを確認
  4. スマホから http://<Tailscale IP>:3000 にアクセス

変更ファイル一覧

ファイル変更内容
Makefiledev-external, frontend-external ターゲット追加、ヘルプ更新

制限事項

  • サーバー再起動機能: 外部アクセス時は使用不可（localhost:8080 へのヘルスチェックが外部から到達できないため）

仕様書リンク

  • 元仕様書: 開発/検討中/2026-01-27_Tailscale外部アクセス.md

実装レポート

概要

Tailscale外部アクセス機能を実装しました。外出先やスマホから開発中のアプリ（Next.js + Go API）にアクセスできるようになります。

変更内容

変更ファイル: Makefile

ターゲット説明
make dev-external両サーバーを外部公開モードで起動
make frontend-externalフロントエンドのみを 0.0.0.0 でリッスン

使い方

  1. Tailscaleがインストール・接続されていることを確認
  2. make dev-external で起動
  3. tailscale ip -4 でIPを確認
  4. スマホ等から http://<Tailscale IP>:3000 にアクセス

制限事項

  • サーバー再起動機能: 外部アクセス時は使用不可（localhost:8080 へのヘルスチェックが外部から到達できないため）

コミット

  • 33762d1 feat: Tailscale外部アクセス用のMakefileターゲットを追加
  • 3d903ea docs: Tailscale外部アクセス計画書を完了フォルダに移動

ブランチ

feat/tailscale-external-access ブランチで作業完了。mainへのマージやpushが必要な場合はお知らせください。