【CloudFront×Lambda】WordPressをヘッドレスCMSとしてNuxt3でブログを構築する

WordPressをヘッドレスCMSとして利用し、フロントエンドにNuxt3を採用してブログを構築した。この記事では、そのシステム構成やディレクトリ構成、使用したライブラリについて詳しく解説する。さらに、NuxtアプリケーションをAWS Lambdaにデプロイし、静的ファイルをS3にアップロードしてCloudFrontで配信するまでの手順を順を追って説明する。

URL: https://blog.freelance321.com/

システム構成

フロントエンド構成

ディレクトリ構成

• assets: cssや画像などの静的アセットを格納
• pages: ページコンポーネント（ファイル システム ルーティング）
• components: セクション、パーツ単位のコンポーネントを格納
• layouts: レイアウト フレームワーク
• stores: piniaを使用した状態管理のファイルを格納
• types: Typescriptの型定義ファイルを格納

ライブラリ

• pinia: 状態管理で使用する
  • https://nuxt.com/modules/pinia
• v3-infinite-loading: 投稿一覧画面などでスクロールに追従してコンテンツをロードするために使用する。WordPress REST APIは一度のfetch処理で取得できる投稿数に上限があるため。
  • https://www.npmjs.com/package/v3-infinite-loading
• sanitize-html: 記事の内容をv-htmlで出力する際に、XSS攻撃を防ぐために使用する。
  • https://www.npmjs.com/package/sanitize-html

API

WordPress REST APIを使用。以下のようにuseAsyncDataを用いてデータを取得する。

lazy: trueを指定することで、ルートのロード後に、クライアント側のナビゲーションをブロックするのではなく、非同期関数を解決する。pendingで通信状態を管理し、ローディングを表示する。

const { data: pageData, pending } = await useAsyncData(
  "fetch-privacy-page-data",
  () =>
    $fetch<PageType[]>(
      `${config.public.WP_API_BASE_URL}/pages?slug=${encodeURIComponent(
        String(route.name)
      )}`
    ),
  {
    lazy: true,
  }
);

LambdaにNuxtアプリケーションをデプロイする

SSRアプリケーションは、ページの生成とレンダリングがサーバーサイドで行われるため、AWS Lambdaのようなサーバーサイド実行環境が必要になる。NuxtアプリケーションをAWS Lambdaにデプロイする。

サーバーエンジンのNitroのプリセット設定

Nitro は、Nuxt アプリケーションのサーバーサイド部分を扱うためのエンジンで、異なる環境（AWS Lambdaなど）に対応するための柔軟な設定が可能。以下のように記述する。

