MkDocsをCognito認証付きでS3+CloudFrontでサーバーレスホスティング

MkDocsが便利なので、AWSでサーバーレスかつ認証付きでホスティングできないか試してみました。

MkDocsを題材にしてますが、静的ファイルのポスティングするなら流用できると思います。

やること

Lambda@Edgeを使ってCognitoの最低限の認証を組み込みます。

コード

こちらで公開していますのでcloneしてください。

github.com

git clone https://github.com/yomon8/cognito-serverless-mkdocs.git

前提

  • Serverless Framework Version 3
  • nodejs
  • python
  • Cognito UserPool & Application Client

デプロイしてみる

早速デプロイしてみます。

設定

まずは設定ファイルを編集します。

cp config.json{.sample,}
vi config.json

S3のBuketとCognito UserPoolの設定情報入れます。

AWSリソースのデプロイ

NPMモジュールをインストールします。

npm install

Serverless Frameworkでリソースをデプロイします。

sls deploy

Lambda@Edgeだけでなく、S3やCloudFrontなど以下の絵のCognito以外がここでデプロイされます。設定は serverless.yml だけなので確認してみてください。

Cognitoの認証を行っているLambda@Edgeのコードは下にリンク貼ってある cognito-at-edge といモジュールを使うことでこれだけです。

const { Authenticator } = require('cognito-at-edge');
const config = require('./config.json');

const authenticator = new Authenticator(config.cognito);
exports.handler = async (request) => authenticator.handle(request);

MkDocsのドキュメントを配置

MkDocsのディレクトリに移動してPythonパッケージをインストールします。

cd ./mkdocs
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

まずはデフォルトのまま、MkDocsの静的ファイルをビルドして、先程作成したS3に同期します。

mkdocs build
aws s3 sync ./site s3://your-bucket-name

動作確認

デプロイしたCloudFrontのURLをCognitoの許可されているコールバックURLに追加しておきます。

https://xxxxx.cloudfront.net/ にアクセスしてみると、以下のようにCognito側(例 https://xxxxx.auth.ap-northeast-1.amazoncognito.com) にリダイレクトされ認証を聞かれます。

認証通すとコンテンツを見ることが可能です。

デベロッパーツール等でネットワークやCookieを確認すると認証動いていること確認できると思います。

本当にシンプルに最低限の認証しているだけで、サインアウト等も実装していないですが、どこかで役に立つかもしれません。

参考URL

Lambda@Edge デザインベストプラクティス | Amazon Web Services ブログ