domain-mask について
domain-maskは、デモや録画で実際のWebページをカスタムドメインで表示するスキルです。mkcertの信頼済み証明書を使うローカルHTTPSリバースプロキシを起動し、hosts設定も管理します。macOS限定で、1回につき1ドメインを扱います。
主な機能
- 01表示用ドメインでターゲットURLをプロキシ
- 02ローカルHTTPSリバースプロキシで配信
- 03mkcertで信頼済み証明書を生成
- 04hostsファイルの項目を追加・削除
- 051回の実行につき表示用ドメインは1つ
活用シーン
- 01デモのアドレスバーに整ったドメインを表示
- 02カスタムドメインでWebページを録画
- 03信頼済みのローカルHTTPSで対象サイトをプレビュー
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ adobe/ skills --skill domain-maskインストール後、Claude Code で/domain-maskを入力して読み込まれたか確認します。
同梱ファイル.releaserc.jsonpackage.json
詳細
domain-mask
デモや録画で、URL をカスタムドメインの背後に隠します。HTTPS リバース
プロキシによって、実際の URL(例:https://main--mysite--org.aem.page)から
コンテンツを配信しながら、アドレスバーには分かりやすいドメイン(例:wknd.adventures)を
表示できます。mkcert による信頼済み証明書を使うため、ブラウザーに警告は表示されません。
要件
- Node 22 以降、mkcert(
brew install mkcert && mkcert -install)、sudo(ポート 443 と/etc/hosts用) webCLI(このコマンドではplaywright-cliは必要ありません)。一度だけ場所を確認します:
# <skill-dir> is the directory containing this SKILL.md
WEB=$(command -v web || echo "node <skill-dir>/../../cli/dist/web.mjs")
その後、$WEB … を実行します。標準出力には JSON ドキュメントが 1 つだけ出力されるため、
$WEB … > file.json としても問題ありません。
公開後の代替手段:npx -y @adobe/web-cli。絶対パスの <skill-dir> を使用してください。そこへ cd しないでください。
ワークフロー
ステップ 1:入力を収集する
ユーザーに次の情報を尋ねる(またはメッセージから抽出する):
- 表示ドメイン:表示するドメイン(例:
wknd.adventures) - ターゲット URL:プロキシ先の実際の URL(例:
https://gabrielwalt.github.io)
ステップ 2:前提条件を確認する
which mkcert || echo "Install mkcert: brew install mkcert && mkcert -install"
mkcert が見つからない場合は、インストールして mkcert -install を一度実行するようユーザーに伝えます。
ステップ 3:ユーザーにプロキシを起動してもらう
このコマンドは sudo パスワードを求め、Ctrl+C が押されるまでフォアグラウンドで動作するため、ユーザー自身のターミナルで実行してもらいます。WEB を解決済みの形式に置き換えたコマンドを伝えます:
sudo env CAROOT="$(mkcert -CAROOT)" $WEB mask "<display-domain>" "<target-url>"
CAROOT は sudo の前に解決されます。そのため、mkcert は root のホームディレクトリにある CA ではなく、ユーザーがインストールした CA で署名します。root のホームディレクトリにある CA はブラウザーに信頼されません。
root 権限がない場合、コマンドは 2(USAGE)で終了します。
このコマンドは /etc/hosts に 127.0.0.1 <display-domain> を追加し、mkcert で信頼済み証明書を生成して、ポート 443 で HTTPS リバースプロキシを起動し、
{ url, displayDomain, targetUrl } を出力します。
次のようにユーザーに伝えます:
https://<display-domain>を開くと、アドレスバーに鍵アイコンとともに表示ドメインが表示されます- 完了したら Ctrl+C を押します。hosts エントリーが削除され、証明書がクリーンアップされます
ステップ 4:クリーンアップを確認する
ユーザーがプロキシを停止した後、hosts エントリーが削除されたことを確認します(出力がなければクリーンです):
grep -Fx '127.0.0.1 <display-domain>' /etc/hosts
行が残っている場合は、ユーザーに削除してもらいます。. をエスケープして sed がその行だけに一致するようにします。例として wknd.adventures の場合:
sudo sed -i '' '/^127\.0\.0\.1 wknd\.adventures$/d' /etc/hosts
制限事項
- macOS のみ(
/etc/hostsのパス、brew install mkcert) - sudo が必要です(特権ポート 443 と hosts ファイル)
- 1 回の実行につき表示ドメインは 1 つです
- HTML/CSS/JS のレスポンス本文内の URL は書き換えません