export default defineNuxtConfig({
  devtools: { enabled: true },
  // 追記
  nitro: {
    preset: "aws-lambda",
    serveStatic: false,
  },

• preset: "aws-lambda": この設定は、Nuxt アプリケーションを AWS Lambda で動作させるための事前設定。この設定により、Nuxt アプリケーションが Lambda 関数として適切に動作するように最適化される。
• serveStatic: false: 通常、Nuxt は静的ファイル（画像、CSSなど）を自動的にサーバーで提供する。しかし、サーバーレス環境（特にAWS Lambda）では、これらの静的ファイルを CDN や別の静的ファイルホスティングサービス（例: Amazon S3）を通じて提供する方が効率的であるため、このオプションを false に設定することで、Nuxt による静的ファイルの提供を無効化する。

Nuxtアプリケーションをビルド

.outputディレクトリにビルドした結果が出力される。

$ npm run build

Lambdaへのデプロイ準備

LambdaのデプロイにはServerless Frameworkを使用する。Serverless FrameworkをNuxtプロジェクトにインストールする。

Serverless Framework は、サーバーレスアプリケーション（特に AWS Lambda など）のデプロイを容易にするためのツール。Nuxt プロジェクトに Serverless Framework をインストールすることで、プロジェクトのビルドとデプロイプロセスを自動化し、管理することができる。

$ npm install --save-dev serverless

プロジェクトルート直下にserverless.ymlを作成し、デプロイスクリプトを記述する。serverless.yml は Serverless Framework の設定ファイルで、Lambda 関数のデプロイ方法や、AWS の設定などを定義する。

service: freelance321-blog
frameworkVersion: "3"
provider:
  name: aws
  stage: dev
  region: ap-northeast-1

package:
  patterns:
    - "!**"
    - ".output/server/**"

functions:
  NuxtSsrCore:
    runtime: nodejs18.x
    handler: ".output/server/index.handler"
    url: true

• service: プロジェクトの名前。この例では freelance321-blog としている。
• frameworkVersion: 使用している Serverless Framework のバージョン。
• provider: クラウドプロバイダーの設定。ここでは aws を使用し、デプロイ先のステージ（dev）とリージョン（ap-northeast-1）を指定している。
• package: デプロイするファイルのパターンを指定。
  • ".output/server/**" は .output/server/ ディレクトリ内のファイルのみを含めるという意味。これは、Nuxt 3 がサーバーサイドのコードを出力する場所を指す。
• NuxtSsrCore: Lambda関数の名前
  • runtime: 使用する Node.js のバージョン。ここでは nodejs18.x を使用する。
  • handler: Lambda 関数のエントリーポイント
    • Nuxt 3 は .output/server/index.handler をエントリーポイントとして使用する。
  • url: このオプションを true に設定すると、AWS はこの関数に対して HTTP API エンドポイントを自動的に生成する。

AWSの認証情報を設定する

awsコマンドを使用してAWSリソースを変更するため、IAMユーザーを作成して認証されたユーザーのみデプロイ作業を行えるようにする。

IAMユーザーの作成方法については公式ドキュメントを参照。

AWS アカウント での IAM ユーザーの作成

$ npx serverless config credentials --provider aws --key ${ACCESS_KEY} --secret ${SECRET_KEY} --overwrite

デプロイ実行

以下のコマンドを実行し、Serverless Frameworkを使用してプロジェクトをAWSにデプロイする。serverless.ymlファイルに指定された設定に基づいて、Lambda関数や他の必要なリソースがAWSに自動的に作成され、設定される。

$ npx serverless deploy

Lambda関数が生成されていることを確認できた。関数URLはCloudFrontの設定で使用するため控えておく。

静的ファイルをS3に同期し、CloudFrontで配信する

ビルド済みの静的ファイル（アセット）をAWS S3にアップロードし、CloudFrontを使用してそれらを配信するための設定を行う。

S3バケットの作成（バケット名は任意のものにする）

CloudFront Distributionの作成

以下を参照。全て記載通りに進めれば完了できる。

https://www.fourier.jp/techblog/#cloudfront%E3%81%AE%E8%A8%AD%E5%AE%9A

もしリソース配信後にトップページのみ403エラーになる場合は以下を参照する。

【S3×CloudFront】トップページ以外が403エラーになる場合の対処法

静的ファイルのアップロード

AWS CLI（コマンドラインインターフェース）を使用して、静的ファイルをS3バケットに同期（アップロード）する。

$ aws s3 sync .output/public s3://nuxt-freelance321-blog

ディストリビューションURLにアクセスすると、正常にページを表示することができた。

参考記事

https://developer.mamezou-tech.com/nuxt/nuxt3-serverless-deploy/

まとめ

WordPressをヘッドレスCMSとして利用し、Nuxt3でブログを構築する手順を解説した。フロントエンドのディレクトリ構成や、piniaなどのライブラリの活用方法、さらにAWS Lambdaへのデプロイ方法についても詳しく説明。静的ファイルをS3にアップロードし、CloudFrontを通じて配信する手順までカバーした。このプロセスを通じて、WordPressとNuxt3を組み合わせたモダンなWebアプリケーションの構築が可能となり、サーバーレスアーキテクチャの利点を活かしたスケーラブルなブログ運用が実現できる。