ローカルの開発モックを ngrok で公開し、Backlog Wiki を自動更新するシェルスクリプト

レビュー担当者にモックアプリを見せたいとき、毎回「URL 変わりました」と連絡するのが面倒になったので、ngrok 起動 → Backlog Wiki 自動更新を1コマンドで済ませるスクリプトを作りました。

背景

社内プロジェクトで React のモックアプリを開発しています。レビュー担当者（非エンジニア）にモック画面を確認してもらう際、以下のような手順を毎回踏んでいました：

npm run dev でローカルサーバーを起動
ngrok http 3000 でトンネルを張る
発行された URL をコピー
Backlog の Wiki ページを開いて URL を貼り替える
レビュー担当者に連絡

ngrok の無料プランでは URL が起動ごとに変わるため、毎回 Wiki を手動更新する必要がありました。これを自動化します。

スクリプトの全体像

./scripts/serve-public.sh [user:password]

1コマンドで以下が実行されます：

Vite dev server 起動
       ↓
ngrok トンネル開通（Basic認証付き）
       ↓
Backlog Wiki に URL を自動反映
       ↓
Ctrl+C で全プロセス停止

実装のポイント

1. Vite の起動待ち

Vite dev server はバックグラウンドで起動しますが、すぐには HTTP リクエストを受け付けません。ポーリングで起動完了を待ちます：

1
2
3
4
5
6
for i in $(seq 1 15); do
  if curl -s -o /dev/null http://localhost:$PORT 2>/dev/null; then
    break
  fi
  sleep 1
done

15秒以内に応答がなければエラーとして終了します。

2. ngrok の URL 取得

ngrok は起動後にローカル管理 API（http://localhost:4040）を提供します。ここから公開 URL をプログラマティックに取得できます：

1
2
URL=$(curl -s http://localhost:4040/api/tunnels \
  | python3 -c "import sys,json; t=json.load(sys.stdin)['tunnels']; print(t[0]['public_url'] if t else '')")

3. Backlog API v2 による Wiki 更新

ここが今回の本題です。Backlog の Wiki ページを API 経由で更新します：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
BACKLOG_WIKI_ID="${BACKLOG_WIKI_ID:-5018719}"

# Wiki の内容を組み立て
WIKI_CONTENT="## モックの UI のアクセス
...
URL: ${URL}
...
"

# URL エンコードして PATCH リクエスト
ENCODED_CONTENT=$(python3 -c "import urllib.parse,sys; print('content=' + urllib.parse.quote(sys.stdin.read()))" <<< "$WIKI_CONTENT")

curl -s -X PATCH \
  "https://example.backlog.com/api/v2/wikis/${BACKLOG_WIKI_ID}?apiKey=${BACKLOG_API_KEY}" \
  -d "$ENCODED_CONTENT"

ポイント：

BACKLOG_API_KEY が未設定の場合はスキップ（チーム内で API キーを持っていないメンバーでも動作する）
BACKLOG_WIKI_ID は環境変数でオーバーライド可能（別の Wiki ページにも対応）
Wiki 本文に Markdown を使えるので、コードブロックで URL と認証情報を見やすく表示

4. Ctrl+C での一括停止

trap で Vite と ngrok の両プロセスを確実に停止します：

1
2
3
4
5
6
7
cleanup() {
  kill $NGROK_PID 2>/dev/null
  kill $VITE_PID 2>/dev/null
  wait $NGROK_PID 2>/dev/null
  wait $VITE_PID 2>/dev/null
}
trap cleanup EXIT INT TERM

wait を呼ぶことで、ゾンビプロセスが残るのを防いでいます。

使い方

1
2
3
4
5
6
7
8
9
# 前提: ngrok のインストール
brew install ngrok

# デフォルト認証（reviewer:cbm-review-2026）で起動
export BACKLOG_API_KEY="your-api-key-here"
./scripts/serve-public.sh

# カスタム認証で起動
./scripts/serve-public.sh tanaka:mypassword

実行結果：

Vite dev server を起動中 (port 3000)...
Vite dev server 起動完了
ngrok を起動中...

=========================================
  Mock app 公開完了
=========================================
  URL:      https://xxxx-xxx-xxx.ngrok-free.app
  ID:       reviewer
  Password: cbm-review-2026
  管理画面: http://localhost:4040
=========================================

Backlog Wiki を更新中...
  Backlog Wiki 更新完了: https://example.backlog.com/alias/wiki/5018719

Ctrl+C で停止

注意点

ngrok 無料プランの制限: 初回アクセス時に「Visit Site」確認ページが表示されます。レビュー担当者には事前に伝えておきましょう
Vite の設定: vite.config.ts に server.host: true と server.allowedHosts の設定が必要です
API キーの管理: BACKLOG_API_KEY は .bashrc や .envrc で管理し、リポジトリにはコミットしないでください

まとめ

「URL が変わるたびに Wiki を更新する」という小さな手間ですが、自動化することで確実にストレスが減りました。Backlog API v2 は認証が API キーだけで手軽に使えるので、こうしたちょっとした自動化との相性が良いです。

同じような「開発環境を非エンジニアに共有する」場面で参考になれば幸いです。

ローカルの開発モックを ngrok で公開し、Backlog Wiki を自動更新するシェルスクリプト#

背景#

スクリプトの全体像#

実装のポイント#

1. Vite の起動待ち#

2. ngrok の URL 取得#

3. Backlog API v2 による Wiki 更新#

4. Ctrl+C での一括停止#

使い方#

注意点#

まとめ#