BFT名古屋 TECH BLOG

日々の業務で得た知識を所属するエンジニアたちがアウトプットしていきます。

【AWS】【Lightsail】【Amplify】EC2を使わずにAWSでWEBアプリを作成する方法を考えてみた

初めに

こんにちは!株式会社BFT新人エンジニアのないとうです。
AWSでウェブアプリを作成ことになり、そのための方法を検討する必要が出てきました。
真っ先に考え付くのはEC2を用いて仮想サーバーを作成する方法なのですが、今回はそれ以外の方法でウェブアプリを作りたいと考えています。
そこで今回は、要件を確認してそれに合う方法を検討していきたいと思います。
AWSでのウェブアプリ作成を検討している方がいらっしゃいましたら、参考にしてみてください。

必要要件

・ウェブページはvue.jsで作る
・画面は5画面必要
Google Maps Platformを用いて地図表示を行う
・ユーザ認証はcognitoで行うがユーザ作成は管理者のみが行えるようにする
・Lamdbaから返り値を受け取る必要がある

方法検討

案1 API GatewayにHTML入力

概要

LambdaとAPI Gatewayを連携させるときにIntegration ResponseにHTMLを入力して表示できるようにする

利点

サーバーを用いないため料金が安く済む
Lambdaの返り値をjsonとして簡単に利用可能

欠点

vue.jsが使えない API Gatewayがページ分必要

案2 S3にファイルをアップロードしてホスティングする方法

概要

S3のwebページをホスティングする機能を用いてvue.jsのファイルをアップロードし公開する

利点

サーバーを用いないため料金が安く済む
ローカルで作成したものをS3にアップロードするためローカルで作成検証が行える

欠点

S3で静的ウェブサイトの表示に特化しているため動的なウェブサイトを作ることが難しい

案3 Amplifyを用いる方法

概要

フレームワークであるAmplifyを用いることでサーバーレスのwebアプリを作成する

利点

対話式で構築することができる
フレームワークなのでAWSのほかのサービスとの連携が容易である

欠点

cognitoを使用する場合にユーザ作成が誰でも行えるようにになってしまう

案4 AWS Lightsailを使う

概要

vpcであるAWS Lightsailをつかってサーバを作成しwebアプリケーションを実行する

利点

サーバーの作成が簡単に行える
ssh接続を行うことでローカルサーバと同じように開発を進められる

欠点

cpuの容量が決まっているので、容量が足りない場合3.5$/月から5$/月,10$/月・・・と金額を上げなければならない
10$/月でもcpu2GBのため今回の地図表示が行えるかが不明

結論

vue.jsを用いずに作成する場合はログイン画面をs3のホスティングでそれ以外をAPI Gatewayのhtmlで作成するのが実現可能性が高いと考える。
ただしvue.jsを今回使用するためLightsailを作成するものが良いと考えるが作成したwebページを表示できるかか検証する必要がある。
以上のことから今回はLightsailを用いてウェブアプリを作成することに決定する。

最後に

今回はウェブアプリの作成方法を検討してみました。
検討の結果Lightsailを用いることになりましたが、それぞれの方法に利点と欠点が存在するのでその都度適した方法を選択してください。 検討するときの参考になれば幸いです。

参考

今回検証するにあたって参考にしたサイトです。 AWS LambdaでHTMLを出力してみた - Qiita

AWS S3を使用してHTMLを公開する - Qiita

AWS Amplify(アプリケーションの構築とデプロイ)| AWS

Amplify + Congitoでユーザ登録画面とユーザ認証までを試してみた | DevelopersIO

Amazon Lightsail(月額3.5ドル〜の仮想プライベートサーバー:VPS)| AWS