Hugoとベーシック認証 入居者向けサイトのベストプラクティス デプロイ時のココに注意！
以前の記事で、大家さんがサイトを立ち上げる方法の一つとして、静的サイトジェネレータのHugoを使う方法を解説しました。
それが、こちらの記事になります↓
https://tech-landlord.com/articles/third-way-for-launching-s...上の記事では、Hugoや静的サイトジェネレータの仕組みなどを具体的に説明していました。本記事と合わせてご覧ください。
一方で、上の記事では、実際の管理運用をしていくうえで必要なポイントがいくつか抜けていました。
それは、会員（入居者）が見るのだから、パスワード付きのサイトにする必要があるというポイントです。
そこで本日は、筆者が考えるベストプラクティスとして、静的ジェネレータのHugoのコンテンツとユーザ認証の仕組みをご紹介します。
Hugoのサイトをレンタルサーバー（エックスサーバー）で運用
筆者は所有する不動産賃貸物件を箱根に所有しています。このブログでも何度か出てきている、ハイドレンジア箱根という物件です。
現在、入居者はほぼ単身者で15戸、と片手に収まらないような入居者数。管理は現状、筆者と奥さんの夫婦二人でやっているので、入居者が快適に生活を送れるための情報伝達などは、手間がかからないよう工夫をしたいわけです。これだけの入居者数だと、個別にそれぞれの入居者にアクセスするというのは非効率で避けたいですよね。
そこで、入居者向けに「専用情報サイト」をつくって情報発信しています。目指すは、ここを見ればハイドレンジア箱根の生活すべてがわかる、といったところでしょうか。
なんと献身的な大家さんなのでしょう！（自画自賛…）
そのコンテンツ作成のために、静的サイトジェネレータのHugoを使ってるため、以前ブログ記事で取り上げたというのが経緯です。
Hugoはサイトジェネレータという名前の通り、HTML/CSSコンテンツを「生成」ためのツールです。したがって、ユーザーの目に止まるためには、どこかのサーバーに生成されたコンテンツを置いてユーザーがアクセス可能な状態にする必要があります。
コンテンツ作ってサーバーに置かないなんて、美味しい料理を作って自分で食べてしまう料理店のようなものです。
筆者の場合は、このブログも含めてエックスサーバーというレンタルサーバーサービスを利用しています。なかなかの高機能なレンタルサーバーで、料理店でいえば高級料亭のクラスでしょう。
このサーバーに独自ドメインを付けて、入居者向けのサイトを構築しています。
会員向けにパスワードを設定（ベーシック認証）
運用しているのは、入居者専用サイトです。ですから、当然入居者以外が見られないように配慮したいですよね。
例えば、WiFiのパスワードなど、あまり他の人に知られたくない情報も、入居者だけには共有したい。ごく普通のことです。
そこで、ベーシック認証という仕組みでサイトコンテンツ全体をガードしてしています。
この仕組みは、HTTPのプロトコルの一部として古くからあるもの。サイトにアクセスすると以下のような、ユーザー名とパスワードの入力を求める画面が提示される仕組みです。
よくあるログイン画面と思うなかれ。Web系のサービスでよくみるログイン画面とは見た目が違うのです。なんといったらいいでしょう。悪くいうと「ショボい」画面です（笑）。
なぜならこのダイアログ・ボックス、ブラウザのアドレスバーや設定画面と同様に、ブラウザー（この場合はChromeブラウザ）がブラウザのUIとして表示しているものだからです。
一方、Web系のサービス（AmazonとかGoogleと、かなんでもよい）でよく見るログイン画面は、彼らのサービス・アプリ（コンテンツ）の一部として表示しています。サービス側がHTML/CSSでプログラムとして作っている認証画面ということで、ベーシック認証とは仕組みが違うのです。
ベーシック認証は、Hugoに限らず、コンテンツ生成・管理のツールには関係なく利用可能なしくみなのです。
ユーザ管理に関しても、HTTPのプロトコルレベルで実現しているものなので、Hugoのコンテンツとは無関係なわけです。
このようなベーシック認証と一般サービスの認証との違いは、ベーシック認証を利用する上で十分に理解すべきポイントになります。
ベーシック認証はサーバー管理画面にて設定
では、どのようにベーシック認証の設定をするのでしょう？
その答えは、「サーバー」設定です。
筆者は、レンタルサーバーのエックスサーバーを使っています。エックスサーバーの管理画面をみると「アクセス制限設定」という項目があり、これがまさにベーシック認証の設定項目です（下図）。
ベーシック認証は、サーバーのファイルへのアクセスを制限するための設定項目です。設定の範囲はフォルダごとの管理になっています。そのフォルダに入っているファイルへ外部からリクエストがあった場合に、サーバーがブラウザに対して認証画面を出すように指示する、というイメージです。
ユーザー名は、サイトのオーナーがあらかじめ決めておくことになります。
Web系サービスによくあるように利用者にアカウントを作ってもらうような使い方は、ベーシック認証ではしません。サーバーのシステムをそのように開発すればできなくはないでしょうが、一般的ではないでしょう。
基本は、サーバーの管理者がIDを作成して、利用者にそのユーザー名・パスワードを知らせて利用してもらうことになります。
筆者のケースでは、筆者が管理画面でひとつだけユーザー名・パスワードを登録。それを入居者に連絡して、入居者全員が同じユーザー名でアクセスするような運用にしています。
この設定は以下のような「ユーザー設定」画面で実施します。上のアクセス制限の設定中にあった「ユーザー設定」というリンクからたどって設定します。
デプロイ時の注意
エックスサーバーの場合、アクセス制限を設定したフォルダには、.htaccessというファイルが作成されます。これをHugoで作成したコンテンツをデプロイするときに消してしまわないように注意が必要です。
設定画面から制限を「ON」にしたときにできる.htaccessファイルの中身は、以下のようになっています。
AuthUserFile "/home/ACCOUNT_NAME/SITE_NAME/htpasswd/DIR_NAME/.htpasswd"
AuthName "Member Site"
AuthType BASIC
require valid-userこの設定は、ベーシック認証が必要であるということを意味しているのと（AuthType）、許可するユーザー名とパスワードがサーバー上のどのファイルに書かれているかを示しています（AuthUserFile）。
(注：大文字のディレクトリは実際の値から書き換えたものです）
エックスサーバーの「ファイル管理」画面などで、AuthUserFileフィールドに設定されたファイル.htpasswdの中身をみると、管理画面から追加したユーザー名が書かれていることがわかります。
ベーシック認証全体としては、.htaccessと.htpasswdの２つのファイルで動作させているようです。
ここで問題となるのは、この.htaccessファイルがHugoのコンテンツを置く、まさにそのディレクトリに存在することです。なぜ問題になるかといえば、どのようにHugoのコンテンツをデプロイするかによりるのですが、コンテンツ更新時に消してしまう可能性があるからなのです。
筆者の場合は、Hugoの公式サイトの手順にあったrsyncを使った方法でデプロイしていました。そうすると、デプロイ先のサーバーのフォルダは一旦削除されて新しいコンテンツが同期される、という挙動になります。
このとき、エックスサーバーの管理画面で施した「アクセス制限＝ON」が消えてなくなりました。
コンテンツを書き換えてHugoでHTML/CSSを生成し直しサーバーにアップした時点で、ユーザー名とパスワードを促すダイアログが表示されなってしまいます。結果、世界中の人の目にさらされることになるのです（ちょっと大げさに言いました）。
こうならないためには、以下のような手順が有効です。
- エックスサーバーの管理画面で「アクセス制限」を有効にする（有効にするのは、Hugoコンテンツを配置するディレクトリ）
- エックスサーバーの該当ディレクトリにできた.htaccessをダウンロード（コピー）
- Hugoのプロジェクト・フォルダのstaticフォルダのトップに置く（下図）
このようにしておくと、Hugoが作成したコンテンツをサーバーにデプロイをする(rsyncする)際に、.htaccessも含めて同期されるので、.htaccessが消えてなくなることはありません。
めでたし、めでたし。
ユーザー名・パスワードをURLに含める
上述ように設定したベーシック認証ですが、利用者にURLを伝える際に、当然、ユーザー名とパスワードも一緒にお伝えする必要があります。
入居者用の配布物に、はやりのQRコードを貼り付けてあげると受けった方が便利でしょう。
その際にひとつ覚えておくと便利な裏技（？）があります。
ベーシック認証はHTTPプロトコルの一部の規定であるので、ユーザー名とパスワードをURLに含めることができるように作られているのです。
形式は以下のようになります（example.comというサイトのトップディレクトリに認証が必要な場合）。
QRコードジェネレータなどでQRコードを作る際に、このようにしたURLを入力しましょう。すると、URLと別にユーザー名とパスワードを教える必要がなくなるので、便利です。
もちろん、そのQRコードは人目につくような場所に貼ったりしてはいけませんよ。簡単にユーザー名とパスワードが分かってしまいますので。
覚えておくとよいでしょう。
筆者が作った、QRコードジェネレータもご利用ください。以下のリンクからQRコードの生成ができます↓
プロフィール
-
ソフトエンジニア兼不動産オーナー。
某超有名日本メーカーにおいてソフトウエア開発畑を30年近く勤務。
かつてはWindowsのアプリ開発や、組み込み機器のソフト開発を行う。プロジェクトマネジメント・オフショア開発・要件管理などの経験あり。現在は、個人開発で、JavaScript/TypeScript/React/Express、PHP/Laravel、Firebase、Google cloud、Arduino(C++)などでプログラミングを楽しむ。
サラリーマンの傍ら不動産経営を始め、現在、１棟モノの賃貸４物件を東京・神奈川に所有。夫婦でおよそ20年の賃貸経営の実績。
最近の物件では、入居者向けフリーWiFiなど、テック系の設備はDIYで自ら構築。
海外MBA取得。