Vercelのパスワード保護は月150ドル。クライアントにだけ見せるWebアプリを0円で公開した方法

作ったWebアプリを、まだ全員には見せたくない。でも特定の相手には触ってもらいたい。この「限定公開」は、思っているより選択肢が少なく、しかも料金の落とし穴があります。

結論から書きます。Vercelの本物のパスワード保護は月150ドルでした。今回は使わず、レンタルサーバーのBasic認証に切り替えて追加費用0円で同じことを実現しています。しかも用途によっては、そちらのほうが機能的に上でした。

この記事では、その判断の中身と、途中でぶつかった2つの落とし穴を残しておきます。

何を作っていたか

店舗向けの小さなツールです。スマホで使う前提で、サーバー処理もデータベースもない、ただのHTMLとJavaScriptだけのページ。

これを「店舗オーナーに配りたいが、URLを知らない人には見せたくない」状態にする必要がありました。よくある要件だと思います。

Vercelでパスワードをかけると月150ドル

まずVercelで調べました。Vercelには「Deployment Protection」という公開範囲を絞る仕組みがあり、方式が複数あります。2026年8月時点での対応状況はこうでした。

問題はPassword Protectionです。Proプランでこれを使うには「Advanced Deployment Protection」というアドオンが必要で、月150ドル（日本円でおよそ2万円台）。さらに有効にしてから30日間は解除できないという条件つきでした。

小さなツールを数人に見せるために払う金額ではありません。

無料のVercel Authenticationではダメだった理由

無料で使えるVercel Authenticationは、名前のとおり「Vercelアカウントでの認証」です。つまり見られるのは、Vercelにログインしていて、そのプロジェクトへの権限を持っている人だけ。

自分がスマホの実機で確認する用途なら、これで十分です。実際、社内確認だけならこの方式をおすすめします。

ただし今回は店舗オーナーに配るのが目的でした。相手にVercelのアカウントを作らせるわけにはいきません。ここで無料の選択肢が消えました。

もうひとつHobbyプランには注意点があります。無料プランで保護できるのはプレビュー用のURLまでで、本番ドメインは公開されたままです。本番も含めて隠すにはPro以上が必要になります。

レンタルサーバーのBasic認証に切り替えた

そこで、もともと契約しているレンタルサーバー（エックスサーバー）に置き、Basic認証をかける方式にしました。ブラウザが「ユーザー名とパスワードを入力してください」と聞いてくる、あの昔ながらの仕組みです。

• 追加費用は0円（契約済みのサーバーの空き領域を使うだけ）
• URLとID・パスワードをそのまま相手に渡せる。相手側にアカウント登録は不要
• あとで一般公開したくなったら、設定を数行消すだけで外せる

「古い技術」と思われがちですが、渡したい相手に渡せるという一点で、今回はVercelの無料枠より上でした。

置いたのは公開フォルダの下のサブディレクトリで、設定ファイルはこれだけです。

AuthType Basic
AuthName "Password Required"
AuthUserFile /home/【サーバーID】/【ドメイン】/public_html/【フォルダ名】/.htpasswd
Require valid-user

<Files ".htpasswd">
  Require all denied
</Files>

パスワードは平文では置かず、ハッシュ化した形で .htpasswd に保存します。あわせて、パスワードファイル自体を直接開けないよう塞いでおくのが大事です。

落とし穴1：スラッシュなしのURLが開けない

ここから先が、実際にやってみないと出てこない話です。

置いたサブディレクトリの親（サイト全体）にも設定ファイルがあり、その中に DirectorySlash Off という記述がありました。これは末尾のスラッシュを自動で補う動きを止める設定です。

その結果、example.com/フォルダ名/ は開けるのに、スラッシュなしの example.com/フォルダ名 が開けない状態になっていました。人に渡すURLとしては致命的です。相手はスラッシュを付けずに打つほうが多いからです。

対処は簡単で、サブディレクトリ側の設定で戻すだけです。

DirectorySlash On
DirectoryIndex index.html

親フォルダの設定は、その下の全フォルダに効きます。 既存サイトの下に新しく何かを置くときは、親に何が書かれているかを必ず先に読んでください。

落とし穴2：認証をかけたのにキャッシュから漏れる

こちらのほうが怖い問題です。

そのサーバーでは、表示を速くするために全ページをキャッシュする設定が親に入っていました。キャッシュは、一度作ったページを保存しておいて次の人に素早く返す仕組みです。

ここで想像してみてください。認証を通った人向けに作られたページがキャッシュに残り、次に来た認証していない人にそのまま返されるとしたら。鍵をかけたはずの部屋の中身が、玄関先に置きっぱなしになるようなものです。

対処として、認証をかけたフォルダだけキャッシュを止めました。

この手の事故が厄介なのは、設定した本人には気づけないことです。自分は認証を通っているので、見えて当たり前。漏れているかどうかは、意識して確かめない限り分かりません。

かかっているかどうかは、必ず自分で確かめる

そこで、設定した「つもり」で終わらせないために、機械的に確認しました。ブラウザで開いて認証画面が出た、では不十分です。

最後の1行がキャッシュ漏れの検査です。認証を通したあとに未認証で叩いて、それでも毎回拒否されるなら、キャッシュから漏れていないと確認できます。

コマンドはこれだけです。

curl -s -o /dev/null -w "%{http_code}\n" https://example.com/フォルダ名/

返ってきた数字が401なら拒否、200なら中身が見えています。200が返ってきたら、その時点で公開されているということです。

おまけ：直したのに反映されない

公開後の修正で必ずぶつかるので、これも書いておきます。

サーバーの初期設定では、CSSやJavaScriptが7日間キャッシュされる状態でした。この状態で修正版を上げても、一度アクセスした人の端末には古いファイルが残り続けます。「直したのに直っていない」の正体はたいていこれです。

分けて考えると解決します。

• HTMLは毎回サーバーに確認しに行く設定にする
• CSSやJavaScriptは、読み込むときのURLに世代番号を付ける（app.js?v=3 のように）

こうすると、直したときに番号を上げるだけで、全員に確実に新しいファイルが届きます。HTMLだけは毎回確認しに行くので、番号の変更がすぐ伝わります。

どう選べばいいか

今回の経験を、判断表にまとめます。

大事なのは、「限定公開」と一言で言っても中身が違うということです。「自分だけ見たい」のか「渡した相手に見せたい」のかで、選ぶべき道具が変わります。ここを最初に決めておくと、料金の落とし穴を踏みません。

よくある質問

Q. Vercelでパスワード保護をかけるといくらかかりますか。

2026年8月時点で、Proプランの有料アドオンとして月150ドルです。有効化から30日間は解除できません。Enterpriseプランなら標準で使えます。

Q. 無料でVercelの公開を制限できますか。

Vercel Authenticationが全プランで使えます。ただし見られるのはVercelアカウントを持つ関係者だけなので、社外の相手に配る用途には使えません。

Q. Basic認証をかけたのに中身が見えることはありますか。

サーバーのページキャッシュが有効だと起こりえます。認証をかけたフォルダではキャッシュを止め、認証成功後に未認証でアクセスして拒否されることを確かめてください。

Q. 一般公開に切り替えるときは何をしますか。

認証の設定を数行消して上書きするだけです。あわせて、検索避けの設定を入れていた場合はそれも外します。

---

「作ったけれど、公開の一歩手前で止まっている」ものがあれば、AI導入のご相談からお聞かせください。公開まで一緒に進めます。どこからAIに任せられるかを見たい方はAI任せ度の診断から。社内でAIに仕事を任せる体制の作り方は、AI社員のつくり方にまとめています。