ここは仕組みから学ぶ「詳しい版」です。設定を終わらせたいだけなら 全10ステップの手順書 が近道です。

世界に公開する

手順

1. 公開できる形に書き出す設定をする

手元で動いている状態と、人に見せられる状態は別物です。 配って回れる「完成品の一式」に書き出す設定を、Claudeに頼みます。

npm run dev が動いていたら、Ctrl+C で止めてください。 そのうえで、アプリのフォルダでClaude Codeを起動します。

claude

起動したら、こう頼みます。

Claudeが設定ファイルを書き換えます。何をしたか説明も返ってきます。

2. 書き出す

npm run build

エラーなく終わると、out というフォルダができます。 この中身が、そのまま世界に出る「完成品」です。

⚠️ ここでエラーが出たら、全文をコピーしてClaudeに貼ってください（2-7の型）。手元で直してから先に進みます。

3. Surgeのアカウントを作る

公開先には Surge を使います。HTMLの一式を、コマンド1つで公開できるサービスです。

npx surge login

初回は少し待つと、次の順に聞かれます。

1. email: → メールアドレスを打ってEnter
2. password: → 決めたパスワードを打ってEnter

使ったことのないメールアドレスなら、その場でアカウントが作られます。 登録ページを開く必要はありません。

⚠️ パスワードを打っても画面には何も表示されません。それが正常です。

4. 公開する

いよいよです。

npx surge out 好きな名前-数字4桁.surge.sh

{{好きな名前}} と {{数字4桁}} は、自分で決めて置き換えてください。 たとえば tanaka-hajimete-2846.surge.sh のようにします。

数字を混ぜるのは、他の人と名前がぶつかるのを避けるためです。 世界中の人が同じサービスを使っているので、短い名前はすでに取られています。

しばらく待って Success! と出れば完了です。

5. スマホで開く

表示されたURLを、自分のスマホのブラウザで開いてください。

パソコンと同じ画面が出たら成功です。 そのURLは、いま世界中の誰でも開けます。友達に送ってみてください。

6. 直したら、もう一度同じ手順

作品を直したくなったら、この2つを順に打つだけです。

npm run build

npx surge out さっきと同じURL

同じURLに上書きされます。新しいURLは増えません。

7. 公開をやめる

取り下げたくなったら、これで消せます。

npx surge teardown 消したいURL

知っておいてほしいこと

⚠️ URLを知っている人は、誰でも見られます。 パスワードはかかっていません。検索には出にくいですが、「見られて困るもの」は置かないでください。個人情報や、お客さんの資料は特にそうです。

公開したものの一覧は、いつでも確認できます。

npx surge list