nuxtで作成したSPAをs3ホスティングし、cloudfront + lambda@edgeでbasic認証をかけて配信する

タイトルの通り。

nuxt

% npx create-nuxt-app app

SPAなので以下のあたりの設定になります。
他はお好みで。僕はtypescriptを使います。typescriptしか勝たん。

> ? Rendering mode: Single Page App
> ? Deployment target: Static (Static/JAMStack hosting)

% cd app
% npm run build
% npm run generate

generateを実行すると、デフォルトだと dist/ とその中にファイル群が生成されます。

s3

適当にバケットを作成でOK
アクセスも全てプライベートでOK
静的ウェブサイトホスティングも無効のままでOK

dist/ の中身を直下に全てアップします。

cloudfront

ディストリビューションの作成

• Origin domain: 先ほど作ったs3バケット
• s3ののアクセス: OAIを新規に作成( Create new OAI )してそれを利用。バケットポリシーのアップデートをする。（以下の画像の状態）

• Viewer protocol policy: Redirect HTTP to HTTPS
• Allowed HTTP methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
• その他は全てそのままでOK

lambda@edge

nuxtのルーティング用とbasic認証用で2つ用意する

参考: Lambda@Edge イベント構造

• ビューアーリクエスト
  • basic認証用
  • 参考: CloudFront Lambda@Edge with Python 3.8 で Basic 認証を実現する
  • 参考: Amazon CloudFrontとAWS Lambda@EdgeでSPAのBasic認証をやってみる
• オリジンリクエスト
  • nuxtアプリケーションでのルーティング用
  • リクエストを受けてパスを書き換えるような処理
  • 参考: nuxt generate + S3 + CloudFront + Lambda Edge で静的サイト構築＆ハマりポイントと解決法 / Lambda Edge でオリジンパスのハンドリングを設定する
  • 参考URLをもとに、python3.8に書き換えたものが以下のコードとなっている

import re

def lambda_handler(event, context):
    suffix = '/index.html'
    append_to_dirs = 'index.html'

    # e.g.) "/some/page" but not "/", "/some/" or "/some.jpg"
    regex_suffixless = r'^/(?=.+)(?!.+\..+$)(?!.*/$).*$'

    # e.g. "/some/" or "/some/page/" but not root "/"
    regex_trailing_slash = r'^.+/$'

    request = event["Records"][0]["cf"]["request"]
    uri = request["uri"]

    if suffix and re.match(regex_suffixless, uri):
        request["uri"] = uri + suffix
        return request

    if append_to_dirs and re.match(regex_trailing_slash, uri):
        request["uri"] = uri + append_to_dirs
        return request

    return request

これでSPAにbasic認証をかけて周りに共有することができた。
（今回はIP制限かけられない縛りでこの方法をとってみた）