動作の確認
CloudFrontとAPI Gatewayの準備が完了したら、実際に動作を確認してみます。
ブラウザのアドレスバーに、静的コンテンツのドメインであるwww.example.comを入力してアクセスします。
Angularのアイコンの上に、API Gatewayが返すレスポンスのHello, Lambda!!の文字列が表示されます。
デベロッパーツールなどから、実際にAPI GatewayのカスタムドメインのAPIを呼び出し、レスポンスを受け取っていることを確認することができます。
まとめ
今回は、ACM、Route 53、S3、CloudFront、API Gatewayと、複数のAWSサービスを設定し、SSLを経由してブラウザ上のAngularからLambda APIにアクセスできるための下準備を行いました。
SSL証明書の発行やその適用は、これまで専門的な知識を必要とする場合が多く、なかなか難易度の高い操作でしたが、ACMの登場により、手軽にHTTPSでの通信を行えるようになりました。
また、静的コンテンツとAPIをサブドメインで分離することにより、CloudFrontとAPI Gatewayの責務を切り分けることができるため、サーバーのログを個々に分離できるだけでなく、Angularを用いたフロントエンド側の開発と、AWS Lambdaを利用したAPIサーバー側の開発を別個に行うことが可能になります。
これにより、障害発生時の切り分けが行いやすくなるほか、将来的にiPhoneやAndroidのアプリ開発を行う際にも、APIサーバー側のみ追加で対応を行っていけば良いため、シンプルで拡張性の高い設計を維持し続けることができます。
次回の連載では、Amazon Cognitoを用いながら、Webアプリケーションの肝ともいえる、認証機能を実装していきたいと思います。
