はじめに
「ヘッドレスCMSを試してみたいけれど、WordPress、Nuxt、MySQLを一つずつ準備するのは大変そう」と感じたことはないでしょうか。
今回は、これらをDocker Composeでまとめて起動できるスターターを使い、WordPressの投稿をNuxt 4で表示するところまで進めます。DockerやGitHubをまだ使ったことがない方でも追えるように、ソースコードの取得方法から説明します。
この記事で作るのは、自分のPC内で動かす学習・開発環境です。そのままインターネットへ公開するための本番構成ではありません。
このガイドでできるようになること
- Docker Desktopを準備する
- GitHubアカウントなしで公開リポジトリを取得する
- Nuxt、WordPress、MySQLをまとめて起動する
- WordPressの投稿をNuxt側で表示する
今回使用するもの
- Nuxt 4 × WordPress × Dockerスターター
- Docker Desktop
- Webブラウザ
- ターミナル（macOSのターミナル、Windows Terminalなど）
GitHubアカウント、Git、PCへ直接インストールするNode.jsは、まず動かしてみるだけなら必須ではありません。
2026年11月1日時点のスターターmainはNuxt 4.6.3を使い、DockerのNuxtサービスはNode.js 24.22.1です。Dockerを使わずPCへ直接Node.jsを入れる場合は、Node.js >=24.22.1 <25・npm 11以上で cd nuxt && npm ci を実行してください。
直近のmainにはnode-forge 1.4.1への限定修正が含まれます。brace-expansion 2.1.7 / 5.0.12はv1.1.1時点で反映済みです。glob/minimatchの対象GHSAは調査・検証のみで未解決であり、全依存の脆弱性が解消したわけではありません。変更履歴と残る課題はスターターのCHANGELOGを確認してください。以前のZIPやcloneを利用している場合は、手元の変更とデータを保護し、対応する更新済みソースとlockfileを確認してください。
そもそも何が動くのか
このスターターでは、Dockerが3つの環境をまとめて起動します。
| 名前 | 役割 | 確認するURL |
|---|---|---|
| Nuxt | 閲覧者に見せるフロントエンド | http://localhost:3000 |
| WordPress | 記事を管理し、REST APIを提供する | http://localhost:8080 |
| MySQL | WordPressの投稿や設定を保存する | ブラウザでは開かない |
通常のWordPressでは、管理画面と閲覧画面の両方をWordPressが担当します。ヘッドレスCMS構成では、WordPressはコンテンツ管理、Nuxtは閲覧画面というように役割を分けます。
WordPress管理画面
↓ 投稿を保存
MySQL
↓ REST APIで取得
Nuxt
↓
ブラウザに表示
1. Docker Desktopをインストールする
Docker Desktopは、MacやWindows上でDockerを扱いやすくするアプリです。OSごとの動作条件や画面は更新されるため、インストールは公式手順を参照するのが確実です。
Windowsでは通常、インストーラーが案内するWSL 2方式を使います。インストール後にDocker Desktopを起動し、Docker Engineの準備が終わるまで待ちます。
ターミナルを開き、次のコマンドを実行します。
docker --version
docker compose version
両方のバージョンが表示されれば準備完了です。
この公開スターターを試すだけなら、通常はDockerアカウントへのサインインは不要です。
2. GitHubからファイルを取得する
GitHubアカウントを作らず、ZIPで取得する
公開リポジトリは、GitHubアカウントがなくてもダウンロードできます。
- スターターのリポジトリを開く
- 緑色の Code ボタンを押す
- Download ZIP を選ぶ
- ダウンロードしたZIPを展開する
ZIPを直接ダウンロードすることもできます。
ZIPには、その時点のファイルだけが含まれます。Gitの変更履歴は含まれず、あとから git pull で更新することもできません。まず試すには十分ですが、継続的に改修するときはGitの利用がおすすめです。
Gitを使って取得する
Gitをインストール済みの場合は、次のコマンドで取得できます。
git clone https://github.com/hane-jp/nuxt-wordpress-docker.git
cd nuxt-wordpress-docker
GitHubアカウントを作る場合は、GitHub公式のアカウント作成手順を参照してください。公開リポジトリをHTTPSでcloneするだけなら、GitHubへのログインは不要です。
3. プロジェクトのフォルダでターミナルを開く
コマンドは、docker-compose.yml が置かれているフォルダで実行します。
- macOS：Finderでフォルダを右クリックし、「フォルダに新規ターミナル」を選ぶ
- Windows：エクスプローラーでフォルダを右クリックし、「ターミナルで開く」を選ぶ
現在のフォルダに docker-compose.yml があるか確認してみます。
macOS、Linux：
ls
Windows PowerShell：
Get-ChildItem
4. 環境設定ファイルを作る
スターターに含まれる .env.example をコピーし、Dockerが読む .env を作ります。
macOS、Linux：
cp .env.example .env
Windows PowerShell：
Copy-Item .env.example .env
このファイルには、MySQLのデータベース名やローカル環境の接続先が入っています。最初の動作確認では、内容を変更せずに使えます。
現在の .env.example には、公開URLを指定する次の設定も含まれています。
NUXT_PUBLIC_SITE_URL=http://localhost:3000
ローカルで試す間は、この値のままで問題ありません。将来インターネットへ公開するときは、https://example.com のような実際の公開URLへ変更します。末尾の / は付けません。
この値は、検索エンジンやSNSへ「このページの正式なURL」を伝えるcanonical、OGP、robots.txt、sitemap.xml の生成に使われます。
.env.example のパスワードはローカル確認用です。本番環境では、必ず推測されにくい値へ変更してください。
5. Docker Composeで起動する
次のコマンドで、Nuxt、WordPress、MySQLをバックグラウンド起動します。
docker compose up -d
初回はDockerイメージやnpmパッケージをダウンロードするため、数分かかることがあります。現在の状態は次のコマンドで確認できます。
docker compose ps
詳しい処理を見たい場合はログを表示します。
docker compose logs -f
ログの表示は Ctrl + C で終了できます。表示を終了しても、コンテナ自体は動き続けます。
6. WordPressを初期設定する
ブラウザで http://localhost:8080 を開きます。WordPressの画面に従い、次の項目を入力します。
- 言語
- サイトのタイトル
- 管理者ユーザー名
- 管理者パスワード
- メールアドレス
ここで作るWordPress管理者のユーザー名・パスワードは、.env に書かれているMySQL用のユーザー名・パスワードとは別のものです。
初期設定後は、http://localhost:8080/wp-admin から管理画面へログインできます。
7. Nuxt側で投稿を確認する
ブラウザで http://localhost:3000 を開きます。
「API CONNECTION 接続済み」と投稿件数が表示されていれば、WordPress REST APIとの連携は成功です。
| URL | 表示内容 |
|---|---|
| http://localhost:3000 | トップページと接続状態 |
| http://localhost:3000/posts | WordPressの投稿一覧 |
| http://localhost:3000/guide | スターターの使い方ガイド |
| http://localhost:8080/wp-admin | WordPress管理画面 |
WordPress管理画面で投稿を作成し、「公開」を押します。その後、Nuxtの投稿一覧を再読み込みすると新しい投稿が表示されます。
これで、WordPressで管理したコンテンツをNuxtで表示する最小構成を確認できました。
8. OGP・SEOの動作を確認する
スターターには、検索エンジンとSNS共有向けの基本設定も含まれています。
- ページごとのタイトルと概要文
- canonical URL
- OGPとX（旧Twitter）Card
- 1200 × 630pxのデフォルトOG画像
- 投稿アイキャッチ画像を使ったOG画像
- 記事ページのArticle構造化データ
robots.txt- WordPressの公開投稿を含む
sitemap.xml
まず、ブラウザで次のURLを開いて確認できます。
| URL | 確認できるもの |
|---|---|
| http://localhost:3000/robots.txt | クローラーへの案内とサイトマップの場所 |
| http://localhost:3000/sitemap.xml | 固定ページとWordPress投稿のURL一覧 |
| http://localhost:3000/og-image.png | アイキャッチ未設定時に使うデフォルトOG画像 |
ページのHTMLに出力されるメタ情報は、ブラウザでページを開き、右クリックから「ページのソースを表示」を選ぶと確認できます。ソース内で canonical、og:image、twitter:card などを検索してみてください。
WordPressの投稿にアイキャッチ画像を設定すると、その投稿詳細ページではアイキャッチ画像が og:image に使われます。アイキャッチがない場合はデフォルトOG画像へ戻ります。
localhost は自分のPCからしか見えないため、SNSのOGP確認サービスや検索エンジンからはアクセスできません。実際のSNSカードは、サイトを公開して NUXT_PUBLIC_SITE_URL を公開URLへ変更してから確認します。
9. 停止と再開
作業を終えるときは、プロジェクトのフォルダで次を実行します。
docker compose down
このコマンドでは、WordPressの投稿を保存しているDockerボリュームは残ります。次回は同じフォルダで次を実行すれば再開できます。
docker compose up -d
docker compose down -v を実行すると、データベースのボリュームも削除されます。WordPressを最初から作り直したい場合以外は使用しないでください。
よくあるトラブル
docker コマンドが見つからない
Docker Desktopがインストールされているか確認します。インストール直後の場合は、Docker Desktopとターミナルを一度終了して起動し直してください。
Docker daemonへ接続できない
Cannot connect to the Docker daemon と表示された場合は、Docker Desktopが起動していない可能性があります。Docker Desktopを起動し、準備が終わってから再実行します。
3000または8080ポートが使用中
port is already allocated や address already in use が表示された場合は、別のアプリやDockerプロジェクトが同じポートを使っています。該当するアプリを停止してから、もう一度起動します。
Nuxtに接続エラーが表示される
まず、WordPressの初期設定が完了しているか確認します。次に http://localhost:8080/wp-json を開き、JSONが表示されるか確認してください。
Nuxtだけを再起動する場合は次を実行します。
docker compose restart nuxt
ZIPを更新したら、以前の投稿が見えない
Docker Composeは、通常はプロジェクトのフォルダ名を使ってデータの保存領域を区別します。新しいZIPを別名のフォルダへ展開すると、新しいデータベースが作られ、投稿が消えたように見える場合があります。
原因を確認するまでは docker compose down -v を実行せず、以前使っていたフォルダから起動してみてください。
次に試したいこと
環境を起動できたら、次は以下を試すと構成への理解が深まります。
- WordPressでアイキャッチ画像を設定する
- Nuxtのトップページの文言や色を変更する
- WordPress REST APIのレスポンスをブラウザで確認する
-
robots.txtとsitemap.xmlに何が出力されるか確認する - ページのソースでOGPとArticle構造化データを確認する
- GitHubアカウントを作り、自分のリポジトリとして変更履歴を管理する
スターター本体には、日本語の使い方ページとサンプル実装も含まれています。