Edited at

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

More than 1 year has passed since last update.

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サイトをホストする」

CDN
必須
CloudFront
0.140USD/月 (日本だけなら)
AWS Certificateを使用するため必須、ELB使う場合はそちらでも良い
CloudFront に SSL 証明書を導入する際のポイントまとめ

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上で表示される)こっちじゃなくて

▼websiteホスティングのエンドポイントを使う

つまり、

・間違い : xxxx.s3.amazonaws.com

・正しい : xxxx.s3-website-{region}.amazonaws.com

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


(2) S3のバケットポリシーの設定は必須(ホスティング設定しただけでは公開されない)

参考:「独自ドメインを使ってAmazon S3で静的Webサイトをホストする」


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円)
・CDN使えて高速
・SSL更新など不要
・サーバー管理ゼロ
・動的なことはやりづらい

WordPress
・格安(500円~3000円)
・簡単
・だいたいやりたい事は出来る
・開発知識はあまりいらない
・DB使うのでコストかかりがち
・レンタルサーバーだとアクセス増えると辛い

Wixやペライチ
・まぁまぁ安い(980円~2980円)
・簡単
・開発知識はゼロでもOK
・最速(小規模だと3〜5時間あれば作れる)
・サーバー管理ゼロ
・カスタマイズ性乏しい

フルスクラッチ
・なんでも出来る
・独自性を出せる?
・開発知識必要(やることによる)


<所感メモ>

・エンジニア知識が増えれば増えるほど、「車輪の再発明」をやりたくなくなるので、フルスクラッチから遠ざかる?

・貧乏Webサイトは、サーバーレスWebサイトと呼ぶとモダンな感じになる

・サーバーレスなWordpressとか出てくるかも

・IAMって制限しまくっていても晒すのが嫌なのはなぜだろう

どういうサイトが作れるの?という方へ、以下がこの方法で作った遊びサイトです。

(注:突然、変更したり落としたりするかもしれませんが、リンクが切れていたら、その際はお察しください。)

anniv-finder.site

▼ただ遊んでいるわけではなく・・・

この技術を応用すると、実は色んなことが格安で出来ると考えていまして、これを検証するために作ってみました。

応用すると、遊びサイトの立ち上げとかは思い立ったら作れます(これは応用というかこのままですが)し、Webコンテンツの量産もできますし、計測とかタグ管理とか、(Computing)サーバーを立ち上げる必要がない(=メンテナンス・管理が不要)ということになります。