
WordPressのフロントエンドを使わず、WordPressをバックエンドのAPIとして構築するHeadless CMSという手法が人気を集めています。今回は、WordPressで、Headless CMSのREST APIを使う開発環境をDocker上に構築し、JWT認証でCRUDする方法を紹介します。
はじめに
従来は、WordPressでCMSを構築する場合、フロントエンドとバックエンドを分けることなく、外観はCSSとPHPでテーマとして作成する方法が一般的でした。しかし、最近では、フロントエンドが多様化しており、WordPressだけであらゆるフロントエンドに対応することが困難であるため、WordPressをバックエンドのAPIとして動作させるHeadless CMSという手法が人気になっています。最新のWordPressはデフォルトで複数のフォーマットのAPIをサポートしており、簡単にHeadless CMSとして利用できるようになっています。(詳しくは公式ドキュメントを参照してください。)
今回は、WordPressをHeadless CMSのREST APIのバックエンドとしてDocker上に開発環境として構築する方法を紹介します。REST APIにした場合に必須の認証としてJWT認証の導入方法も紹介します。それでは、やっていきましょう。
Headless CMSとは?
ヘッドレスCMS(Headless CMS)とは、フロントエンドで提供しているコンテンツを配信する機能と、バックエンドで提供しているコンテンツを管理する機能を分離して、バックエンドに特化したCMSです。WordPressは従来から両方の機能を提供していますが、APIの機能をもたせることでバックエンドに特化させて機能させることができます。少し前はAPI用のプラグインが必要でしたが、今ではデフォルトでWordPressのAPIが利用可能です。
WordPressのHeadless CMS環境を構築する
前提
事前に以下を準備しておく必要があります。
- Dockerがインストールされていること
詳しくは「環境」を参照してください。
必要なファイルとフォルダの準備
必要なファイルとフォルダを作成します。
$ mkdir wordpress-headless-cms
$ cd wordpress-headless-cms/
$ mkdir wordpress
$ touch wordpress/000-default.conf
$ touch wordpress/ports.conf
$ touch wordpress/.htaccess
$ touch wordpress/Dockerfile
$ touch docker-compose.yml
$ tree -a
.
├── docker-compose.yml
└── wordpress
├── .htaccess
├── 000-default.conf
├── Dockerfile
└── ports.conf
Apacheの設定ファイルを作成する
今回はルートを「/var/www/html/wordpress」として、8080ポートでリッスンするようにします。
ports.conf
Listen 8080
<IfModule ssl_module>
Listen 443
</IfModule>
<IfModule mod_gnutls.c>
Listen 443
</IfModule>
000-default.conf
<VirtualHost *:8080>
ServerAdmin webmaster@localhost
DocumentRoot /var/www/html/wordpress
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
<Directory /var/www/html/wordpress>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
.htaccess
<IfModule mod_rewrite.c>
# JWT
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
</IfModule>
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
WordPress用のDockerfileを作成する
今回はApacheベースのPHPの公式イメージにWP-CLIでWordPressを入れることにします。(補足ですが、ほぼ同じ設定がWordPressの公式イメージを使えば最初からできます)
Dockerfile
FROM php:7.3-apache
ARG APACHE_RUN_USER=daemon
ARG WP_LOCALE=ja
ARG WP_DB_NAME=wordpress
ARG WP_DB_USER=wordpress
ARG WP_DB_PASS=wordpress
ARG WP_DB_HOST=db
ARG WP_DB_PORT=3306
ARG WP_DB_PREFIX=wp_
ARG WP_DB_CHARSET=utf8
WORKDIR /var/www/html/wordpress
RUN apt-get update -y && apt-get install -y \
libpng-dev \
libmagickwand-dev \
sendmail \
mysql-client \
vim
# Apache
RUN a2enmod rewrite
# PHP
RUN docker-php-ext-install mysqli
RUN docker-php-ext-install gd bcmath exif
RUN pecl install imagick && docker-php-ext-enable imagick
RUN cp /usr/local/etc/php/php.ini-development /usr/local/etc/php/php.ini
RUN chmod 666 /usr/local/etc/php/php.ini
# WordPress
RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
RUN php wp-cli.phar --info
RUN chmod +x wp-cli.phar && mv wp-cli.phar /usr/local/bin/wp
RUN wp --info
RUN chown -R $APACHE_RUN_USER:$APACHE_RUN_USER /usr/sbin
RUN chown -R $APACHE_RUN_USER:$APACHE_RUN_USER /var/www/html/wordpress
USER $APACHE_RUN_USER
RUN wp core download --locale=$WP_LOCALE
RUN wp config create --dbname=$WP_DB_NAME --dbuser=$WP_DB_USER --dbpass=$WP_DB_PASS --dbhost=$WP_DB_HOST:$WP_DB_PORT --dbprefix=$WP_DB_PREFIX --dbcharset=$WP_DB_CHARSET --skip-check
EXPOSE 8080
Docker Composeを作成する
WordPressとMySQLの開発環境をDocker Composeで作成します。
docker-compose.yml
version: "3"
services:
web:
container_name: web
build: ./wordpress
ports:
- "8080:8080"
volumes:
- "./wordpress/ports.conf:/etc/apache2/ports.conf:ro"
- "./wordpress/000-default.conf:/etc/apache2/sites-available/000-default.conf:ro"
- "./wordpress/.htaccess:/var/www/html/wordpress/.htaccess"
depends_on:
- db
db:
container_name: db
image: mysql:8.0
command: --default-authentication-plugin=mysql_native_password
restart: always
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
ports:
- "3306:3306"
volumes:
- "./data:/var/lib/mysql"
WP-CLIでWordPressを初期設定する
今回のDockerイメージにWP-CLIをインストール済みなので、それを使ってWordPressの最小限の設定をします。
$ docker-compose up --build -d
$ docker-compose ps
Name Command State Ports
---------------------------------------------------------------------------------
db docker-entrypoint.sh --def ... Up 0.0.0.0:3306->3306/tcp, 33060/tcp
web docker-php-entrypoint apac ... Up 80/tcp, 0.0.0.0:8080->8080/tcp
$ docker exec web wp core install --url=http://localhost:8080 --title='WordPress REST API' --admin_user=wordpress --admin_password=wordpress --admin_email=info@example.com
$ docker exec web wp rewrite structure '/%postname%/'
$ docker exec web wp language core update
$ docker exec web wp plugin update --all
$ docker exec web wp plugin install classic-editor --activate
$ docker exec web wp plugin install health-check --activate
$ docker exec web wp plugin install wp-api-menus --activate
$ docker exec web wp plugin install jwt-authentication-for-wp-rest-api --activate
パーマリンクは分かりやすくポスト名を設定しています。
プラグインは最低限として以下を入れています。
ブラウザで「http://localhost:8080/wp-admin/」にアクセスしてWordPressの管理画面にログインし、ヘルスチェックを確認します。
上記のように「REST API の利用」の項目が「REST API は使用可能です。」となっていれば、WordPressはHeadless CMSとして利用可能になっています。
JWT認証用の変数をWordPressに追加する
JWT用のプラグインの設定の通りにWP-CLIで変数を設定します。「JWT_AUTH_SECRET_KEY」は適当にランダム値を設定することにします。
$ docker exec web wp config set JWT_AUTH_SECRET_KEY '=~MWjpLDCv/x46d7saHklnP)[W4K|qmp?InD});2t|kX{9Kq{.Th8jfJ0-^PE|U~'
$ docker exec web wp config set JWT_AUTH_CORS_ENABLE true --raw
$ docker exec web wp config list | grep JWT_AUTH
JWT_AUTH_SECRET_KEY =~MWjpLDCv/x46d7saHklnP)[W4K|qmp?InD});2t|kX{9Kq{.Th8jfJ0-^PE|U~ constant
JWT_AUTH_CORS_ENABLE 1 constant
なお、「.htaccess」の設定はすでに完了しています。
WordPressのREST APIの動作確認をする
それでは、構築したHeadless CMSのREST APIのCRUDの動作を確認してみましょう。
初期データの削除
WordPressに最初から入っている記事と固定ページのデータを削除し、一応メニューのデータも削除します。
$ docker exec web wp post delete $(docker exec web wp post list --post_type=page,post --format=ids)
$ docker exec web wp menu delete $(docker exec web wp menu list --format=ids)
$ curl http://localhost:8080/wp-json/wp/v2/posts | jq
[]
$ curl http://localhost:8080/wp-json/wp/v2/pages | jq
[]
$ curl http://localhost:8080/wp-json/wp-api-menus/v2/menus | jq
[]
JWTトークンの取得
まずはユーザ名とパスワードからJWTのトークンを取得します。
$ curl -v -H "Accept:application/json" -H "Content-Type:application/json" -X POST -d '{"username":"wordpress","password":"wordpress"}' http://localhost:8080/wp-json/jwt-auth/v1/token | jq
{
"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODA4MCIsImlhdCI6MTU1MDU3Mjg2MywibmJmIjoxNTUwNTcyODYzLCJleHAiOjE1NTExNzc2NjMsImRhdGEiOnsidXNlciI6eyJpZCI6IjEifX19.fx4eJabYaPNdxZQIzuFdD_bJ8OUkRHV1I9fuHCWAbb8",
"user_email": "info@example.com",
"user_nicename": "wordpress",
"user_display_name": "wordpress"
}
$ curl -v -H "Accept:application/json" -H "Content-Type:application/json" -H "Authorization:Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODA4MCIsImlhdCI6MTU1MDU3Mjg2MywibmJmIjoxNTUwNTcyODYzLCJleHAiOjE1NTExNzc2NjMsImRhdGEiOnsidXNlciI6eyJpZCI6IjEifX19.fx4eJabYaPNdxZQIzuFdD_bJ8OUkRHV1I9fuHCWAbb8" -X POST http://localhost:8080/wp-json/jwt-auth/v1/token/validate | jq
{
"code": "jwt_auth_valid_token",
"data": {
"status": 200
}
}
このトークンを使って記事、固定ページをCRUDしましょう。
記事の作成
記事を3つ作成して公開します。
$ curl -v -H "Accept:application/json" -H "Content-Type:application/json" -H "Authorization:Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODA4MCIsImlhdCI6MTU1MDU3Mjg2MywibmJmIjoxNTUwNTcyODYzLCJleHAiOjE1NTExNzc2NjMsImRhdGEiOnsidXNlciI6eyJpZCI6IjEifX19.fx4eJabYaPNdxZQIzuFdD_bJ8OUkRHV1I9fuHCWAbb8" -X POST -d '{"title":"What is WordPress Headless CMS?","content":"Now, WordPress is a great headless cms","status":"publish"}' http://localhost:8080/wp-json/wp/v2/posts | jq
$ curl -v -H "Accept:application/json" -H "Content-Type:application/json" -H "Authorization:Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODA4MCIsImlhdCI6MTU1MDU3Mjg2MywibmJmIjoxNTUwNTcyODYzLCJleHAiOjE1NTExNzc2NjMsImRhdGEiOnsidXNlciI6eyJpZCI6IjEifX19.fx4eJabYaPNdxZQIzuFdD_bJ8OUkRHV1I9fuHCWAbb8" -X POST -d '{"title":"Why Do I love WordPress?","content":"WordPress is really awesome.","status":"publish"}' http://localhost:8080/wp-json/wp/v2/posts | jq
$ curl -v -H "Accept:application/json" -H "Content-Type:application/json" -H "Authorization:Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODA4MCIsImlhdCI6MTU1MDU3Mjg2MywibmJmIjoxNTUwNTcyODYzLCJleHAiOjE1NTExNzc2NjMsImRhdGEiOnsidXNlciI6eyJpZCI6IjEifX19.fx4eJabYaPNdxZQIzuFdD_bJ8OUkRHV1I9fuHCWAbb8" -X POST -d '{"title":"Everyone Must Know JWT","content":"JWT is one of the most popular authorization.","status":"publish"}' http://localhost:8080/wp-json/wp/v2/posts | jq
記事の取得
作成した記事を取得します。
$ curl http://localhost:8080/wp-json/wp/v2/posts | jq
[
{
"id": 10,
...
"title": {
"rendered": "Everyone Must Know JWT"
},
"content": {
"rendered": "<p>JWT is one of the most popular authorization.</p>\n",
"protected": false
},
...
},
{
"id": 9,
...
"title": {
"rendered": "Why Do I love WordPress?"
},
"content": {
"rendered": "<p>WordPress is really awesome.</p>\n",
"protected": false
},
...
},
{
"id": 8,
...
"title": {
"rendered": "What is WordPress Headless CMS?"
},
"content": {
"rendered": "<p>Now, WordPress is a great headless cms</p>\n",
"protected": false
},
...
}
]
$ curl http://localhost:8080/wp-json/wp/v2/posts/9 | jq
{
"id": 9,
...
"title": {
"rendered": "Why Do I love WordPress?"
},
"content": {
"rendered": "<p>WordPress is really awesome.</p>\n",
"protected": false
},
...
}
記事の更新
記事を1つ更新します。
$ curl -v -H "Accept:application/json" -H "Content-Type:application/json" -H "Authorization:Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODA4MCIsImlhdCI6MTU1MDU3Mjg2MywibmJmIjoxNTUwNTcyODYzLCJleHAiOjE1NTExNzc2NjMsImRhdGEiOnsidXNlciI6eyJpZCI6IjEifX19.fx4eJabYaPNdxZQIzuFdD_bJ8OUkRHV1I9fuHCWAbb8" -X PUT -d '{"title":"Why Do I love JavaScript?","content":"JavaScript is really awesome.","status":"publish"}' http://localhost:8080/wp-json/wp/v2/posts/9 | jq
$ curl http://localhost:8080/wp-json/wp/v2/posts/9 | jq
{
"id": 9,
...
"title": {
"rendered": "Why Do I love JavaScript?"
},
"content": {
"rendered": "<p>JavaScript is really awesome.</p>\n",
"protected": false
},
...
}
記事の削除
記事を1つ削除します。
$ curl -v -H "Accept:application/json" -H "Content-Type:application/json" -H "Authorization:Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODA4MCIsImlhdCI6MTU1MDU3Mjg2MywibmJmIjoxNTUwNTcyODYzLCJleHAiOjE1NTExNzc2NjMsImRhdGEiOnsidXNlciI6eyJpZCI6IjEifX19.fx4eJabYaPNdxZQIzuFdD_bJ8OUkRHV1I9fuHCWAbb8" -X DELETE http://localhost:8080/wp-json/wp/v2/posts/8 | jq
$ curl http://localhost:8080/wp-json/wp/v2/posts | jq
[
{
"id": 10,
...
"title": {
"rendered": "Everyone Must Know JWT"
},
"content": {
"rendered": "<p>JWT is one of the most popular authorization.</p>\n",
"protected": false
},
...
},
{
"id": 9,
...
"title": {
"rendered": "Why Do I love JavaScript?"
},
"content": {
"rendered": "<p>JavaScript is really awesome.</p>\n",
"protected": false
},
...
}
]
固定ページの作成
固定ページを3つ作成して公開します。
$ curl -v -H "Accept:application/json" -H "Content-Type:application/json" -H "Authorization:Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODA4MCIsImlhdCI6MTU1MDU3Mjg2MywibmJmIjoxNTUwNTcyODYzLCJleHAiOjE1NTExNzc2NjMsImRhdGEiOnsidXNlciI6eyJpZCI6IjEifX19.fx4eJabYaPNdxZQIzuFdD_bJ8OUkRHV1I9fuHCWAbb8" -X POST -d '{"title":"Welcome","content":"Welcome to this blog!","status":"publish"}' http://localhost:8080/wp-json/wp/v2/pages | jq
$ curl -v -H "Accept:application/json" -H "Content-Type:application/json" -H "Authorization:Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODA4MCIsImlhdCI6MTU1MDU3Mjg2MywibmJmIjoxNTUwNTcyODYzLCJleHAiOjE1NTExNzc2NjMsImRhdGEiOnsidXNlciI6eyJpZCI6IjEifX19.fx4eJabYaPNdxZQIzuFdD_bJ8OUkRHV1I9fuHCWAbb8" -X POST -d '{"title":"Privacy Policy","content":"We protect your privacy.","status":"publish"}' http://localhost:8080/wp-json/wp/v2/pages | jq
$ curl -v -H "Accept:application/json" -H "Content-Type:application/json" -H "Authorization:Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODA4MCIsImlhdCI6MTU1MDU3Mjg2MywibmJmIjoxNTUwNTcyODYzLCJleHAiOjE1NTExNzc2NjMsImRhdGEiOnsidXNlciI6eyJpZCI6IjEifX19.fx4eJabYaPNdxZQIzuFdD_bJ8OUkRHV1I9fuHCWAbb8" -X POST -d '{"title":"Contact us","content":"Contact us if you have any questions.","status":"publish"}' http://localhost:8080/wp-json/wp/v2/pages | jq
固定ページの取得
作成した固定ページを取得します。
$ curl http://localhost:8080/wp-json/wp/v2/pages | jq
[
{
"id": 15,
...
"title": {
"rendered": "Contact us"
},
"content": {
"rendered": "<p>Contact us if you have any questions.</p>\n",
"protected": false
},
...
},
{
"id": 14,
...
"title": {
"rendered": "Privacy Policy"
},
"content": {
"rendered": "<p>We protect your privacy.</p>\n",
"protected": false
},
...
},
{
"id": 13,
...
"title": {
"rendered": "Welcome"
},
"content": {
"rendered": "<p>Welcome to this blog!</p>\n",
"protected": false
},
...
}
]
$ curl http://localhost:8080/wp-json/wp/v2/pages/14 | jq
{
"id": 14,
...
"title": {
"rendered": "Privacy Policy"
},
"content": {
"rendered": "<p>We protect your privacy.</p>\n",
"protected": false
},
...
}
固定ページの更新
固定ページを1つ更新します。
$ curl -v -H "Accept:application/json" -H "Content-Type:application/json" -H "Authorization:Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODA4MCIsImlhdCI6MTU1MDU3Mjg2MywibmJmIjoxNTUwNTcyODYzLCJleHAiOjE1NTExNzc2NjMsImRhdGEiOnsidXNlciI6eyJpZCI6IjEifX19.fx4eJabYaPNdxZQIzuFdD_bJ8OUkRHV1I9fuHCWAbb8" -X PUT -d '{"title":"Public Policy","content":"We publish everything in public.","status":"publish"}' http://localhost:8080/wp-json/wp/v2/pages/14 | jq
{
"id": 14,
...
"title": {
"rendered": "Public Policy"
},
"content": {
"rendered": "<p>We publish everything in public.</p>\n",
"protected": false
},
...
}
固定ページの削除
固定ページを1つ削除します。
$ curl -v -H "Accept:application/json" -H "Content-Type:application/json" -H "Authorization:Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODA4MCIsImlhdCI6MTU1MDU3Mjg2MywibmJmIjoxNTUwNTcyODYzLCJleHAiOjE1NTExNzc2NjMsImRhdGEiOnsidXNlciI6eyJpZCI6IjEifX19.fx4eJabYaPNdxZQIzuFdD_bJ8OUkRHV1I9fuHCWAbb8" -X DELETE http://localhost:8080/wp-json/wp/v2/pages/14 | jq
$ curl http://localhost:8080/wp-json/wp/v2/pages | jq
[
{
"id": 15,
...
"title": {
"rendered": "Contact us"
},
"content": {
"rendered": "<p>Contact us if you have any questions.</p>\n",
"protected": false
},
...
},
{
"id": 13,
...
"title": {
"rendered": "Welcome"
},
"content": {
"rendered": "<p>Welcome to this blog!</p>\n",
"protected": false
},
...
}
]
メニューの取得
メニューは取得のみになるので、WP-CLIでデータ作成して、取得します。
$ docker exec web wp menu create "Main menu"
$ docker exec web wp menu create "Footer menu"
$ curl http://localhost:8080/wp-json/wp-api-menus/v2/menus | jq
[
{
"term_id": 3,
"name": "Footer menu",
"slug": "footer-menu",
"term_group": 0,
"term_taxonomy_id": 3,
"taxonomy": "nav_menu",
"description": "",
"parent": 0,
"count": 0,
"filter": "raw",
"ID": 3,
"meta": {
"links": {
"collection": "http://localhost:8080/wp-json/wp-api-menus/v2/menus/",
"self": "http://localhost:8080/wp-json/wp-api-menus/v2/menus/3"
}
}
},
{
"term_id": 2,
"name": "Main menu",
"slug": "main-menu",
"term_group": 0,
"term_taxonomy_id": 2,
"taxonomy": "nav_menu",
"description": "",
"parent": 0,
"count": 0,
"filter": "raw",
"ID": 2,
"meta": {
"links": {
"collection": "http://localhost:8080/wp-json/wp-api-menus/v2/menus/",
"self": "http://localhost:8080/wp-json/wp-api-menus/v2/menus/2"
}
}
}
]
$ curl http://localhost:8080/wp-json/wp-api-menus/v2/menus/2 | jq
{
"ID": 2,
"name": "Main menu",
"slug": "main-menu",
"description": "",
"count": 0,
"items": [],
"meta": {
"links": {
"collection": "http://localhost:8080/wp-json/wp/v2/menus/",
"self": "http://localhost:8080/wp-json/wp/v2/menus/2"
}
}
}
うまくいきましたね。
おまけ
WordPressでHeadless CMSをDocker上で構築する場合に発生する可能性のあるエラーと対処法を紹介します。
「http://localhost:8080/wp-json/wp/v2/」にアクセスした時に404 Not Foundになる場合の対処法
- パーマリンクを「pretty permalinks」に変更する。(公式ドキュメントに書かれている通り、デフォルトは「non-pretty permalinks」と呼ばれており、デフォルト以外に変更する必要がある。デフォルトでは「http://localhost:8080/?rest_route=/wp/v2/」ならアクセスできる。)
- Apacheに「mod_rewite」を入れる。(PHPの公式Dockerイメージにはデフォルトで入っていないので、「a2enmod rewrite」でインストールする必要がある。「.htaccess」はWordPressで自動で作成される。)
パーマリンク変更後に記事の更新などで失敗する場合の対処法
- 「Classic Editor」のプラグインを導入する。(新しいエディタ「Gutenberg」の不具合の場合がある)
外観のテーマの編集の更新で失敗する場合の対処法
- Dockerのホスト側ポートとコンテナ側ポートが同じになるように設定する(今回の場合は「docker-compose.yml」のports、「ports.conf」のListenポート、「000-default.conf」のVirtualHostを8080に統一しました。)
最後に
いかがでしたか?これでWordPressのHeadless CMSのREST APIを使う開発環境が構築できましたね。それでは。
環境
- Docker: 18.09.1, build 4c52b90
- WordPress: 5.0.3
- PHP: 7.3.2
- MySQL: 8.0.15


コメントを残す