NetlifyからAWSに移行した

• o8n
#AWS #Terraform #Netlify #CloudFront #開発

このブログをNetlifyからAWSに移行した。

Netlifyに関してはブログを作成してからずっと使っているので6年くらいは使っている。カスタムドメインの設定やCI/CD設定に関しては簡単で素晴らしい仕組みだと思っている。デプロイ前にプレビュー環境が用意されるのもGood。

しかし毎回初回アクセスしてからレスポンスが返ってくるのが少し遅く感じていた。コード側のチューニングをしてCore Web Vitalsでサイトパフォーマンスを改善してみても改善してる感じがなかった。

そんな中、仕事でAWSとTerraformを用いてインフラの面倒を見る機会が多くなってきたのもあって、ホスト先をS3とCloudfrontに変えることにしてみた。

構成

  • S3: 静的ファイルのホスティング
  • CloudFront: CDN配信
  • Route53: DNS管理
  • GitHub Actions: 自動デプロイ
  • Terraform: インフラ管理

ドメインはCloudflareで買ったやつをそのまま使っている。

やったこと

Terraform

まずTerraformでインフラを定義した。モジュール化して、S3、CloudFront、Route53、IAMをそれぞれ分けた。

terraform/
├── modules/
│   ├── s3/
│   ├── cloudfront/
│   ├── route53/
│   └── iam/
└── environments/
    └── xxx/

S3バケットは完全プライベートにして、CloudFront経由でしかアクセスできないようにした。

mainブランチにpushしたら、自動的にビルドしてS3に同期している。

困ったこと

Astroで生成される静的サイトは、/blogみたいなURLでアクセスすると実際は/blog/index.htmlを返す必要がある。でもCloudFrontはデフォルトだとこれをやってくれない。

CloudFront Functionsで解決した。リクエストのURLを見て、拡張子がなかったら/index.htmlを付けるだけ。

function handler(event) {
    var request = event.request;
    var uri = request.uri;
    
    if (!uri.includes('.')) {
        request.uri = uri + '/index.html';
    }
    
    return request;
}

移行してみて

Netlifyは無料枠で使ってたので金はかかるが許容範囲と割り切っている。そのうち金払うのが嫌になってNetlifyに戻るかその他のホスティングサービスに移るかもしれない。

課題のレスポンスに関しては文句なし。コスト回収するために広告でも埋め込むか。