ローカル(PC側)
リモート(Raspberry Pi)
パーマリンク設定を「基本」以外に設定して、
記事(画像では固定ページ)を書き、パーマリンクを自分で設定して公開しようとすると「更新に失敗しました。返答が正しいJSONレスポンスではありません。」というエラーが出て公開できない。
Nginxの設定ファイルを編集する。
$ sudo nano /etc/nginx/sites-available/default
/wordpressblog
を指定したlocation
ディレクティブを以下のようにして付け加える。
xxxxxxxxxx
location /wordpressblog {
try_files $uri $uri/ /wordpressblog/index.php?$args;
}
これでパーマリンクを編集できるようになる。
ウチのWordPressはルートディレクトリにはインストールせず、ルートディレクトリの中にwordpressblog
というディレクトリを作ってその中にインストールしている。
xxxxxxxxxx
ドキュメントルート
├他のディレクトリ
├他のディレクトリ
└wordpressblog
└WordPressのファイル群
なので、location
ディレクティブでは/wordpressblog
というパスを指定してあげないといけない。さらに、/index.php?$args
を付け加えるんだけど、やっぱりここでも/wordpressblog
を付けてあげて、WordPressをインストールしたディレクトリのトップにあるindex.php
にパラメーターを投げるように上手く設定しないといけない。
おそらく多くの人はドキュメントルートに直接WordPressをインストールしていると思われるので、その場合は以下のように設定する。
xxxxxxxxxx
location / {
try_files $uri $uri/ /index.php?$args;
}
どうやって調査を進めたかの記録
Solved] Updating failed. Error message: The response is not a valid JSON response. - WordPress 786
ここが有力な情報源かと思われるが、
と書いてあって、wordpressルールというのが全く不明。
NginxでWordPressを使う時は、Nginxの設定をする必要があったらしい。やり方を説明しているサイトが以下。
nginxの設定をWordPress用にしてみた | ハックノート NginxでWordPressを使う時の設定をまとめてみた | work.log nginxでwordpressを動かすには - Qiita
ただし、どれも「こうすればいいよ」と書いてあるけど「なぜそうすればいいのか」という解説までは書いていないので、自分の環境に合うのかどうか確認ができない。
Nginx環境へWordPressをインストールする手順と注意点 パーマリンクに気を付ける - レムシステム エンジニアブログ
ダイレクトに今回の問題の解決方法になってそうなページを発見。
パーマリンクに対応するために設定が必要なファイルは"/etc/nginx/sites-available"ディレクトリに含まれるバーチャルホスト用の設定ファイル"ドメイン名.conf"になります。
バーチャルホスト・・・ そんなこと意識してNginxやWordPressをインストールしていない。
Nginx応用編①バーチャルホストを設定する。Linuxサーバ構築手順まとめ | TECH Projin
調べながらうすうす気づいていたけど、バーチャルホストとは例えば
など、複数のドメインでのアクセスを全部自宅のRaspberry Piにアクセスできるようにしたとき、ドメイン別に表示するHTMLファイルを変えたりすることができる機能。
Nginxの設定ファイルについて勉強してきたけど、どうもこれはNginxの問題ではない。まず記事の保存ができないということで、ブロックエディタが悪さをしているらしい。
How to Fix "the response is not a valid JSON response" Error in WordPress
確かにWordPressの管理画面でクラシックエディタプラグインをインストールして、エディタをクラシックエディタに変えるとパーマリンクを設定しつつ、記事を保存できた。
また別の問題が出現。固定ページのパーマリンクをabout
にして、https://arcticstreet.ddns.net/wordpressblog/about
にアクセスすると、404が返ってくるようになった。
やっぱりNginxの問題も含んでいたのか?
再びこの記事へ戻る。
Nginx環境へWordPressをインストールする手順と注意点 パーマリンクに気を付ける - レムシステム エンジニアブログ
パーマリンクに対応するために設定が必要なファイルは"/etc/nginx/sites-available"ディレクトリに含まれるバーチャルホスト用の設定ファイル"ドメイン名.conf"になります。
これは全ての環境に必ず存在するというわけではない。自分のRaspberry Piは/etc/nginx/sites-available/default
に書けば良いことが分かった。(本当はバーチャルホスト毎に分けたらいいんだろうけど、今は不要)
以下、続きを読む。
このlocationディレクティブに、以下の「try_files」設定を追加します。
xxxxxxxxxx
try_files $uri $uri/ /index.php?$args;
これは要求されたURIにファイルかディレクトリが存在するかチェックして、存在しない場合はindex.php へリダイレクトするという設定です。
ということで、
xxxxxxxxxx
$ sudo nano /etc/nginx/sites-available/default
で設定ファイルを開き、該当部分を修正。
xxxxxxxxxx
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ /index.php?$args;
}
やっぱりうまくいかない。
というか、よく考えたら上の設定は間違ってるんじゃないか?というのも、$uri
がダメで$uri/
もダメなら、https://arcticstreet.ddns.net/index.php?+パラメーター
というようなアクセスになるのではないか。
普通は
xxxxxxxxxx
ドキュメントルート
└WordPressのファイル群
とするだろうけど、自分のように
xxxxxxxxxx
ドキュメントルート
├他のディレクトリ
├他のディレクトリ
└wordpressblog
└WordPressのファイル群
というような感じでドキュメントルートの下にディレクトリを作りそこにWordPressをインストールしたから、location
ディレクティブは/wordpressblog
を指定してやらないといけないんじゃないか。
という訳で以下のように修正。
xxxxxxxxxx
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404; # 戻した
}
(略)
location /wordpressblog {
try_files $uri $uri/ /index.php?$args;
}
でもこれでもダメ。
ひょっとして、これでいけるのか?
xxxxxxxxxx
location /wordpressblog {
try_files $uri $uri/ /wordpressblog/index.php?$args;
}
ビンゴ。
長かった。
結局この方法ならクラシックエディタを使わなくても大丈夫らしい。せっかくなのでブロックエディタに戻して、クラシックエディタはアンインストール。
今回の解決の糸口になったページ。
nginxでWordPressのパーマリンク形式変更にすると404 NginxでPHPを動かす
調べていく最中に見つけた気になった話題。
もっといろいろ設定している。
NginxでWordPressを使う時の設定をまとめてみた | work.log nginxの設定をWordPress用にしてみた | ハックノート nginxでwordpressを動かすには - Qiita
ウェブアプリを守るためのファイアウォール。
【WordPress】『更新に失敗しました。 エラーメッセージ: 返答が正しい JSON レスポンスではありません。』が表示される場合の対処法 - webtoranomaki Gutenberg『更新に失敗しました』の原因はだいたいWAF設定|コーディングブログ|tacs-port Gutenberg で「更新できません」「無効なjson・・・」と表示された時の原因 - Qiita
WordPressが持つREST API。上の3サイトではどれも「新エディタGutenbergはWordPressのREST APIを使って記事を更新している」と指摘している。Gutenbergは評判が悪いけど、ひょっとしたらこの仕様が悪さしているのか?
WordPress『WP REST API』#1 ブログを他のサイトに埋め込む方法|レンタルサーバーナレッジ WordPressのRESTAPIでユーザー名を取得できないようにしておく | ウェブデザイン・ITエンジニアスクールをお探しならAkros(アクロス)|東京(台東区上野)・全国オンライン WP REST API v2 Documentation
REST APIと言えばCORSで悩むと相場が決まっている(?)ので、将来のためにリンクだけ残しておく。
なんとなく CORS がわかる...はもう終わりにする。 - Qiita CORS (Cross-Origin Resource Sharing) ってなに? CORS とは? - JavaScript の基本 - JavaScript 入門 CORSの仕組みをGIFアニメで分かりやすく解説 | コリス