🚀

vibe-kanban × Cloudflare Tunnelでいつでもどこでもバイブコーディング

に公開
Vibe Coding
claudflare
tech

🏖 はじめに

バイブコーディング中毒のみなさん、こんにちは🤓

今回紹介するのは、ローカルで起動するOSSのKanbanボード vibe-kanban を
Cloudflare Tunnel + Access で安全に外部公開し、ブラウザさえあればいつでもどこでもバイブコーディングができる仕組みです

📲 成果物

https://youtube.com/shorts/KsH-09WtbBc?feature=share

💡 やること

  • ローカルの vibe-kanban を固定ドメインで公開（例: vibe.yourdomain.com）
  • GitHub認証で自分だけアクセス可能にする

🧩 使用技術

ツール 役割
vibe-kanban ローカルで動くKanbanボード（npx vibe-kanban）
Cloudflare Tunnel ローカルサーバーを固定ドメインで公開
Cloudflare Access GitHub認証によるアクセス制御
cloudflared Tunnelクライアント（CLI）

⚙️ セットアップ手順

1. cloudflaredをインストール

brew install cloudflare/cloudflare/cloudflared

2. Cloudflareにログイン

cloudflared tunnel login

ブラウザで認証が完了すると、Cloudflareのアカウントと紐付きます。

3. トンネル作成とDNS設定

# トンネル作成
cloudflared tunnel create vibe

# DNSルーティング設定
cloudflared tunnel route dns vibe vibe.yourdomain.com

🚀 vibe-kanbanをトンネル経由で公開する

vibe-kanban は起動時に 動的ポート（毎回異なる） で立ち上がります。
そのため、起動後にポートを自動検出してトンネルを開くスクリプトを作りました。
（ポートを固定するオプションもあるのですがコンフリクトするとめんどうなので、空いているポートを動的に使ってもらうデフォルトの挙動を使うことにしています）

start-vibe.sh 

#!/bin/bash

cleanup() {
    echo ""
    echo "🛑 Stopping services..."
    
    if [ -n "$TUNNEL_PID" ]; then
        kill $TUNNEL_PID 2>/dev/null
    fi
    
    if [ -n "$VIBE_PID" ]; then
        kill $VIBE_PID 2>/dev/null
    fi
    
    rm -f /tmp/vibe-kanban.log
    echo "✅ Cleanup complete"
    exit 0
}

trap cleanup INT TERM

echo "🚀 Starting vibe-kanban..."
npx vibe-kanban > /tmp/vibe-kanban.log 2>&1 &
VIBE_PID=$!

echo "⏳ Detecting port from logs..."
for i in {1..30}; do
    sleep 1
    PORT=$(grep -oE "Server running on http://127\.0\.0\.1:[0-9]+" /tmp/vibe-kanban.log | grep -oE "[0-9]+$" | head -1)
    if [ -n "$PORT" ]; then
        echo "✅ Detected port: $PORT"
        break
    fi
done

echo "🌐 Starting Cloudflare Tunnel on http://localhost:$PORT..."
cloudflared tunnel run --url http://localhost:$PORT vibe &
TUNNEL_PID=$!

echo "✨ Running! Press Ctrl+C to stop."

wait $TUNNEL_PID

エイリアスを設定

echo "alias start-vibe='~/start-vibe.sh'" >> ~/.zshrc
source ~/.zshrc

これで start-vibe コマンド一発で起動できます。

🔐 GitHub認証で保護する

デフォルトではTunnel経由で誰でもアクセス可能です。
Cloudflare Access を設定して、GitHubユーザーのみ許可しましょう。

1. Cloudflare OneでGitHub連携を追加

2. GitHubでOAuth App作成

3. Cloudflare Accessでアプリ作成

  • Access > Applications > Add an application
  • Type: Self-hosted
  • Domain: vibe.yourdomain.com
  • Policy: Allow → GitHub usernames に自分のユーザー名を指定

これで、あなたのGitHubアカウントだけがアクセス可能になります。

🧠 悩みポイント

  • レスポンシブ完全対応ではないので、一部見づらい部分もある
  • エディタは開けないので、PRで差分を見ながらチャットで指示出しする形になる

🎯 まとめ

Cloudflare Tunnel + Access を組み合わせると、
ローカルで動かしているツールを「安全に、どこからでも使える」ようになります。

vibe-kanbanに限らず、
個人用の管理ツールや開発ダッシュボードにも応用できます。

🔗 参考リンク

Discussion