LoginSignup
8
8

More than 3 years have passed since last update.

Serverless + AngularでSPAを作った話

Last updated at Posted at 2018-12-13

はじめに

この記事はServerlessアドベントカレンダー2018 14日目の記事です。
トレタ アドベントカレンダー2018 14日目の記事でもあります。

ここ数ヶ月でサーバーレスアーキテクチャ + Angularを使ってWebサービスを作る機会があったので、その時のことについて。(Angularの話はほぼ無いです)

サーバーレスアーキテクチャを選んだ理由

新しいシステムを0から作る段階で最初に決まっていた要件は、

  • 社内業務用のアプリケーション
  • フロントエンドは他のプロダクトと共通したいライブラリがあるのでSPAにしたい
  • 開発メンバーは少人数
  • システム自体に今後の機能追加はあまりない

ということで、サーバーの構成を検討するにあたり、

  • サーバー側はなるべく薄く作りたい
  • 工数少なめで短期間でローンチしたい
  • インフラの保守する工数はない

ので、検討としてあがったのは
AWSでサーバーレスか、HerokuでRails or Sinatra。
というところで、技術的な挑戦もしたかっったのでservelessを選びました。(この時serverless初挑戦)

システム構成

スクリーンショット 2018-12-07 15.59.12.png

わりと一般的な構成かと思います。

  • フロントエンドのAngularアプリケーションをS3に格納、CloudFrontから配信
  • サーバーはLambdaで、データをDynamoDB
  • APIGatewayでlambda上のAPIを配信してAngularから利用
  • Cognitoでアプリケーションのユーザー認証

この構成に決めて最初はAWSのコンソールからポチポチしてたんですが、デプロイどうすれば...と思って調べたらちゃんといいのありました。(初心者なのでその辺無知でした。。)
serverless-framework-logo.png

The Serverless Framework is an open-source CLI for building and deploying serverless applications. With over 6 million deployments handled, the Serverless Framework is the tool developers trust to build cloud applications.

ServerlessFrameworkは主にデプロイするためのツールです。AWS CloudFormationにLambdaのデプロイを追加した感じです。
ServelessFrameworkをインストールしてみてみるとserverless.ymlとちょっとのファイルがあるだけ。おもにserverless.ymlにAWSの設定をひたすら書き込みます。
serverless.ymlの書き方は公式のドキュメントに記載されていますが、網羅的に記載されていません。CloudFormationのテンプレートがベースとして使われるので、CloudFormationのドキュメントを見ると細かく載っています。

セキュリティ

スクリーンショット 2018-12-07 16.35.02.png

サーバーレス構成にしてAPIをセキュアにするにはどうするのかを検討してみたのがこちらです。

  • API GatewayでAPIキーの認証とCognitoのユーザー認証の二重認証
  • アプリケーションのログインはCognitoをそのまま利用
  • CloudFrontにBASIC認証

APIキーをAngularに埋め込んでしまっているので危険なんですが、CloudFrontにBASIC認証をかけて防いでるのでなんとかセーフ。これ社内アプリだからいいけど、パブリックなサービスだったらどうすればいいんでしょうかね?

ちなみにAPI GatewayにBasic認証をかけるには、Lambda@Edgeというのを使うのですが、これがus-eastリージョンでの提供しかなく、ServerlessFrameworkで複数リージョンの設定ができないので個別管理になりました。。

サーバーレスでツラかった点

DBを選ぶ時に、Lambda x RDBはアンチパターンという記事がすぐ見つかります。Lambdaが実行されるたびにDBに毎回コネクションを貼ってしまうのでコネクション数がすぐにパンクする、というのが原因なので確かに避けた方が無難です。

ただ、今までRDBでばかり使っていたのでNoSQLになれるのが大変でした。
DBの制約はかけられないし、複雑なクエリはできない、トランザクションが行えないなど、管理画面をつくるには向いていないという感想です。

※ LambdaでRDSを使うベストプラクティスが発表されてました(https://dev.classmethod.jp/cloud/aws/reinvent2018-srv301/)
※ DynamoDBでトランザクション機能がでたそうです(https://aws.amazon.com/jp/blogs/news/new-amazon-dynamodb-transactions/)

さいごに

今回はスモールスタートでの開発にサーバーレスアーキテクチャを利用したという点で、比較的短期間で本番稼働開始できたのが、非常にメリット大きかったと感じています。
小さめのアプリケーションや、初期段階のバックエンドを作るときは積極的に活用していきたいと思いみます。

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8