Netlify + GatsbyJS + Netlify CMSの環境にBasic認証を掛けようとしてハマったこと
こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。
Gaji-Labo のコーポレートサイトは Netlify + GatsbyJS + Netlify CMS という環境になっていますが、昨年 Netlify の機能でサイトのプレビュー環境にBasic認証を掛けるのを試した結果、壁にぶつかってしまったことがありました。
結論から言うと、GatsbyJS + Netlify CMSとBasic認証を共存させることは出来ないことが分かったので、知見として共有したいと思います。
Basic認証を掛けようとしたきっかけ
Netlify の機能の1つに、GitHubにPRを立てた際、そのPRのプレビュー環境のリンクが自動で作成され、確認できるというものがあります。
この機能はとても便利なのですが、プレビュー環境にはデフォルトでは何の認証も掛かっておらず、URLさえ分かれば誰でもアクセスできてしまい、またそのプレビュー環境は他から削除できないという問題がありました。
幸い、同じく Netlify の機能の1つに特定のデプロイ時のみにBasic認証を掛ける機能があるため、プレビュー環境にのみBasic認証を掛けるということを行おうとしました。
プレビュー環境にBasic認証を掛けること自体は上手くいきましたが、掛けた結果、Netlify CMSの管理画面を使おうとすると、無限にダイアログが出て確認できなくなるという問題が発生しました。
問題解決のために試したこと
まずはBasic認証を全てのディレクトリに掛けるのではなく、 CMSで使用するディレクトリだけを除いた全てに指定するという方法を試しました。
しかし、存在するページはBasic認証されるものの、404のページは見えてしまうという壁にぶつかりました。 GatsbyJS を使用しているため、SPAなので404ページでもアクセスできれば全ページ遷移できてしまうという問題が残ったままでした。
Netlify のサポートにも問い合わせをしたところ、以下の回答が返ってきました。
Hello,
The basic-auth header isn’t really meant to be permanent authentication solution. You could try setting a > > password for your site here: https://app.netlify.com/sites/[サイトURL]/settings/access#password-jwt-secret and see if that works for you. You’ll also want to remove the basic-auth header.
Basic認証は永続的に使うことを意図したものではなく、サイト全体にパスワードを掛けたい場合はサイトパスワードを使った方がいい、という内容でした。
サイトパスワードを掛けると公開されているページにも認証が掛かってしまうため、結論として、 GatsbyJS + NetlifyCMS とBasic認証は共存できないということになりました。
結局Basic認証を掛けるのはやめ、プレビュー環境の問題は技術ではなく運用方法で対処するようにしました。
まとめ
Netlify のプレビュー環境にBasic認証を掛けることは出来るものの、それと GatsbyJS + Netlify CMS を共存させることは出来ないという結論になりました。これから Netlify CMS を使う方の知見に役立てていただければ幸いです。
また、この問題に関して何か知見などあったら是非教えていただけるとありがたいです！
Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています
Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。
現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい！
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください！
お問い合わせしてみる！
