はじめに
Webサイトで上位表示を狙う場合、ページの表示スピードはとても重要です。
WordPressで作成されたページの表示速度改善のため、Nuxt3を使いサイトをSSG化することで表示速度の高速化を狙っていきます。いわゆるヘッドレスCMSです。
環境
- WordPress 6.2
- Nuxt3
- MySQL 5.7
実装手順
WordPress環境の構築
dockerを使ってWordPressの環境を構築していきます。
ここでは、Docker HubにてWordPress Official Imageの例となっているコードを参照していきます。
version: '3.1'
services:
wordpress:
image: wordpress
restart: always
ports:
- 8080:80
environment:
WORDPRESS_DB_HOST: db
WORDPRESS_DB_USER: exampleuser
WORDPRESS_DB_PASSWORD: examplepass
WORDPRESS_DB_NAME: exampledb
volumes:
- ./backend:/var/www/html
db:
image: mysql:5.7
restart: always
environment:
MYSQL_DATABASE: exampledb
MYSQL_USER: exampleuser
MYSQL_PASSWORD: examplepass
MYSQL_RANDOM_ROOT_PASSWORD: '1'
volumes:
- db:/var/lib/mysql
volumes:
wordpress:
db:docker compose upでコンテナを立ち上げるとlocalhost:8080/wp-adminからWordPressの管理画面へ接続することができるはずです。
ここで忘れてはいけないのはパーマリンク構造をデフォルト（基本）から変更してください。
基本のままだとWP REST APIが表示されないのです。
Nuxt.js環境の構築
Nuxt.jsの環境も構築していきます。
先ほどWordPress環境を構築したdocker-compose.ymlに追記していきます。
version: '3.1'
services:
wordpress:
image: wordpress
restart: always
ports:
- 8080:80
environment:
WORDPRESS_DB_HOST: db
WORDPRESS_DB_USER: exampleuser
WORDPRESS_DB_PASSWORD: examplepass
WORDPRESS_DB_NAME: exampledb
volumes:
- ./backend:/var/www/html
db:
image: mysql:5.7
restart: always
environment:
MYSQL_DATABASE: exampledb
MYSQL_USER: exampleuser
MYSQL_PASSWORD: examplepass
MYSQL_RANDOM_ROOT_PASSWORD: '1'
volumes:
- db:/var/lib/mysql
# Nuxt.js用追記ここから
nuxtjs:
image: node:14
user: node
working_dir: /home/node
tty: true
ports:
- 3030:3000
- 24678:24678
volumes:
- ./frontend/:/home/node/
# Nuxt.js用追記ここまで
volumes:
wordpress:
db:再度、ターミナルからdocker compose up —buildでDockerを立ち上げ、nuxtjsコンテナ内で操作を行なっていきます。
docker-compose exec nuxtjs bash
npx nuxi init nuxt3-app
cd nuxt3-app
npm install
npm run devlocalhost:3030からNuxt.jsの画面が開くことができると思います。
WordPressの記事をNuxt.js側で取得する
WP REST APIからWordPress側で投稿した記事情報を取得していこうと思います。
WP REST APIはFetch APIを使用して取得していきます。
Nuxt3でaxiosはなくなり、Fetch APIをつかうらしい - くらげになりたい。
Nuxt3でAPIを呼び出したいなと思ったら、axiosを使わなくなったらしい。 Nuxt 2 to Nuxt 3: Component Options 今後はFetch APIか、unjs/ohmyfetchの$fetchを使う形になる。 axiosの場合、開発中などでCORS問題があったりして、 axios-proxyが必要だったけど、それが不要になってだいぶ便利になった(*´ω｀*) Fetch API ざっくりな使い方はこんな感じ。 const url = "https://..."; const headers = new Headers({ Authorization: `...`…
https://www.memory-lovers.blog/entry/2022/06/02/170000
pagesディレクトリを作成し、pages/index.vueに入力していきます。
<script setup>
const { data: posts } = await useFetch('http://localhost:8080/wp-json/wp/v2/posts/');
</script>
<template>
<ul>
<li v-for="post in posts" :key="post.id">
id: {{ post.id }}<br> <!-- 記事ID -->
slug: {{ post.slug }}<br> <!-- slug -->
title: {{ post.title.rendered }}<br> <!-- 記事タイトル -->
contentTitle: post.content.renderedはv-htmlディレクティブを用いて出力してください。
post.content.renderedをそのまま出力するとサニタイズ処理されてしまい、HTMLタグが文字列として出力されてしまいます。app.vueのタグをNuxtWelcomeからNuxtPageへ変更します。
<template>
<div>
<!-- <NuxtWelcome />-->
<NuxtPage />
</div>
</template>localhost:3030で記事情報が取得できていることを確認してください。
最後に
以上がNuxt.jsのSSGを用いてWordPressの記事を表示する手順でした。
これからWordPressのヘッドレスCMS化を考えている方は是非ご参考にしてください。
Takahashi ／ Engineer
主にWordPressを担当しています。趣味はフットサル、サッカー観戦。
