Heroku で静的サイトに Basic認証 をかける方法

結論(手順)

  • heroku-buildpack-static というビルドパックを用います
  • このビルドパックの設定ファイルである static.json"basic_auth": true と指定して、Basic認証を有効にします
  • ユーザ名とパスワードを .htpasswd または環境変数に設定します

手順の詳細

1. heroku-buildpack-static というビルドパックを用います

VuePress のデプロイの手順でも推奨されているheroku-buildpack-static というビルドパックをインストールします。

具体的には、ダッシュボードの「Settings」タブの「Buildpacks」の項目で「Add buildpack」を選択し、heroku-buildpack-static のリポジトリを指定してインストールします。

f:id:gregminster:20200216163016p:plain

f:id:gregminster:20200216163013p:plain

2. ビルドパックの設定ファイルである static.json"basic_auth": true と指定して、Basic認証を有効にします

公式ドキュメント に書いてあるように、設定ファイルである static.json を作成し、以下の行を書き加えます。Basic認証 の機能だけを用いたい場合は、以下の行だけを書いた static.json を用意すればよいです*1

{
  "basic_auth": true
}

3. ユーザ名とパスワードを .htpasswd または環境変数に設定します

Basic認証用のユーザ名とパスワードを設定します。2つの方法があります。

1つ目の方法: .htpasswd ファイルに記述する

プロジェクトのルートディレクトリに .htpasswd というファイルを用意し、そこにユーザ名とパスワードを書きます(テキストファイルです)。一般的な .htpasswd の書式です。例えば以下のようになります。ユーザ名 が foo で、パスワードが bar の場合です。

foo:$apr1$JbNy4cjB$SnBqnmSmZgGs2R8IBVD750

注意点は、パスワードはハッシュ化された内容を記述する という点です。パスワードの文字そのものを記述しても動作しません。

文字列をハッシュ化するためにはコマンドを実行する方法もありますが、以下のようなWebサービスを利用するものいいでしょう。不安なようでしたら、コマンドで行いましょう。なお、「暗号化方式*2」は特段の理由がない限り「MD5」を選びます。

htaccess.cman.jp

2つ目の方法: 環境変数にユーザ名とパスワードを設定する

Heroku の環境変数にユーザ名とパスワードを設定することもできます*3。ユーザ名のキーは BASIC_AUTH_USERNAME で、パスワードのキーは BASIC_AUTH_PASSWORD です。

ここでも注意する点としては、パスワードはハッシュ化された内容を記述する という点です。

4. ユーザ名とパスワードを設定するにあたってどちらの形式がいいのか

ユーザ名とパスワードを設定する際に、.htpasswd 形式と環境変数形式にはそれぞれの特徴があります*4。なお、以下において「パスワード」というのはハッシュ化されたパスワードを指します*5

  • .htpasswd 形式では、ユーザ名とパスワードを複数行に渡って書くことができるので、複数のユーザ名とパスワードのペアでBasic認証の突破が可能になります
  • .htpasswd 形式では、リモートリポジトリを使う場合ではファイルをリポジトリに直接置くことになりますので、リポジトリを見られる人ならば誰でもその内容が見られます
    • もっとも、ハッシュ化されているので、実質的には、生のユーザ名とパスワードが分かってしまうということは無いかとは思います
    • 誰が編集したのか、どういう履歴をたどったのかが明確になります
    • パブリックリポジトリの場合は勝手に変更されるなどのリスクがあるかと思います
  • 環境変数形式では、ユーザ名とパスワードのペアは一組だけです
  • 環境変数形式では、Heroku のダッシュボードの「Settings」にアクセスできる権限がない人には、ユーザ名とパスワードは分かりません
    • 狭い範囲でしか見られたり変更されたりすることがないという心理的な安心感があります

補足

PHP のビルドパックを用いる方法などよりも断然に楽かなと思います*6

*1:※ 未確定情報なのですが、こちらの設定が false でも、次の節で説明する環境変数が設定されていると Basic認証 が有効なることがあるようです

*2:実際はハッシュ化

*3:こちらが優先されるようです

*4:以下に挙げていること以外にもあるかもしれません

*5:生のパスワードではない、ということです

*6:heroku-buildpack-static は Webサーバ に nginx を使います

Powered by はてなブログ