MENU

Nuxtでcdn読み込みを徹底解説！最適化の全手順とは

大規模情報サイト運営
cdn nuxt 読み込み
2025/11/30
目次

はじめに

目的

本ドキュメントは、Nuxt.jsでのCDN設定と静的ファイル配信の実装方法を分かりやすくまとめます。Nuxtのランタイム設定を活用し、開発環境と本番環境でのCDN URL切り替えや、静的ファイルをCDNで配信してパフォーマンスを改善する手法を扱います。

対象読者

  • Nuxtを使ったサイトを運用している方
  • ページ表示速度や配信コストを改善したい開発者
  • 環境ごとの設定切替に悩んでいる方

本書の範囲と構成

主要なトピックは次の通りです。runtimeConfigやcdnURLの設定方法、環境変数の扱い、本番運用での注意点、CDN側のキャッシュ最適化、静的サイト生成（SSG）との連携などを順に解説します。各章で具体的な例や設定例を示します。

前提知識と準備

Nuxtの基本的な構造（pagesやassets）と、環境変数の概念が分かれば読みやすいです。実際の導入では、簡単なプロジェクトで試しながら進めることをおすすめします。

読み方のヒント

まず本章で全体像をつかみ、必要な章から順に読み進めてください。実装時はローカルでの動作確認と、本番デプロイ後の挙動確認を必ず行ってください。

Nuxtのランタイム設定とCDN基本概念

概要

Nuxtではランタイム設定で実行時に値を渡せます。これにより、開発環境と本番環境で異なるCDNの振る舞いを簡単に切り替えできます。静的ファイルをCDNで配信するとオリジンサーバーへの負荷を減らせます。

ランタイム設定とは

ランタイム設定はアプリ起動時に読み込まれる設定です。環境変数を使って、本番用のCDNドメインを指定したり、開発ではローカルを使ったりできます。NuxtのruntimeConfigに値を入れて、コンポーネントやサーバーで参照します。

CDNの基本概念

CDNは静的アセット（画像、JS、CSSなど）を地理的に分散したサーバーから配信します。これにより読み込み速度を改善し、オリジンサーバーへの直接リクエストを減らせます。

簡単な設定例

nuxt.config内でpublicRuntimeConfigやruntimeConfigを使い、CDNのURLを渡します。

export default {
  runtimeConfig: {
    public: {
      cdnURL: process.env.CDN_URL || ''
    }
  }
}

開発と本番での違い

開発では空やローカルを使い、本番でCDNドメインを指定します。これによりローカルで素早く確認でき、本番では高速配信を活かせます。注意点として、CDNキャッシュの設定とファイル名（ハッシュ付与）を合わせる必要があります。

cdnURL設定の詳細

概要

cdnURLは、パブリックフォルダを配信する絶対URLを指定するプロパティです。主に本番環境で有効になり、デフォルトは空文字列（””）。これを設定すると画像やCSS、JavaScriptなどの静的アセットをCDNから読み込めます。

設定例（nuxt.config.ts）

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      cdnURL: 'https://cdn.example.com/'
    }
  }
})

テンプレートでの利用

コンポーネントではuseRuntimeConfig()で取得します。例:

const config = useRuntimeConfig()
const logo = config.public.cdnURL + 'images/logo.png'

テンプレートで...のように使えます。

注意点

  • 絶対URLで指定すること。プロトコル（https://）を含めます。
  • 本番のみ有効なので、開発環境では空にしてローカル配信にします。
  • 末尾のスラッシュの有無でパス結合が変わります。重複スラッシュや不足に注意してください。
  • CDN側の設定でキャッシュ制御を最適化すると効果が高まります。

ランタイム設定とruntimeConfig

runtimeConfigとは

NuxtのruntimeConfigは、アプリ実行時に読み込む設定をまとめるオブジェクトです。サーバー専用の値とフロントエンドに公開する値を分けて管理できます。CDNのURLなど、公開してよい設定はpublic配下に入れます。

基本構成

runtimeConfigは通常、public・app・nitroなどを持ちます。publicはブラウザ側で参照可能です。サーバーだけで使う秘密値はpublicに置かず、上位に置いてください。例:

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: process.env.API_SECRET,
    public: {
      cdnURL: process.env.CDN_URL || 'https://cdn.example.com'
    }
  }
})

使い方（実例）

コンポーネントやサーバー処理でuseRuntimeConfig()を呼んで取得します。フロントではconfig.public.cdnURL、サーバーではconfig.apiSecretのように直接使えます。

注意点

  • CDNのホスト名やパスはpublicへ入れてください。これによりビルド後もクライアントで参照できます。\n- 秘密情報は必ずサーバー側のみで管理します。ログやブラウザに出さないでください。\n- デプロイ先で環境変数を設定すれば、本番での切り替えが簡単です。

これらを守れば、設定管理が明確になり運用が楽になります。

本番環境での実装と環境変数

概要

本番環境ではCDNのURLを環境変数で管理すると便利です。NUXT_CDN_URLという名前を使えば、デプロイ先ごとに異なるCDNを指定できます。

設定手順（簡潔）

  1. ホスティング環境で環境変数NUXT_CDN_URLを登録します。例: https://cdn.example.com
  2. nuxt.config.tsでruntimeConfigのpublicに反映します。
// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      cdnURL: process.env.NUXT_CDN_URL || 'https://cdn.default.example.com'
    }
  }
})

実際の利用例

アプリ内ではuseRuntimeConfig()で参照します。

const config = useRuntimeConfig()
const imageUrl = `${config.public.cdnURL}/images/logo.png`

テンプレート内でも同様に使えます。

