LoginSignup
7
5

More than 5 years have passed since last update.

AWS完結でサーバレス構成のWebアプリ(SPA)を作ったときに使ったAWSサービスたち

Posted at

前置き

EC2+RDSのサービスを作った事はあったものの、もろもろの設定(VPCの諸々とか)がめんどくさかったので、流行りのサーバレスで作ってみたら簡単になるんじゃないかと思ってチャレンジ。

ターゲット

EC2+RDSでサービス作った事あるけどサーバレス構成では作った事ない人

前提

サービスはSPA(Single Page Application)、サーバサイドの処理は主にAPI。

◆通常(EC2+RDS)の流れ

EC2+RDSの構成でサービス構築する流れは下記のイメージ。

[Route53] ドメインを取得、Hosted Zonesの作成
[VPC] VPC作成、セキュリティグループの作成
[Certificate Manager] 証明書を取得
[EC2] pemの作成、EC2インスタンスの作成、Elastic IPを取得・設定、ELB(Elastic Load Barancer)に証明書設置・EC2を紐付け
[Route53] ELBのエンドポイントにドメインを割り当て
[RDS] RDSのインスタンスを作成

この後EC2内で環境構築、RDSとの接続設定、などなど

・備考
静的ファイルはEC2に配置

◆サーバレスの流れ

サーバレス構成でサービス構築する流れは下記のイメージ。

[Route53] ドメインを取得、Hosted Zonesの作成
[Certificate Manager] バージニア北部(us-east-1)リージョンで証明書を取得 ※これ重要
[S3] バケットの作成、静的ファイルの配置、静的Webホスティングの設定
[CloudFront] 証明書の設置、利用するS3の設定
[Route53] cloudfrontドメインをサービス用ドメインのAレコードのエイリアスに設定
[Lambda] Lambda関数の作成
[API Gateway] 作成したLambda関数との紐付け設定、カスタムドメインの設定、CORSの設定
[Route53] API Gatewayのカスタムドメイン設定で吐き出された(なぜか)cloudfrontドメインを、API用サブドメインのAレコードのエイリアスに設定
[DynamoDB] テーブルの作成

作ってみて

当初考えてたより、利用するサービス数はかなり多くなった。
通常の構成と比べて、インフラ周りの細かい設定とかは解放された感が強い。

ハマったところ

証明書をバージニア北部で取得しないといけない問題

最初何も考えずSSL証明書を東京リージョンで取得、CloudFrontに設置する段階になって、バージニア北部で取得した証明書じゃないと設置出来ない事を知る。
取得し直し。

Lambdaのクロスドメイン制約設定問題

API GatewayでCORS設定してるはずなのに、なぜかクロスドメイン制約発生。
ちなみにLambdaはnodeを選択。
Lambda関数のレスポンスに

var response = {
statusCode: 200,
headers: {
"Access-Control-Allow-Headers":"Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token",
"Access-Control-Allow-Origin":"*"
},
body: ""
};
// context.succeed(response);
return callback(null,response);

こんな感じでheadersにAccess-Control-Allow-Originの設定を書いて解決。

なんだか他にもいっぱいハマった気がするけど思い出せない

◆参考

CloudFront + S3 によるCDN (Cache Distribution パターン) 構築手順
Amazon API Gateway を独自ドメインで利用する

なんだか他にもいっぱい参考にした気がするけど思い(ry

7
5
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
7
5