Nuxt3 + ヘッドレスCMSのブログをサーバーレスで構築する話 1

2024年01月27日

はじめに

この記事は次のような方向けの記事となります。
・Nuxt3 でブログを構築したい
・AWSを使ったサーバーレスでのサーバー構築を考えている
・nuxt/content じゃなくヘッドレス CMS を使ってブログ運用をしたい

また当記事はブログを構築する備忘録として残すためのスタートの記事となっています。
最初なのでサーバーの構成など実装以外の内容のみとなります。

バージョンアップ経緯

まずバージョンアップをしようとした経緯になります。
以下の理由があり当ブログをバージョンアップしようと考えました。
※すでにこのブログはバージョンアップ後の内容で構成しています。

・単純に Nuxt3 へバージョンアップさせたい
・nuxt/content での運用が面倒なことがわかった
・現在 vps を使っているがAWSを使ってサーバーレス化してみたい(個人的な勉強のため)
・忘れたころにブログを更新しようとするとコードが難読化してて運用しづらい(当時の自分の技術不足)

新ブログサーバー概要

長々と中身のない内容を流してもつまらないと思うので本題に移ります。
サーバー構成としては「低コストかつ運用がしやすい」を軸に考えています。
新しい環境では「API Gateway + Lambda」を使ったサーバーレスなブログ運用を考えています。 CMS では「microCMS」が結構有名っぽいですが、今回は「Newt CMS」を採用しました。

CMSからの記事情報の取得はフロント側で直でNewt CMSから取得したくなかったので記事情報はDynamoDBに保存し参照する構成にします。

画像などの静的なファイルについてはS3へ配置するようにします。

構成図を画像にするとこんな感じになるかと思います。
またApi GatewayにはCloudFrontからしか参照できないようにします。

blog.drawio.png

その他

他にも以下のようなツールやサービスを使ってブログ構築を進めつつ後から簡単に構築できる状態にしようと思います。

  • AWS CloudFormationを使って構築を簡略化
  • GitHub ActionsかCircleCIを使って自動デプロイ

おわり

ブログの構成としてはこんな感じで作ろうと思います。
すでにこの記事を作っているのでブログ構築は何とか最後まで終わりました。
ブログのコンポーネント実装手前くらいまでは記事にできればと思います。

次の記事はこちら
Nuxt3 + ヘッドレスCMSのブログをサーバーレスで構築する話 2-1(デザイン周り)

最近の投稿

  1. 2024年03月17日

    nuxt3-cms-blog-3
    Nuxt3 + ヘッドレスCMSのブログをサーバーレスで構築する話3 (開発環境構築)
  2. 2024年02月05日

    nuxt3-cms-blog-2-2
    Nuxt3 + ヘッドレスCMSのブログをサーバーレスで構築する話 2-2(デザイン周り)
  3. 2024年02月05日

    nuxt3-cms-blog-2-1
    Nuxt3 + ヘッドレスCMSのブログをサーバーレスで構築する話 2-1(デザイン周り)
  4. 2024年01月30日

    nuxt3-cms-blog-1
    Nuxt3 + ヘッドレスCMSのブログをサーバーレスで構築する話 1