AWS上にわずか数円で実質無限にスケールするWebサイトを構築する(開発環境・CI/CD編)

2019.09.01 Sun

AWSのS3やCloudfrontを活用し、わずか数円で実質無限にスケールするサイトやブログを構成する方法をご紹介したいと思います。(まさにこのブログはこの構成をとっております。)

前回の記事では最近静的ホスティングが盛り上がっている理由と、AWSのS3やCloudfrontを利用して静的ホスティングを作る場合の構成について書きました。

今回は続編として、開発環境・ブログ記事追加環境、CI/CD(自動ビルド、自動サイト更新)、それからAWS利用料金について書きたいと思います。

実際の構成の紹介

全体像

前回記載した通りシステムの全体像はこんな感じです。前回に続き各環境切り取って細かく説明したいと思います。

1571367932068

コンテンツ作成・開発部分

前述の通り静的コンテンツジェネレータであるHugoを利用してサイトの構築、コンテンツ・記事の追加を行っております。ローカルにHugoモジュールをインストールし、ローカルで開発しながら適宜GitLab上のレポジトリにPushしてます。

コンテンツ作成・開発部分

CodeCommitを利用しても良かったのですが、バックログ的なやつを管理したかったのと、メージリクエスト(プルリク)や複数人での開発がしやすいので、(あと今回はあえて使ってませんがCI/CD周りの機能など)GitLabを利用してます。

CI/CD部分

修正した本サイトや記事は自動でWeb公開される仕組みを作っております。ローカルPCでマークダウンで記事を作成し、GitLabにPUSH、その後masterにマージをすると、GitLabのMirror a repositoryという機能を利用して、AWS CodeCommitにミラーされるように設定してます。

AWS CodePipelineはソースのレポジトリが変更を検知し、自動でCodeBUildを動かしてくれるのですが、2019年8月現在、対応しているGitレポジトリはCodeCommitとGitHubのみ。そのため無理やり??GitLabからAWS CodeCommitを挟んでCodePipelineを動かしています。

参考)Start a Pipeline Execution in CodePipeline

CodeBuild上でHugoを動かし静的コンテンツ(HTML/CSS/Javascript)を生成し、S3にコンテンツを配置、合わせてCloudfrontのキャッシュを消すスクリプトを動かしています。

CI/CD部分

本当はNetlify CMSなど利用して、CMS化したいんだけど、まあ自分ひとりでコンテンツ管理してる間はまだいいかなと思っています。(別でやってるサイトではNetlify利用してます)

(やってないけど)WAF対応も可能

CloudfrontにAWS WAFを紐付けることでWAF対応も可能です。ただの静的コンテンツサイトでしかないので、ここではWAFはいれません。

月々のAWS利用料金

これだけ動かして、毎月の利用料はなんとわずか約0.55ドル=約60円。しかもそのうち0.5ドルはお名前.comでやれば無料なものをあえてAWSフル活用するために設定しているRoute53のドメイン管理w

1571369080726

1571369113788

AWSの無料枠さまさまです。

アクセス増により料金が増えるサービス

上記構成の場合にアクセスが増えるとAWS利用料金が増えるサービスはCloudfront、Route53、S3。S3はCloudfrontにキャッシュしているので、TTLをきちんと設定していればアクセスが増えてもほぼ影響なし。(TTL0で動的サイトなどホストしてる場合は注意)

アクセス増えた場合は、Cloudfrontはリクエスト数と転送容量、Route53はクエリ数で料金が増えます。(といっても激安な料金ですが)

S3から直接Web公開する場合は注意

S3から直接Web公開する場合は注意が必要です。S3のDataTransfer料金は少し高いので、Cloudfrontを挟むことで料金を節約することができます。たまにS3の静的ホスティングの機能で直接Web公開しているサイトに、Dos攻撃され、高い料金請求される話あるので、気をつけましょう。

参考)S3にCloudFrontを通すことで月20万ぐらい節約した話

参考)AWS BlackBelt AWS上でのDDoS対策

今回あまり触れなかったHugoの話や、具体的なAWS設定、Netlifyの話などもし需要があればまた書きたいと思います。