はじめに

30代未経験からエンジニアを目指して勉強中のYNと申します。お読みいただきありがとうございます。
一番最初にwebアプリケーションをデプロイしたとき、Herokuを選んだ方が多いと思います。
Herokuはインフラを意識せずwebサービスをデプロイできる素晴らしいサービスですが、逆に言うとインフラの勉強にはなりません。そこで、敢えてAWSを使ってインフラに触ってみたい人もいるでしょう。
自分もそんな一人だったので、エンジニアを目指して勉強中の方向けに、AWSを使ったwebアプリのホスト方法についてまとめてみました。

パターン1：S3で静的ホスティングする

S3を使えば簡単にホスティングできます。

メリット

とても手軽。S3バケットにビルド済のindex.jsを置いて静的ホスティングの設定をするだけ。
ほぼタダで利用できる。（S3は無料枠が12カ月間、5GB、20000リクエストまで使える）
無料枠期間を過ぎたとしても、使わなければ課金額は微小

デメリット

S3にサーバとしての機能はないので、バックエンド機能を持つことができない。
機能の動作や描画はブラウザ頼み。処理が重いと低スペPCやスマホではヌルヌル動く。

パターン2：S3で静的ホスティングしつつ、モダンなフレームワークを使う

パターン1の発展版です。基本的にビルドしたコードをブラウザに動かしてもらうだけなので、当然ReactやVueも使えます。

パターン3：S3で静的ホスティングしつつ、バックエンド機能をサーバレスで実装する

これが初心者的に一番オススメです。Lambdaを使えば大抵のバックエンド処理は実装できると思います。

APIgateway：HTTPリクエストをAPIとして捌くことができます。Lambdaと組み合わせればサーバレスのバックエンド処理ができます。
Lambda：15分以内の処理なら何でもしてくれます。高可用でスケーラブルな神のサービス。
DynamoDB：noSQLのデータベースです。そして高可用でスケーラブル。
Cognito：ユーザー認証してくれます。

また、CloudFrontを使えば画像の読み込みなどを高速化できますし、Route53を使えば簡単に独自ドメインを設定することもできます。

さらに、Amplifyというサービスを使うと、CI/CDまでが簡単に設定できてしまいます。ぜひおすすめです。

メリット

まぁまぁ手軽にバックエンドを実装できる。AWS初心者を泣かせるIAMやVPCの面倒な設定も基本不要。
ほぼタダで利用できる。（無料枠がある）
無料枠期間を過ぎたとしても、使わなければ課金額は微小
Amplifyを使って簡単に実装できる

デメリット

めちゃくちゃ重い処理はLambdaにはできない。
リレーショナルデータベースの実装はできない。（可能だがオススメしない）
機能の動作や描画はブラウザ頼み。処理が重いと低スペPCやスマホではヌルヌル動く。

パターン4：EC2を使って静的ホスティングする

EC2はAWSの最も基本的なコンピューティングリソースです。要するにPCを時間貸ししてくれる感じです。PCなので、自由度が高く何でもできます。~~FF10で言えばキマリ的な感じでしょうか~~
これをwebサーバーとして使い、webアプリケーションをデプロイします。

メリット

自由度が高く、何でもできる。
AWSの基本サービスの使い方が勉強になる。
Herokuの内部処理の勉強にもなる。そしてHerokuのありがたみが分かる(笑)

デメリット

無料枠で使えるリソースの性能は結構ショボい。
EC2は12カ月の無料枠を過ぎると課金される。使わなくても課金される。結構高い。
EC2の設定の他に、IAMやVPCの設定も必要でAWS初心者には敷居が高い。
EC2を単なる静的webホスティングに使うのはリソースのムダ
Nginxなどwebサーバーの勉強が必要

パターン5：EC2でSSRする

EC2をただ静的ホスティングとして使うのはもったいないので、NextやNuxtなどのSSRフレームワークを用いてwebアプリケーションのパフォーマンスを向上させましょう。うまく実装できれば低スペPCやスマホでもサクサク動きます。

また、当然、EC2の中にデータベースを実装することもできます。

パターン6：EC2でSSRしつつ、AWSのマネージドサービスと連携させる

webアプリケーションの可用性を高めるために、AWSのマネージドサービスを使うことができます。
これらの連携方法を学べば、AWSについての知見も高まるのではないでしょうか。

RDS：リレーショナルデータベースのマネージドサービス。EC2と同様、時間課金なので注意。
ELB：ロードバランスによる可用性の担保をしてくれる。個人の作品レベルでは不要かと思う。EC2同様に課金される。

その他

例えばDockerを使ったマイクロサービスの開発など、実際の開発シーンを意識する場合には、ECSやEKSを使ってwebアプリケーションをデプロイしてみるのもいかがでしょうか。自分もいま、kubernetesやOpenShiftの勉強をしている最中なので、EKSでアプリケーションをデプロイできたらカッコいいな、と思っています。（結構お金かかるんですけどね。。。）
また、Heroku同様のPaaSであるElasticBeanstalkっていうのもあります。あえて選ぶならHerokuでいい気がしますが。

最後に

いかがでしょうか。自分も引き続きAWSを勉強していきたいと思います。
お読みいただきありがとうございました。

'20/11月追記

こちらで述べられているように、EC2を使わずLambdaでSSRも可能なようです。勉強不足でした。そうなるとEC2を使うメリットはどんな時なんでしょうか。。。？
自分もチェックしてみたいと思います。