サーバレスのサムネイル

サーバレス

Netlify CMSをサブドメインで使えるようにする方法

公開日: 2019.10.30

Netlifyで構築した静的サイトの管理画面を構築できる「Netlify CMS」を従来のサブディレクトリではなく、サブドメインで構築する方法をまとめました。

編集ノート:SERVERSUSでは、パートナーリンクからコミッションを得ています。コミッションが記事の意見や、サービスの評価に影響を与えることはありません。

Netlify CMSとは?

静的サイトのホスティング・サーバーレスサービス・Netlifyが開発する、静的サイトジェネレータのための無料管理画面ツールです。

Netlify CMS

通常、静的サイトではWordPressやブログサービスのようなオンライン管理画面がありませんが、Netlify CMSは、Gitレポジトリを操作することで、管理画面と同じ役割を果たしてくれます。

導入方法も非常に簡単で、公開ディレクトリにNetlify CMSのjavascriptファイルを読み込むHTMLファイルを置いて、Netlify側で設定をすればすぐに使えるようになります。

公式ドキュメントやネット上のNetlify CMSの紹介記事では、公開ディレクトリ直下に「/admin/」ディレクトリを掘ってそこに必要ファイルを設定する流れになっています。

しかし、これだと通常のコンテンツと混在してしまうのと、管理画面がわかりやすく公開されてしまうので、サブドメインでのみ運用する方法を試してみました。

Netlify CMSをサブドメインに設定する

ドメイン構成

サブドメインを使うので独自ドメインを持っている前提で進めます。

ドメイン構成は、

  • 公開ドメイン:www.example.com
  • 管理画面ドメイン(Netlify CMS):admin.example.com

とします。

ファイル構成

Netlify CMSのファイルは、公式ガイドの通り、公開ディレクトリ下の「/admin/」に設置します。

publicディレクトリが公開ディレクトリだとしたら、

- public/
  - admin/
    - index.html
    - config.yml

となります。

この設定の状態でレポジトリにpushして、Netlifyでビルド&デプロイ&リリースします(pushすればNetlifyが自動でやってくれます)。

サブドメインをNetlifyに登録&DNSにレコード登録

続いて、サブドメインをNetlifyで使えるようにNetlifyの管理画面から登録します。

Netlifyのドメイン追加画面 プロジェクトサイトのページ(今回の場合は、example.com)から「Settings > Domain management > Custom domains」で、「Add domain alias」をクリックして、ドメイン名を入力して登録します。

重要なのは、公開ドメインと同じプロジェクトサイトに追加です。サブドメイン用に新たにプロジェクトサイトを追加する必要はありません。

設定ができると、aliasは、

の3つになると思います。

Netlifyに登録ができたら、DNSレコードでadminのCNAMEをNetlifyに向けます。

_redirectsを設定

このままでは、example.comもadmin.example.comも同じ内容を表示してしまうので、_redirectsを設定して、example.comは公開内容を、admin.example.comはNetlify CMSだけを表示するようにします。

/admin https://www.example.com   301
/admin/ https://www.example.com   301
/admin/* https://www.example.com/:splat   301
https://admin.example.com/ /admin/   200
https://admin.example.com/* /admin/:splat   200

やっていることは、

となります。

Netlifyのリダイレクト設定については、別記事でまとめてあるのでそちらもご参照ください。

これで、公開ドメインのadminにはアクセスができなくなり、管理画面ドメインはNetlify CMSのみを読むようになります。

実際に、www.example.com/admin/とadmin.example.comの両方にアクセスしてみて、それぞれが正しく表示されていれば成功です。


Netlify CMSをサブドメインで使えるようにする方法をまとめました。

adminドメインだけにBasic認証をつけてよりセキュリティを高めることができます。(NetlifyではBasic認証は課金ユーザーのみに提供されている機能ですが)

カスタマイズ次第でいろんなことができるNetlify CMS。ぜひお試しください。


価格は記載がある場合を除き、すべて税込みです。

関連キーワード

サーバレスの新着記事