テストと注意点

  • デプロイ前に環境変数が正しくセットされているか確認してください。
  • ビルド時にURLが必要な場合は、デプロイ設定で環境変数をビルド環境にも提供してください。これは静的生成と相性があるので、次章で詳述します。

CDN側のキャッシュ最適化

キャッシュの基本方針

CDNはオリジンへのアクセスを減らすために使います。重要なのは、何を長くキャッシュするか、何を短くするかを明確にすることです。静的アセットは長め、APIや動的ページは短めに設定します。

HTTPヘッダーで制御する

Cache-ControlやExpiresを使ってTTLを指定します。例：静的ファイルはCache-Control: public, max-age=31536000。APIは短いmax-ageとstale-while-revalidateを組み合わせると有効です。

パス別ルールとクエリ処理

CDNでパスごとに異なるキャッシュルールを設定します。クエリパラメータは重要なものだけキャッシュキーに含め、その他は無視するとヒット率が上がります。

外部API（例：WordPress REST API）

APIレスポンスは短いTTLにして、CDN側で二次キャッシュを持つと負荷を下げられます。重要な更新時は、WebhookでCDNをパージして最新化すると良いです。

パージとインバリデーション

頻繁に全パージすると逆効果です。個別パスやタグベースのインバリデーションを使い、必要な部分だけ更新します。

監視とテスト

キャッシュヒット率やオリジンへのリクエスト数を定期的に確認します。ログやCDNの解析機能を使い、設定を小刻みに改善してください。

静的サイト生成（SSG）とCDN配信

概要

NuxtのSSGでは、ビルド時にHTMLやアセットを静的ファイルとして出力します。通常は nuxt generate を実行し、dist フォルダが生成されます。これをCDNへ置くことで、グローバルに低レイテンシーで配信できます。

手順の流れ（簡単な例）

  1. ビルド：ローカルで nuxt generate を実行します。dist/index.html や静的アセットが作られます。
  2. アップロード：生成した dist の中身をCDNのバケット（例：S3）やホスティングサービスにアップロードします。
  3. 公開：CDNのドメインで配信開始します。独自ドメインを当てることも簡単です。

実際に注意する点

  • base と assetPath：ビルド時の参照先を正しく設定してください。間違うと画像やCSSのパスが壊れます。
  • キャッシュ戦略：静的ファイルは長めにキャッシュして、更新時はファイル名にハッシュを付けると安全です。
  • 動的ルート：事前にレンダリングしたい動的ページは generate.routes にリストします。大量のページはストリーミングや分割で対応します。
  • 更新（無効化）：CDNのキャッシュを削除するか、新しいハッシュ付きファイルをデプロイして確実に反映させます。

実務的なヒント

  • 小さなサイトなら手動でアップロードできます。APIやCI/CDを使うと自動化できます。
  • 圧縮（gzip/brotli）と正しいContent-Typeを設定すると読み込みが速くなります。

以上が、NuxtのSSGをCDNで配信する際の基本と注意点です。

自動ルーティングとアセット管理

概要

Nuxtはpagesディレクトリに置いたVueファイルから自動でルートを生成します。componentsやlayoutsで構造を整えることで、コードが読みやすくなり運用が楽になります。

自動ルーティングの仕組み（例）

  • pages/index.vue → /
  • pages/about.vue → /about
  • pages/blog/_id.vue → /blog/:id
    ファイル名とフォルダ構成がそのままURLになります。動的ルートはアンダースコアで表します。

componentsとlayoutsの使い分け

componentsはボタンやカードなど再利用部品、layoutsはページ全体の枠組み（ヘッダー・フッター）に使います。componentsは必要なページで読み込み、layoutsはページごとに指定します。

アセット管理とCDN配信

静的ファイルはassets、staticに置きます。build時にファイル名がハッシュ化されるためCDNで安全に配信できます。CDNを使う場合はビルド設定で公開パスをCDNのURLに向けるとよいです。

実践ポイント

  • 動的ルートはテストしてリンク切れを防ぐ
  • 大きな画像は先にCDN配置し、参照先を明示する
  • 開発中はローカル、公開時はCDNに切り替えて挙動を確認してください。

開発環境と本番環境の切り替え

概要

開発環境ではローカルサーバーから直接アセットを読み込み、本番環境ではCDNから読み込む切り替えを紹介します。環境変数でURLを切り替えれば、コードを変えずに動作が変わります。

実装の考え方

  1. 環境変数を用意（例: CDN_URL）
  2. nuxt.config.ts の runtimeConfig に公開値として渡す
  3. コンポーネントでは useRuntimeConfig() で参照し、URLを接頭辞として使う

具体例（Nuxt 3）

nuxt.config.ts:

export default defineNuxtConfig({
  runtimeConfig: { public: { cdnURL: process.env.CDN_URL || '' } }
})

コンポーネント:

const config = useRuntimeConfig()
const logo = `${config.public.cdnURL || ''}/images/logo.png`

開発時は CDN_URL を空にし、相対パスでローカルの静的ファイルを参照します。デプロイ環境では CDN_URL を実際の配信先に設定します。

注意点と運用

  • SSG（静的生成）はビルド時の環境変数を使います。ビルド環境で正しい CDN_URL を設定してください。
  • パスの末尾スラッシュに注意し、二重スラッシュを避けます。
  • CDN のヘッダー（CORS やキャッシュ）設定を確認してください。

これで開発と本番で自動的に切り替わる仕組みが整います。

＼ 最新情報はInstagramで📲 ／

Instagramを見る

人気投稿

大規模情報サイト運営
cdn nuxt 読み込み
よかったらシェアしてね！
  • URLをコピーしました！

この記事を書いた人

userのアバター user

関連記事

目次