アレについて記す

AWS LambdaをTypeScriptで開発するための環境構築時につまずいた点などを記す。
前編はTypeScript環境構築について、後編はSAM Local + Localstack環境構築について記載する。

今回はTypeScript + Webpack + Mocha + power-assertの組み合わせで下記を実現した

• 複数の成果物（LambdaのFunction単位で必要となるJSファイル）を生成
  
• ビルド時の引数により環境別変数やモックインスタンスの切り替えをおこなう
  
• Mocha + power-assertによるユニットテスト実行
  
• VSCodeによるデバッグ実行
  

AWSのCloudFormation（以下CFnという）にはカスタムリソースというリソースが用意されています。
これを使用すると、CFn単体では実現できないことを他のAWSリソースと組み合わて実現できます。
Lambda-backedカスタムリソースはLambdaの処理結果をCFnにて利用可能にします。

本記事ではWAF(Web ACLs)のARNをLambdaで取得し、CFnのテンプレートで利用する方法を紹介します。

シングルページアプリケーションでURLを自然にみせるために、history.pushStateを使用することがよくあります。
このURLはサーバーに存在しないリソースを指し示すため、ブラウザリロードなどの操作でリクエストを送ると404 NotFoundになってしまいます。
一般的には、サーバーに404だったらSPAのベースとなるファイル(index.html)にリダイレクトさせる設定をすることでこの問題を回避します。

CloudFront+S3を用いてVue2で作成したSPAを配信する場合も、同様の問題が発生します。
ざっとみた感じでは、CloudFrontのErrorPagesに403エラーハンドリングを設定し、index.htmlへリダイレクトさせる方法がブログなどで多く紹介されています。
上記の方法ではAPIも同じCloudFrontを通してアクセスさせた場合に、そのAPIの結果も同様にハンドリングされてしまう問題が生じます。

本記事ではErrorPagesを利用せずにindex.htmlへリダイレクトさせる方法を紹介します。