Headless CMSのSanityで、Sanity Studioを使ってコンテンツを管理できる様にする方法（Public URL編）
JamstackアプリケーションにSanity Studioを取り付けることができます。Sanityの管理画面にアクセスするために、Next.jsアプリケーションを公開URLにデプロイする必要があります。公開URLからSanity Studioにアクセスできるようにするには、Sanityの管理用APIにアクセスできるようにCORSの登録が必要です。登録が成功した場合、Sanity Studioにログインし、アプリのコンテンツ管理画面を利用することができます。Sanity Studioにはアプリのプレビュー機能もあり、とても便利です。
目次
Sanityでは、Jamstackアプリケーション側にコンテンツ管理のUIをつける「Sanity Studio」を利用できます。
Sanity Studioをデプロイ先のURLでアクセスできる様にする方法の覚書です。
前準備: Sanityを使ったNext.jsアプリケーションをデプロイする
公開URLからのアクセスなので、Next.jsアプリをVercelなどへデプロイしましょう。
アプリについては、Sanityのスターターなどを使って手早く作りました。
公開 URLから、Sanity Studioへアクセスできるようにする
Sanity Studioは、example.com/studioでアクセスできます。
初めてのアクセスでは、「このドメインをCORS originに追加しろ（意訳）」とガイドが表示されます。
[Continue]ボタンをクリックして、Sanityの管理画面へ移動しましょう。
[Add CORS origin]ボタンをクリックします。
これで設定完了です。
登録に成功した状態で再びSanity Studioへアクセスすると、ログイン画面が表示されます。
ログインすると、コンテンツ管理画面もちゃんと表示されました。
CORSの登録ができていないと、Sanityの管理用APIにアクセスできなくなるのではないかと思います。
Studio内でアプリのプレビューができるのは、なかなか便利です。
