SaaS / FaaSsainty.io

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内でアプリのプレビューができるのは、なかなか便利です。

ブックマークや限定記事(予定)など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

広告ここから
広告ここまで

Related Category posts