節約Webサイトのレシピ（AWS活用して数十円/月くらいのWebサイトを作るレシピ)

AWSでは超格安で、Webサイトホスティングが可能です。

GAEとかHEROKU使って無償でというのもありますが、少し色々やった感を得られます。w
ただ、その自己満足のためだけではなくて、、、私自身はこの手法を応用することで柔軟にWebページやコンテンツの配信に活用できるという点で、GAEよりも扱いやすく、プログラマチックに量産できるという点でAWSでのホスティングのメリットが大きいと考えています(コンピューティングがGCPメインなら話は変わると思いますがAWSなので)。

今回は、それらの技術周りの確認を行うためにやったことの整理です。

---
# 対象者（いるのかな？）
AWSを普段使っていて、さっとページを立ち上げる必要があるプログラムを作っている人（あまり、ないかな？）
例えば、コンテンツマーケティングの記事を量産して、機械学習でテキスト文を自動生成してページを量産するなどをやるとか。（検索indexを汚すだけになるので、質が低いならやるべきではないですが）

あとは、エンジニアの腕試し（AWSに慣れる、サーバーレスに触れる）という意味では良い題材かな、と。

---
# 早速、レシピを
まず、S3でのホスティングになると静的ページメインですが、Ajax × Lambdaを使えば、いろんなこと出来ると思います。（ここは実際にはやっていません）

その時に必要なものと金額（ざっくり）をまとめてみました。（間違っていたらすいません。）
BlogはBloggerなどを使えばいいし、と割り切れる人向け。

### ▼用意するもの
|用途|必須/任意|サービス|費用（東京リージョンベース）|コメント|参考|
|:-----|:-----|:-----|:-----|:-----|:-----|
|ストレージ|必須|S3|0.025USD/月 以下（1GB以下）||[「独自ドメインを使ってAmazon S3で静的Webサイトをホストする」](https://qiita.com/Ichiro_Tsuji/items/c174d580587a622d3358)|
|CDN|必須|CloudFront|0.140USD/月 （日本だけなら）|AWS Certificateを使用するため必須、ELB使う場合はそちらでも良い|[CloudFront に SSL 証明書を導入する際のポイントまとめ](https://qiita.com/koseki/items/4462b09f1527ad07bdce)|
|DNS|任意|Route53|0.5USD/月|AWSでなく、別DNSからCNAMEしても良いかも。Route53だと設定が少し楽。||
|ドメイン代|必須|-|1円/年~|AWSでも取得可能だが別で取った方が安い？（ドメインによる）||
|SSL|必須|Certificate Manager|無料|昨今の事情的に必須||
|イベントキック|任意|API Gateway|0.14USD/GB|静的ページの問い合わせからAjaxで起動させる入り口。王道？||
|||Cognito|無料（50,000 MAUまで）|IAMさらしたくない人に。少しだけ面倒。||
|||なし（IAM直書き）|無料|IAMで問い合わせを行うだけのLambda関数だけに制限すれば、||
|イベント処理|任意|Lambda|0.0000002 USD/リクエスト|||
|メール送信|任意|SES|無料  （62,000 通以内なら）|||

メール送信とかは、```<a href="mailto:xxx@co.jp">メール</a>``` みたいな感じでメーラー立ち上げにすれば、イベントキック以降は不要です。

1ドル以下と言っていますが、Route53使わず実費ベースで行くと、0.1ドルくらいなのではないでしょうか？

---
# つまずきポイント
(1)CloudFrontに設定するドメインは、s3のバケットのURLではなく、website用のURL
▼（CloudFront上で表示される）こっちじゃなくて
<img width="1012" alt="AWS_CloudFront_Management_Console.png" src="https://qiita-image-store.s3.amazonaws.com/0/258028/82d2a1b8-0587-ddec-2013-51da8f9ddc3e.png">

▼websiteホスティングのエンドポイントを使う
<img width="800" alt="S3_Management_Console.png" src="https://qiita-image-store.s3.amazonaws.com/0/258028/ad46f84f-1d3c-9458-4d52-d34941cf1348.png">

つまり、
・間違い　：　xxxx.s3.amazonaws.com
・正しい　：　xxxx.s3-website-{region}.amazonaws.com

見落としますよね。。。（これは尊敬するAWSのUIの問題かと思います）

---
(2) S3のバケットポリシーの設定は必須（ホスティング設定しただけでは公開されない）
参考：[「独自ドメインを使ってAmazon S3で静的Webサイトをホストする」](https://qiita.com/Ichiro_Tsuji/items/c174d580587a622d3358)

```json:BucketPolicy

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::{yourdomain.com}/*"]
    }
  ]
}
```

この{yourdomain.com}の部分は、{}も含めて置き換えです。
例えば、サイトドメインが"anniv-finder.site"なら

`"Resource":["arn:aws:s3:::anniv-finder.site/*"]`

のように

(3) Certificate Managerの取得はリージョンに注意
　-> 同じリージョンで取得しなければ、承認通っているのに反映されません（一瞬ハマりました）

(4) 通常、S3ホスティングの場合は、使用するドメイン名とバケット名が同じではなくてならないので、その癖で、違うバケット名でも試していないので不明ですが、CloudFrontを通す場合は、問題なさそう？でも、管理用に、ドメイン名（anniv-finder.site）などで取っておくのが整理されて良い

(5) （関係ないですが）S3をIPブロックする時は注意が必要。管理者権限でも見れなくなリマス（root権限でバケットポリシー を書き直す必要があります）

ぐらいじゃないでしょうか。

---

# メリット・デメリット（これもまたざっくりと。）
|作成方法|メリット|デメリット|
|:---|:---|:---|
|節約Webサイト|・激安（10~100円）<br>・CDN使えて高速<br>・SSL更新など不要<br>・サーバー管理ゼロ|・動的なことはやりづらい|
|WordPress|・格安(500円~3000円)<br>・簡単<br>・だいたいやりたい事は出来る<br>・開発知識はあまりいらない|・DB使うのでコストかかりがち<br>・レンタルサーバーだとアクセス増えると辛い|
|Wixやペライチ|・まぁまぁ安い（980円~2980円）<br>・簡単<br>・開発知識はゼロでもOK<br>・最速（小規模だと３〜５時間あれば作れる）<br>・サーバー管理ゼロ|・カスタマイズ性乏しい|
|フルスクラッチ|・なんでも出来る<br>・独自性を出せる?|・開発知識必要(やることによる)|

---
＜所感メモ＞
・エンジニア知識が増えれば増えるほど、「車輪の再発明」をやりたくなくなるので、フルスクラッチから遠ざかる？
・貧乏Webサイトは、サーバーレスWebサイトと呼ぶとモダンな感じになる
・サーバーレスなWordpressとか出てくるかも
・IAMって制限しまくっていても晒すのが嫌なのはなぜだろう

どういうサイトが作れるの？という方へ、以下がこの方法で作った遊びサイトです。
（注：突然、変更したり落としたりするかもしれませんが、リンクが切れていたら、その際はお察しください。）
[anniv-finder.site](http://anniv-finder.site/)

▼ただ遊んでいるわけではなく・・・
この技術を応用すると、実は色んなことが格安で出来ると考えていまして、これを検証するために作ってみました。
応用すると、遊びサイトの立ち上げとかは思い立ったら作れます（これは応用というかこのままですが）し、Webコンテンツの量産もできますし、計測とかタグ管理とか、（Computing）サーバーを立ち上げる必要がない（＝メンテナンス・管理が不要）ということになります。