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のスターターなどを使って手早く作りました。
![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2023/03/4c3e6bcce443e39477e8a1054e508e85-20230317232323.png?&d=1140)
公開 URLから、Sanity Studioへアクセスできるようにする
Sanity Studioは、example.com/studio
でアクセスできます。
初めてのアクセスでは、「このドメインをCORS originに追加しろ(意訳)」とガイドが表示されます。
![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2023/03/439b7f0448bd8725223c59a92619c913-20230317232226.png?&d=1140)
[Continue]ボタンをクリックして、Sanityの管理画面へ移動しましょう。
![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2023/03/95a2954e81c67d2345b9e851fea86d1b-20230317232329.png?&d=1140)
[Add CORS origin]ボタンをクリックします。
これで設定完了です。
登録に成功した状態で再びSanity Studioへアクセスすると、ログイン画面が表示されます。
![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2023/03/85d382917a933a17dbaad8c5d4d0f21f-20230317232357.png?&d=1140)
ログインすると、コンテンツ管理画面もちゃんと表示されました。
CORSの登録ができていないと、Sanityの管理用APIにアクセスできなくなるのではないかと思います。
![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2023/03/cd1af84ccf39f368a10ed80bfb76e187-20230317232430.png?&d=1140)
Studio内でアプリのプレビューができるのは、なかなか便利です。
![](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2023/03/75a613239c9b601bc923fe35fcb39545-20230317232526.png?&d=1140)
![](/images/undraw_happy_feeling.png)
ブックマークや限定記事(予定)など
WP Kyotoサポーター募集中
WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。
14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。