初学者がAWSにwebアプリケーションをホストする方法について考えてみた

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

#パターン1：S3で静的ホスティングする
S3を使えば簡単にホスティングできます。
![スクリーンショット 2020-10-15 15.17.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/e1b10ac5-8644-2b48-a6e1-10321f5b9a3b.png)


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


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

#パターン2：S3で静的ホスティングしつつ、モダンなフレームワークを使う
パターン1の発展版です。基本的にビルドしたコードをブラウザに動かしてもらうだけなので、当然ReactやVueも使えます。
![スクリーンショット 2020-10-15 15.36.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/6e868b56-0fb6-4f47-f7e8-9840ade88715.png)

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

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

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

![スクリーンショット 2020-10-15 15.52.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/e2b270e8-991c-8e0a-620b-92c328d33eca.png)


また、CloudFrontを使えば画像の読み込みなどを高速化できますし、Route53を使えば簡単に独自ドメインを設定することもできます。
![スクリーンショット 2020-10-15 16.05.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/25b2e306-c4e9-4dc4-8e2a-7420e494ef2e.png)

さらに、[Amplifyというサービスを使うと](https://qiita.com/theFirstPenguin/items/1768d931c2d1d95330df)、CI/CDまでが簡単に設定できてしまいます。ぜひおすすめです。

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


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

#パターン4：EC2を使って静的ホスティングする
EC2はAWSの最も基本的なコンピューティングリソースです。要するにPCを時間貸ししてくれる感じです。PCなので、自由度が高く何でもできます。~~FF10で言えばキマリ的な感じでしょうか~~
これをwebサーバーとして使い、webアプリケーションをデプロイします。
![スクリーンショット 2020-10-15 16.45.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/70148928-df05-4d37-8a1b-0d6fa668e14f.png)


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

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

#パターン5：EC2でSSRする
EC2をただ静的ホスティングとして使うのはもったいないので、NextやNuxtなどの[SSRフレームワーク](https://medium.com/@sundaycrafts/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E4%BD%93%E9%A8%93%E3%82%92%E5%90%91%E4%B8%8A%E3%81%95%E3%81%9B%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0javascript-%E6%AD%B4%E5%8F%B2%E3%81%A8%E5%88%A9%E7%82%B9-df68cd7cd991)を用いてwebアプリケーションのパフォーマンスを向上させましょう。うまく実装できれば低スペPCやスマホでもサクサク動きます。

![スクリーンショット 2020-10-15 16.56.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/05796fd3-ae8e-802e-c8e1-77a5583a40be.png)

また、当然、EC2の中にデータベースを実装することもできます。
![スクリーンショット 2020-10-15 16.58.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/1afbe42d-e02f-2b83-da7f-369921d682a7.png)

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

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

![スクリーンショット 2020-10-15 17.02.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/97868762-77d9-77cf-5b48-4b32b94626cf.png)

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

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

#'20/11月追記
[こちら](https://qiita.com/yuno_miyako/items/fad33456d9c32d8f4483)で述べられているように、EC2を使わず`Lambda`でSSRも可能なようです。勉強不足でした。そうなると`EC2`を使うメリットはどんな時なんでしょうか。。。？
自分もチェックしてみたいと思います。