igeight TechBlog

本サイトの詳細設計 制作時に考えたこと

Cover Image for 本サイトの詳細設計 制作時に考えたこと
igeight
igeight

ブログでやりたいと思ったこと

  • AWSで自分のブログ作りたい
  • 勉強した内容をアウトプットしたい
  • AWS構築、運用、障害対応あるあるをアウトプットしたい
  • AWSの費用は最安で運用したい 基本はS3+CloudFront
  • セキュリティは強化したい自分のサービスを運営する上でどんな変なアクセスあるかセキュリティリスクあるかを実験したい
  • インフラ管理は最小限にする EC2やDBは持たない
  • mdファイルでメモ取ることが習慣化してるからmdファイルがhtmlになる仕組みを作る
  • 静的ファイルだけデプロイする(Next.jsのSSG)
  • 何か決まってないけど長期的には収益化(初期〜中期1,2年は収益化は目的ではない)

初期設計

まだ全て作業できていないですが、下記の構成で作成いたしました。

ドメイン

Route53 でドメイン購入。

SSL証明書

AWS ACM証明書を使用。

CloudFront(CDNで配信)

サイトデータはS3をオリジンにしてCloudFrontで配信。 またビヘイビア使ってオリジンを二つに分ける。

デフォルト(*) S3 next.jsのout部分 images/ S3 写真格納部分

WAF

変な大量アクセスは弾きたい 国外からのDOSアタックなど レートベースのルールをカウントで設定、既知の脅威の対策を入れる。

index.htmlリダイレクトはどうするか?

ApacheなどのWEBサーバーを使わないので/へのアクセスをindex.htmlへリダイレクトする仕組み考える必要あり。一旦、CloudFrontFunctionsでリダイレクトする関数を作ってデフォルトビヘイビアのビューワーレスポンスに紐付けした。

データ格納先 S3

静的データと画像をS3に格納 デフォルトビヘイビアと画像格納用でオリジンを分ける。GITに記事画像を含めない形にしようと思うため。

デフォルトビヘイビア用 画像格納用

ブログ本体

Next.jsのblog starterを使用

コード管理

Githab のプライベートリポジトリを使用してコード管理

  • Githab のプライベートリポジトリ
  • Gitignoreで画像省く

オブザーバビリティ

CloudWatch Dashboardを使用してシステムの状況を可視化 CloudFront S3のログを出力。障害時に分析できるように。

計測

サイトへのアクセスの可視化のため。

  • GA
  • タグマネージャー

今後やったほうが良いかと思うこと

SSG時のCICDパイプライン 画像アップロードのフォーム作成APIGateway とLambdaかな?

Amazon アフィリエイト(読んだ本とかを貼ってみる?)