- ブリッジ兼ディレクター
- フロントエンジニアリーダー
- Webディレクター
- Other occupations (2)
- Development
- Business
目次
はじめに
Apache
.htpasswdファイルの作成
.htaccessファイルの作成
動作確認
Basic認証を解除
CloudFront Functions
CloudFront Functionsとは?
関数作成
デプロイ
動作確認
Basic認証を解除
おわりに
はじめに
Basic認証は、Webサイトにアクセス制限を設ける簡易な方法の1つです。ユーザー名とパスワードを要求し、許可された認証ユーザのみアクセスをすることができます。
本記事では、Webサーバーで利用ケースの多いApacheとTerraformなどlac構成へも導入できるAWS CloudFront Functionsを利用したBasic認証の設定方法を説明します。 (Apacheのインストール,CloudFrontの作成手順は本記事には含まれません)
Apache
Apacheでは、Apacheの設定ファイルと.htacessにてBasic認証を導入できますが、利用頻度の多い.htaccessを使用した方法をご紹介します。まずは、Basic認証を使用するために必要なファイルを用意します。
.htpasswd:
認証で使用するユーザー名とパスワードを保存するファイル.htaccess:
認証を有効にするための設定ファイル
.htpasswd
ファイルの作成
# htpasswd -c /ディレクトリ/.htpasswd ユーザ名
実行例.
# htpasswd -c /var/www/.htpasswd basic-user
New password:パスワードを入力
Re-type new password:もう一度パスワードを入力
Adding password for user basic-user
- ディレクトリ:任意ですが、ドキュメントルート外のWeb経由で直接アクセスできない場所に配置するのが推奨されます。
- ユーザ名:任意の名前。
- パスワード:コマンド実行後、パスワードの入力が求められますので複雑なパスワードを設定してください。
.htaccess
ファイルの作成
制限をかけるディレクトリに.htaccessファイルを作成。
# vim .htaccess
.htaccess ファイルに下記内容を保存。
- .htpasswdのディレクトリ:前項目で作成した
.htpasswd
ファイルのパスを指定
AuthType Basic
AuthName "Restricted Area"
AuthUserFile /.htpasswdのディレクトリ/.htpasswd
Require valid-user
準備が整いましたので稼働確認をしてみましょう。
動作確認
Webサイトにアクセスすると認証情報が求められます。
ユーザ名とパスワードを入力しアクセスできるか確認します。
Webサイトへアクセスすることができました。
Basic認証を解除
- Basic認証に関わる行を#するか.htaccessファイルを削除orリネームすることで解除することができます。
CloudFront Functions
次にCloudFront Functionsを利用したBasic認証の設定をご紹介します。
CloudFront単体ではBasic認証の機能はありませんが、CloudFront Functionsという機能を使うことで Basic認証を導入できます。
CloudFront Functionsとは?
Amazon CloudFront Functions は、CloudFront のエッジロケーションで 超高速・軽量なJavaScriptコードを実行できる機能になります。Basic認証のような簡易な処理に向いています。
エッジロケーションなど詳しい機能は、こちらのAWS公式記事にわかりやすく記載されています。
関数作成
まずは、Basic認証で使用する関数(コード)を用意します。
AWS管理コンソールより、CloudFront > 関数 > 「関数の作成」を押下
- 名前:用途がわかる名前を記載
- 説明(任意):わかりやすい内容を記載
- Runtime:最新ver
構築タブに下記コードを入力し保存する。
- authUser:ユーザ名には任意のユーザ名を入力
- authPass:パスワードには任意のパスワードを入力
// Basic認証のユーザー名とパスワードを設定
var authUser = ‘ユーザ名’;
var authPass = 'パスワード';
function handler(event) {
var request = event.request;
var headers = request.headers;
var authString = 'Basic ' + (authUser + ':' + authPass).toString('base64');
if (
typeof headers.authorization === 'undefined' ||
headers.authorization.value !== authString
) {
return {
statusCode: 401,
statusDescription: 'Unauthorized',
headers: {
'www-authenticate': { value: 'Basic' }
}
};
}
return request;
}
図.
デプロイ
作成した関数を使用するために、発行タブより関数を発行。
「関連付けの追加」より関数をCloudFrontへ関連づける
- ディストリビューション:対象のcloudfrontを選択
- イベントタイプ:Viewer requestを選択
- キャッシュビヘイビア:関連づけるビヘイビアを選択
動作確認
Webサイトにアクセスすると認証情報が求められます。
ユーザ名とパスワードを入力しアクセスできるか確認します。
Webサイトにアクセスすることができました。
Basic認証を解除
CloudFrontより関数の関連付けを削除するのみでBasic認証を解除できます。
おわりに
設定未経験の方や設定方法を忘れた方などのご参考になればと思います。
弊社のインフラチームではAWS,ドメイン、メールサーバ、IaC、CI/CDパイプライン構築など幅広く対応しています。
コムデではインフラチームメンバーを募集中です。
興味のある方は、ぜひご応募ください!