CloudPanel Nginx 画像アップロード不具合の修正

CloudPanel のサブフォルダー・ステージングサイト（例：domain.com/staging/）で新しくアップロードした画像がリンク切れや404になる原因は、ほぼ1つに絞られます。CloudPanel のデフォルトの Nginx 設定には WordPress マルチサイト用のリライトルールが含まれており、これがリクエストから /staging/ プレフィックスを取り除き、新しい画像を本番サイトのフォルダー内で探してしまうのです。解決策はサイトの Vhost にある2つのリライトルールを少し書き換えるだけで、約2分で完了します。

なぜ CloudPanel のステージングサイトで新しい画像が表示されないのか？

サブフォルダーにステージングサイトを作成すると、その URL は domain.com/staging/ のようになります。CloudPanel は WordPress マルチサイト向けのリライトルールを含むデフォルトの Nginx 設定を提供します。これらのルールは /staging/ フォルダーへのリクエストを横取りし、プレフィックスを取り除いて、パスを本番サイトのディレクトリに対して解決します。新しくアップロードした画像はステージングフォルダーにしか存在しないため、Nginx はそれらを見つけられず、アップロード自体は成功していてもリンク切れや404を返します。

原因は Nginx のリライトルールだけにあります。WordPress、メディアライブラリ、アップロードされたファイルには問題ありません。

CloudPanel と Nginx で画像のリンク切れを直すには？

Nginx 設定に除外ルールを追加し、マルチサイトのリライトルールがステージングフォルダーをスキップするようにします。すべての変更は CloudPanel の Vhost エディターで行い、約2分で完了します。

ステップ1：サイトの Vhost エディターを開く

CloudPanel ダッシュボードにログインします。
アップロードに問題が起きているウェブサイトをクリックします。
上部メニューの Vhost タブを開きます。

ステップ2：マルチサイトのリライトルールを置き換える

静的ファイルのセクションまでスクロールします。次のような行で始まります：

location ~* ^.+.(css|js|jpg|jpeg|gif|png...)$

そのブロック内で、次の2つのデフォルトのリライト行を削除します：

  # WordPress Multisite Subdirectory
  rewrite ^/[_0-9a-zA-Z-]+(/wp-.*) $1 break;
  rewrite ^/[_0-9a-zA-Z-]+(/.*.php)$ $1 break;

  # WordPress Multisite Subdirectory
  rewrite ^/[_0-9a-zA-Z-]+(/wp-.*) $1 break;
  rewrite ^/[_0-9a-zA-Z-]+(/.*.php)$ $1 break;

その場所に、更新した次の行を貼り付けます：

  # WordPress Multisite Subdirectory (Excluding WP Staging)
  rewrite ^/(?!staging)[_0-9a-zA-Z-]+(/wp-.*) $1 break;
  rewrite ^/(?!staging)[_0-9a-zA-Z-]+(/.*.php)$ $1 break;

  # WordPress Multisite Subdirectory (Excluding WP Staging)
  rewrite ^/(?!staging)[_0-9a-zA-Z-]+(/wp-.*) $1 break;
  rewrite ^/(?!staging)[_0-9a-zA-Z-]+(/.*.php)$ $1 break;

否定先読み (?!staging) は、staging 以外のすべてのフォルダーにマルチサイトのリライトを適用するよう Nginx に指示します。これにより、ステージング画像へのリクエストが正しく解決されます。

ステップ3：保存して Nginx を再読み込みする

右下の Save ボタンをクリックします。CloudPanel が自動的に Nginx を再読み込みし、新しくアップロードしたステージング画像がすぐに表示されるようになります。

ステージングフォルダーの名前が「staging」でない場合は？

ステージングサイトが dev や test など別の名前のフォルダーにある場合は、両方のリライト行にある staging という語を、実際のフォルダー名に合わせて変更してください。ルールの残りの部分はそのままです。

この修正は上書きされますか？

はい、Vhost タブの Reset to Default ボタンをクリックすると上書きされます。このボタンは CloudPanel の標準設定を復元して除外ルールを削除するため、その後この2行を再度適用する必要があります。CloudPanel や WordPress の通常のアップデートでは、保存した Vhost は変更されません。

よくある質問

この変更は本番サイトに影響しますか？

いいえ。(?!staging) の除外ルールは、ステージングのサブフォルダー内でのリクエストの振り分け方だけを変更します。本番サイトへのリクエストは、これまでどおり元のマルチサイトルールに一致します。

なぜ古い画像ではなく、新しくアップロードした画像だけが表示されないのですか？

デフォルトのルールはステージングのリクエストを本番フォルダーへ送ります。ステージングサイトを作成した後にアップロードした画像はステージングのアップロードフォルダーにしか存在しないため、Nginx はそこで見つけられず404を返します。

Nginx ではなく Apache を使っています。これは当てはまりますか？

いいえ。CloudPanel はサイトを Nginx で配信するため、この修正は Nginx 専用です。ここで示したリライト構文は Apache の .htaccess ファイルでは機能しません。

保存後に何か再起動する必要はありますか？

いいえ。Save をクリックすると CloudPanel が Nginx を再読み込みします。再読み込みが完了すると同時に修正が有効になります。

CloudPanel（Nginx）で画像アップロードの不具合を修正する