Topics

In a traditional LAMP configuration,/prev/ortest.example.com/The general style was to use Basic authentication to prepare a preview environment.

However, with the latest headless CMS configurations using Vercel or Cloudflare Pages, many people seem to be confused, asking questions like, "When I build, a preview URL is created, but is this stg?" and "Can I even set up password authentication (Basic authentication)?"

Conclusion: The preview environment is great! And it's well protected!

For example, Vercel and Cloudflare Pages have a separate Git branch for each branch.preview URLIt has the function to automatically issue the following.A system that automatically creates the latest staging environment every timeIf you manage your source code with Git, you can create a new branch and push it, and a confirmation URL will be issued immediately. There is no need to manually upload files to the staging environment.

"But will that preview URL be made public?"

Don't worry, there areAccess restrictions can be easily setThat's it.

Cloudflare Pages Example

Cloudflare Pages allows you to restrict access to the preview environment.

Basic Authentication

• You can set up authentication using a username and password in a similar way to the traditional preview environment. Except for specific configurations, this is likely to be the preferred method.
• however,A hybrid configuration that combines SSG (Static Site Generation) and SSR (Server-Side Rendering)There are some cases where Basic authentication does not work well, such as:

Cloudflare Access

• If Basic Authentication as described above is not suitable or if you want more flexible access control, use Cloudflare Access.

The following settings can be made from the GUI (the free plan is limited to 50 users).

• example.comOnly allow users with specific email domains, such as
• Only users with the specified email address are allowed
• Google account authentication (integration with Google Workspace is also possible)
• IP address restriction
• Issuance of a temporary access PIN

Vercel example

Of course, Vercel also allows you to protect the preview environment.

• Vercel AuthenticationRestricted access to team members only
• Password protection (available on Pro and above plans)
• It is possible to set different restrictions for the production environment and the preview environment.

By using the Vercel Authentication feature, you can limit access to project members only, create shareable links, and more.

By the way, Vercel's preview environment protection was difficult to use because password authentication was an additional charge ($150/mo),Deploy Protection is now available on all plans!

https://vercel.com/docs/deployment-protection

So, this is what it means!

"Jamstack is cool, but does it have a proper preview environment?" "Is it secure?"Modern staging is a "preview environment" that is automatically published for each branch, and access restrictions can be flexibly and easily configured.

You can achieve the same peace of mind as with the traditional method, but more easily and smartly. Give it a try for your next project.