--- title: "「Jamstackってプレビュー環境ないの？」と思っていませんか？" date: 2025-05-06 categories: column author: 二俣 canonical: https://www.liberogic.jp/topics/20250507-jamstack/ --- # 「Jamstackってプレビュー環境ないの？」と思っていませんか？ ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/2e92dd128fa44e63879c142163aac077/mv.jpg) モダンなヘッドレスCMS構成でも、プレビュー環境はしっかり用意できます！ Vercel や Cloudflare Pages などのモダンホスティングでもBasic認証のようなアクセス制限も簡単に設定可能。従来のLAMP構成など運用に慣れていた方も、安心して移行できます。 従来のLAMP構成などでは、`/prev/`や`test.example.com/`に Basic認証をかけてプレビュー環境を用意するのが一般的なスタイルでした。 しかし、最近の Vercel や Cloudflare Pages を使ったヘッドレスCMS構成などでは、 「ビルドするとプレビュー用のURLができるけど、これがstg？」 「そもそもパスワード認証（Basic認証）は設定できるの？」 と戸惑う方が多いようです。 **結論：プレビュー環境はちゃんとあります！しかも、しっかり保護できます！** たとえば Vercel や Cloudflare Pages には、Git のブランチごとに **preview URL** を自動発行する機能が備わっています。 これは言い換えると、**最新のステージング環境を毎回自動で作ってくれる仕組み**です。 Gitでソースコードを管理していれば、新しいブランチを切って push するだけで、すぐに確認用のURLが発行されます。手動でステージング環境にファイルをアップロードする手間はゼロです。 **「でも、そのプレビューURLって外部に公開されちゃうの？」** ご心配なく。以下のような **アクセス制限も簡単に設定可能** なのです。 ### Cloudflare Pages の例 Cloudflare Pages では、プレビュー環境へのアクセス制限を設定できます。 #### Basic 認証 - 従来のプレビュー環境に近い形で、ユーザー名とパスワードによる認証を設定できます。特定の構成を除けば、こちらを利用するケースも多いかもしれません。 - ただし、**SSG (Static Site Generation) と SSR (Server-Side Rendering) を組み合わせたハイブリッド構成**の場合など、Basic 認証がうまく機能しないケースもあります。 #### Cloudflare Access - 上記のような Basic 認証が適さない場合や、より柔軟なアクセス制御を行いたい場合は、Cloudflare Access を利用します。 ![Cloudflare Accessのログイン画面キャプチャ](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/d2c08b4c000d4cf5863fba22eb65edd5/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-07%2013.13.18.png) **GUI上から以下のような設定が可能です（無料プランでは 50ユーザーまで の制限あり）。** - `example.com`などの特定のメールドメインを持つユーザーのみ許可 - 指定したメールアドレスを持つユーザーのみ許可 - Googleアカウント認証（Google Workspace との連携も可能） - IPアドレスによる制限 - 一時的なアクセスPINの発行 ![Cloudflare設定画面キャプチャ](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/56ae64c85993443ea7a422550b95f3d7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-07%2013.12.15.png) ![Cloudflare設定画面キャプチャ](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/d26d17e9f18d4701a98855c1aaabe5b4/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-07%2013.12.11.png) ### Vercel の例 Vercel でも当然プレビュー環境の保護が可能です。 - **Vercel Authentication** チームメンバー限定でのアクセス制限 - パスワード保護（Pro以上のプランで設定可） - 本番環境とプレビュー環境で異なる制限をかけることも可能 このVercel Authenticationの機能を利用することで、プロジェクトメンバーのみのアクセス、共有可能なリンクの作成などが可能です。 ちなみにVercelのプレビュー環境保護は、Password認証が別料金（$150/mo）で使いづらかったのですが、**Deploy Protection が全プランにで利用できるようになりました！** [https://vercel.com/docs/deployment-protection](https://vercel.com/docs/deployment-protection) ![Vercel設定画面キャプチャ](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/ade764a16bdb47ec8a98ef7c5948a645/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-07%2011.27.07.png) *プロジェクト設定の Deployment Protection より保護の方法を選択可能です。* ![Vercel共有リンク作成の画面キャプチャ](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/eaf87ac526c9455fae8a3ae9d47f13ab/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-05-07%2011.30.06%20(1).png) *共有可能なリンクは、Deployment Details 右上の「Share」より作成可能です。* **つまり、こういうことです！** 従来の方法**Jamstack/Vercel/Cloudflare Pages の世界**`stg.example.com` + Basic認証**ブランチごとのプレビューURL** + **パスワード/メール認証/IP制限等**手動でアップロードGit push で**自動デプロイ**アクセス制限の設定/管理がやや煩雑アクセス制限は **GUI などで比較的簡単に設定可能** 「Jamstackはおしゃれだけど、ちゃんとプレビュー環境はあるの？」 「セキュリティは大丈夫なの？」**今どきのステージングは、ブランチごとに自動発行される「プレビュー環境」なのです。そしてアクセス制限も柔軟かつ簡単に設定できます。** 今までのやり方と同じような安心感を、もっとラクに、もっとスマートに実現できます。 ぜひ次の案件から試してみてください。