こちら既に公開中の『S3にあるファイルを編集するWebアプリを作った』が正常の動作しない場合に確認してほしい部分をまとめてみました。CloudFront、WAF、API Gateway、Lambdaを含んだものになりますので、個別に役に立つ部分もあるかもしれません。
S3にindex.htmlにアクセスできない場合
この場合、よくある原因は以下とおりです。
- WAFで指定するIPのバージョンが違っている
- CloudFrontでdefault root objectを設定していない
WAFで指定するIPのバージョンが違っている
IPにはIPv4とIPv6の2種類があります。これはWAFの仕様として公開されているわけではないので、わたしの経験になりますが、IPv6が割り当てられたIPの場合、それをIP setに設定しないといけないようです。IPv6が割り当てられている状態でIP setにIPv4を設定すると、うまく接続できませんでした。ですので、IPの確認サイトにて許可したいIPにIPv6が割り当てられているかどうかの確認をおすすめします。
CloudFrontでDefault root objectを設定していない
つい忘れてしまいがちな設定がDefault root objectです。ここでS3に置くindex.htmlを指定する必要があります。プレフィックスを使っている場合はそれも指定する必要があります。
またCloudFrontでは設定すると自動的にデプロイが行われますが、完了まで時間がかかることに注意してください。
JSONエディタが正常に動作しない
この場合、よくある原因は以下のとおりです。
- index.htmlのAPIエンドポイントの指定が間違っている。
- API Gatewayに設定漏れ、設定ミスがある、デプロイしていない。
- API Gatewayのキャッシュによって修正が反映されていない。
- Lambda関数のコードに誤りがある、設定漏れ、設定ミスがある、デプロイしていない。
ブラウザでF12キーを押すことによって使える開発者ツールでNetworkタブを見ることをおすすめします。
index.htmlのAPIエンドポイントの指定が間違っている
APIエイドポイントが間違っていると、開発者ツールで以下のようなエラーになります。
index.htmlに設定するAPIエンドポイントはステージのメニューで見れる「URLを呼び出す」に書かれたURLになります。
API Gatewayに設定漏れ、設定ミスがある、デプロイしてない
API GatewayまたはLambda関数に設定ミスなどがあると開発者ツールで以下のようなエラーになります。
- POSTメソッド、GETメソッドでヘッダーのマッピングを行っていない、またはマッピング値が間違っている
- マッピング値はCloudFrontのディストリビューションドメインをシングルクォートで囲んだものになります。
- CORSを有効にしていない
- CORSを有効にしてください。忘れがちなポイントです。
- Access-Control-Allow-OriginにCloudFrontのディストリビューションドメイン名をそのまま入力してください。
- 設定してもデプロイを忘れている。
API Gatewayのキャッシュによって修正が反映されていない
わたしの経験上、API Gatewayの設定に修正を加えた後、設定が間違えていないにもかかわらず正常に動作しない場合はこれに当てはまります。このキャッシュはユーザーで削除できないため、しばらく待つか、API Gatewayの設定を消して、ミスのないように作り直す、のいずれかが解決法になると思います。わたしの場合はめんどうではありますが、APIを作り直していました。
Lambda関数にコードに誤りがある設定漏れ、設定ミスがある、デプロイしていない
- コードに間違いがある場合はPythonの
loggingモジュールなどを使って、デバッグを行いましょう。（他の言語であればそれに対応したロガーなどを使用） - 一般設定でタイムアウトをデフォルトのままにすると、時間が短すぎて正常に動作しない可能性が高いです。
- 環境変数を指定していない、または指定が間違っている。
- S3バケットやファイル名を指定してください。
- コードの反映にはデプロイが必要です。
終わりに
以上、簡単ではありますがデバッグのためのポイントを説明しました。基本的なことが多いですが、システムとしては１つでも間違いがあると正常に動作しない可能性があり、丁寧にチェックしていく必要があります。
