【WordPress制作実践⑦】ローカルのサイトを本番に公開する（アクセス制限あり）

現在、あおば精密工業のサイトはローカル（MAMP）にあります。

これを本番環境（Xserver）に移行します。

WordPresのファイルとデータベースを移行して、URLなどを本番環境に合わせる必要があります。

ローカルから本番への移行手順

バックアップ → サーバー準備 → ファイル移行 → DB移行 → URL変更 → 表示・動作確認 → 公開設定の順番で進めていきます。

検索エンジンに実在企業と誤認されないようにする

今回のあおば精密工業は架空企業なので、公開先にはBasic認証を設定し、検索エンジンに実在企業と誤認されないようにします。

WordPressのシリアライズデータとは

WordPressのシリアライズデータとは、配列やオブジェクトなどの複雑なデータを、データベースに保存できる文字列に変換したものです。

データの内容だけでなく、型や文字列の長さも保存されているのが特徴です。

1. バックアップ

WordPressファイルとデータベースの二つをバックアップしておきます。

完了しました。

2. サーバー準備

本番サーバーは、本サイトで使用している「エックスサーバー」をしようします。

3. ファイル移行

3-1. ファイルの配置先の決定

https://ki-hi-ro.com/work の下に「aoba」ディレクトリを作成して、そこに配置します。

3-2. ファイルを配置する

zipファイルをXserver上で展開します。

アップロード前の注意

aoba.zipにはデータベース接続情報などが入っているwp-config.phpが含まれているので、Basic認証などでアクセスを保護してからファイルを配置するのが安全です。

workディレクトリにアクセス制限をかけていることを確認しました。

WordPressファイルの配置

バックアップしたzipファイルをアップロードします。

展開します。

展開後のZIPファイルは削除しました。

完了しました。

4. DB移行

4-1. MySQLデータベースの作成

あおば精密工業専用のデータベースを作成します。

作成完了しました。

4-2. MySQLユーザーの作成

完了しました。

4-3. 接続情報を控える

1passに保管完了しました。

4-4. バックアップしていたデータベースのインポート

インポート完了しました。

4-5. wp-config.phpを編集する

ここを編集します。

編集しました。

5. URL変更

5-1. `siteurl` と `home`を変更

データベースのsiteurlとhomeを変更して、https://ki-hi-ro.com/work/aobaを表示できました。

5-2. phpMyAdminで残存URLを調査

localhost:8888/aobaで検索しました。

33件の残存URLが見つかりました。

5-3. WP-CLIを使ってシリアライズデータに対応した安全なURL置換を進める

WP-CLIとは

WP-CLIは、WordPressをコマンドライン（ターミナル）から操作・管理できる公式のコマンドラインインターフェースです。

XserverにSSH接続

Xserverのサーバーパネルで、「SSH設定」を開きました。

SSHが「ON」でした。

MacにXserver用と思われるSSH秘密鍵が保存されていました。

「SSH設定」→「SSHソフト設定」タブをクリックしました。

そこで次の情報を確認しました。

ホスト名
ユーザー名
ポート番号

ssh -i 秘密鍵のパス -p ポート番号 ユーザー名@ホスト名

SSH接続成功しました。

WP-CLIの確認

WP-CLIはインストールされていることが確認できました。

SSH上で新しいPHPを指定する

SSHで実行されるPHPが古いため、このままWordPressを操作するとエラーになる可能性がありました。

項目	現在の状態
WP-CLI	2.4.0
SSH上のPHP	5.4.16
WebサイトのPHP	8.0.30

WebサイトのPHP設定は変更せず、SSH上で新しいPHPを指定する方法で進めました。

利用可能なPHPを以下のコマンドで確認しました。

ls /usr/bin/php*

PHP 8.0〜8.5が利用可能であることがわかりました。

PHP 8.3の動作確認を行いました。

/usr/bin/php8.3 -v

PHP 8.3.36が正常に動作していることが確認できました。

これで、既存のki-hi-ro.comのPHP設定を変更せずに、WP-CLIを実行できる環境が整いました。

WP-CLIの実体がある場所を確認する

type -a wp

このコマンドで、WP-CLIのコマンドがどこにあるかを確認しました。

そして、WP-CLIの実体は /usr/bin/wp にあることが確認できました。

これで、PHP 8.3を指定して実行する準備ができました。

PHP 8.3でWP-CLIを実行

PHP 8.3を使ってWP-CLIを起動し、WP-CLIの環境情報を表示するコマンドを実行しました。

/usr/bin/php8.3 /usr/bin/wp --info

正常に情報が表示されました。

Xserver上でWP-CLIを正常に使用できる環境が整っていることが確認できました。

URLを置換する

Xserverに移行したWordPressのデータベース内に残っているローカル環境のURLを、公開環境のURLに一括置換するコマンドを実行します。

/usr/bin/php8.3 -d error_reporting=22527 /usr/bin/wp \
  --path="$HOME/ki-hi-ro.com/public_html/work/aoba" \
  --skip-plugins --skip-themes \
  search-replace \
  'http://localhost:8888/aoba' \
  'https://ki-hi-ro.com/work/aoba' \
  wp_posts wp_users \
  --skip-columns=guid \
  --report-changed-only

コマンド	役割
`/usr/bin/php8.3`	PHP 8.3でWP-CLIを実行
`-d error_reporting=22527`	PHPの一部の警告を表示しないようにする
`/usr/bin/wp`	WP-CLIを起動
`--path="..."`	操作対象のWordPressを指定
`--skip-plugins`	プラグインの読み込みをスキップ
`--skip-themes`	テーマの読み込みをスキップ
`search-replace`	データベース内の文字列を検索・置換
`'http://localhost:8888/aoba'`	置換前の文字列
`'https://ki-hi-ro.com/work/aoba'`	置換後の文字列
`wp_posts wp_users`	操作対象のデータベーステーブル
`--skip-columns=guid`	`guid` 列を置換対象から除外
`--report-changed-only`	変更が発生したテーブルだけを報告

なお、行末の \ は、長いコマンドを複数行に分けて記述するためのものです。

Success: Made 9 replacements. と表示されたので、9件のURLが実際に書き換えられました。

6. 表示・動作確認

6-1. 画像が表示されない

原因は、画像の参照先が、ローカル環境のパスのままになっていることでした。

画像パスの記述箇所を検索しました。

grep -RnF '/aoba/wp-content/' \
  ~/ki-hi-ro.com/public_html/work/aoba/wp-content/themes/aoba-theme \
  --include='*.php' --include='*.html' --include='*.css' --include='*.js'

検索成功して、原因がはっきりしました。

あおば精密工業のテーマ内に、移行前の画像パスが残っていました。

今回、少なくとも以下のファイルで見つかりました。

patterns/ 内の6ファイル
templates/page-11.html

画像パスが /aoba/wp-content/ になっているため、現在の /work/aoba/ では画像を読み込めませんでした。

6-2. テーマ内の画像パスを一括修正

以下のコマンドで、画像パスを一括修正しました。

grep -rlZ '/aoba/wp-content/' patterns templates \
  --include='*.php' --include='*.html' \
  | xargs -0 -r sed -i 's|/aoba/wp-content/|/work/aoba/wp-content/|g'

patterns と templates のみを対象にする
古い画像パスを新しいパスに置換する
patterns.backup と templates.backup は変更しない
既存の親WordPressには触れない

実行結果を見ると、すべての対象行が次のように変わっていました。

変更前：/aoba/wp-content/
変更後：/work/aoba/wp-content/

そして、画像が表示されました。

6-3. サイト全体の表示確認

次の5ページを確認しました。

トップページ
事業案内
会社概要
実績
お問い合わせ

6-4. 内部リンク先が表示されない

原因は、移行前のURLがリンク先に残っているためと考えられました。

現在のWordPressの設置場所は /work/aoba/ ですが、表示されないURLは /aoba/ になっていました。

https://ki-hi-ro.com/aoba/?page_id=9

`.htaccess` を確認

移行後に個別ページが表示されない場合、URLの振り分け設定（.htaccess）が原因になることがあります。

Common WordPress errors

.htaccess に、移行前のURL /aoba/ が残っていることが原因でした。

.htaccessのバックアップ

cp -p \
  "$HOME/ki-hi-ro.com/public_html/work/aoba/.htaccess" \
  "$HOME/ki-hi-ro.com/public_html/work/aoba/.htaccess.backup"

.htaccessのURLの振り分け設定を修正

sed -i \
  -e 's|^RewriteBase /aoba/$|RewriteBase /work/aoba/|' \
  -e 's|^RewriteRule \. /aoba/index\.php \[L\]$|RewriteRule . /work/aoba/index.php [L]|' \
  "$HOME/ki-hi-ro.com/public_html/work/aoba/.htaccess"

.htaccessの修正結果の確認

grep -E 'RewriteBase|RewriteRule \.' \
  "$HOME/ki-hi-ro.com/public_html/work/aoba/.htaccess"

.htaccess の2か所が、正しいパスに変更されていることが確認できました。

RewriteBase /work/aoba/
RewriteRule . /work/aoba/index.php [L]

6-5. 事業内容ページを確認

Macで Command + Shift + R を押して再読み込みしました。

しかし、https://ki-hi-ro.com/aoba/?page_id=9のままでした。

データベース内には、古いURLが見つかりませんでした。

テーマ内の古いURLを検索

テーマファイルに、移行前の /aoba/ というリンクが直接書かれていました。

次の箇所に古いリンクが残っていることが分かりました。

ファイル	対象
`parts/header.html`	ヘッダーのナビゲーション
`parts/footer.html`	フッターのナビゲーション
`patterns/hero.php`	事業内容を見る
`patterns/services.php`	事業内容を詳しく見る
`patterns/contact.php`	お問い合わせ
`patterns/cases.php`	実績ページを見る
`templates/404.html`	トップページへ戻る

古いリンクを一括修正

/work/aoba/ に修正しました。

sed -i \
  's|/aoba/?page_id=|/work/aoba/?page_id=|g; s|href="/aoba/"|href="/work/aoba/"|g' \
  parts/header.html \
  parts/footer.html \
  patterns/hero.php \
  patterns/services.php \
  patterns/contact.php \
  patterns/cases.php \
  templates/404.html

修正結果の確認

grep -RnE 'href="/aoba/|url":"/aoba/' \
  parts/header.html parts/footer.html \
  patterns/hero.php patterns/services.php \
  patterns/contact.php patterns/cases.php \
  templates/404.html

何も表示されなかったので、対象ファイル内の古いリンクはなくなっていることがわかりました。

下層ページのリンクが表示されることが確認できました。

6-6. お問い合わせフォームが送れなくなっている

フォーム関連プラグインを確認

現在のXserver環境には、フォーム用プラグインがインストールされていないことがわかりました。

/usr/bin/php8.3 -d error_reporting=22527 /usr/bin/wp \
  --path="$HOME/ki-hi-ro.com/public_html/work/aoba" \
  --skip-plugins --skip-themes \
  plugin list \
  --fields=name,status,version \
  --format=table

フォームの実装箇所を探す

grep -RnEi \
  'wp_mail|admin_post|<form|type="submit"|送信受付の準備中' \
  --include='*.php' \
  --include='*.html' \
  --exclude-dir='patterns.backup' \
  --exclude-dir='templates.backup' \
  --exclude-dir='parts.backup' \
  .

ローカル環境で動いていたお問い合わせフォームは、プラグインではなく、独自のPHPコードで実装されていたことが分かりました。

送信準備の判定条件を確認

sed -n '1,65p' inc/contact.php

ローカル環境では送信できていたのに、Xserverでは「送信受付の準備中です」と表示される理由は、SMTP設定がローカルMacを参照していることが原因でした。

SMTP設定とは

SMTP設定（エスエムティーピーせってい）とは、メールソフトやWebサービス、ECサイトなどが電子メールを相手に送信する際、「どの送信サーバー（郵便局）を使って送るか」を登録する作業のことです。

SMTP設定の状態を確認

以下のコマンドで、SSH環境では AOBA_ICLOUD_CONFIG が未設定であることがわかりました。

if [ -n "$AOBA_ICLOUD_CONFIG" ]; then
  echo "環境変数 AOBA_ICLOUD_CONFIG：設定あり"
  if [ -r "$AOBA_ICLOUD_CONFIG" ]; then
    echo "SMTP設定ファイル：読み取り可能"
  else
    echo "SMTP設定ファイル：読み取り不可"
  fi
else
  echo "環境変数 AOBA_ICLOUD_CONFIG：未設定"
fi

環境変数が未設定の場合、ローカルMacの次のファイルを参照するようになっていました。

/Users/hiroki/.config/aoba/icloud-smtp.json

ローカルMacの設定ファイルを確認

ローカルMacにSMTP設定ファイルが存在し、アクセス権限も 600（所有者のみ読み書き可能）になっていることが確認できました。

これで、Xserverへ設定を移行する準備が整いました。

SMTP設定ファイルをXserverへ転送

scp -O -P ポート番号 -i 秘密鍵のパス \
  "$HOME/.config/aoba/icloud-smtp.json" \
  SSHユーザー名@SSHホスト名:/home/xs437226/.config/aoba/icloud-smtp.json

部分	意味
`scp`	SSHを利用してファイルを転送するコマンド
`-O`	従来のSCPプロトコルを使用する
`-P ポート番号`	SSH接続先のポートを指定する
`-i 秘密鍵のパス`	SSH認証に使用する秘密鍵を指定する
`"$HOME/.config/aoba/icloud-smtp.json"`	Mac側の転送元ファイル
`SSHユーザー名@SSHホスト名`	接続先のXserver
`:`	接続先と保存先のパスを区切る
`/home/xs437226/.config/aoba/icloud-smtp.json`	Xserver側の保存先

Xserver側でSMTP設定ファイルを確認

XserverにSSH接続し、次のコマンドを実行しました。

chmod 600 "$HOME/.config/aoba/icloud-smtp.json"
ls -l "$HOME/.config/aoba/icloud-smtp.json"

XserverへのSMTP設定ファイルの転送と、アクセス権限の設定が完了しました。

確認できた内容は次のとおりです。

保存先：/home/xs437226/.config/aoba/icloud-smtp.json
ファイルサイズ：75バイト
アクセス権限：600（所有者のみ読み書き可能）
公開領域の外：Webブラウザから直接アクセスできない場所

WordPress側の設定を確認する

WordPressのPHPはMac用のパスを参照していました。

これをXserver用に変更する必要がありました。

まずは、XserverのSSHターミナルでこのコマンドは設定箇所を表示する次のコマンドを実行しました。

grep -n -C 5 'AOBA_ICLOUD_CONFIG' \
  "$HOME/ki-hi-ro.com/public_html/work/aoba/wp-content/themes/aoba-theme/inc/contact.php"

現在の contact.php は、SMTP設定ファイルの参照先がMacのパスになっていることが確認できました。

参照先を変更する

XserverのSSHターミナルで、次のコマンドを実行しました。

cd "$HOME/ki-hi-ro.com/public_html/work/aoba/wp-content/themes/aoba-theme/inc"

cp -p contact.php contact.php.backup

sed -i 's|/Users/hiroki/.config/aoba/icloud-smtp.json|/home/xs437226/.config/aoba/icloud-smtp.json|' contact.php

grep -n 'AOBA_ICLOUD_CONFIG' contact.php

以下が完了しました。

contact.php.backup にバックアップを作成
SMTP設定ファイルの参照先をMacからXserverに変更
grep で変更後のパスを確認

お問い合わせフォームの問題が解決した

正常に送信されました。

メールも届きました。

7. 公開設定

7-1. 公開ディレクトリ内に機密ファイルが残っていない状態にする

XserverのSSHターミナルで、WordPressの公開ディレクトリ内に .sql、.zip、.bak ファイルが残っていないかを検索する次のコマンドを実行しました。

find "$HOME/ki-hi-ro.com/public_html/work/aoba" \
  -type f \( -name '*.sql' -o -name '*.zip' -o -name '*.bak' \) \
  -print

結果が何も表示されなかったため、対象の拡張子を持つファイルは見つかりませんでした。

バックアップファイルを確認しました。

find "$HOME/ki-hi-ro.com/public_html/work/aoba" \
  \( -name '*.backup' -o -name '*.backup.*' \) \
  -print

WordPressの公開ディレクトリ内に、バックアップが5件残っていました。

バックアップ	内容
`contact.php.backup`	お問い合わせフォームのPHP
`patterns.backup`	ページのデザインパターン
`templates.backup`	ページテンプレート
`parts.backup`	ヘッダー・フッターなど
`.htaccess.backup`	URLの振り分け設定

公開領域の外へ移動します。

バックアップの保管場所を作成します。

mkdir -p "$HOME/aoba-backups"
chmod 700 "$HOME/aoba-backups"
ls -ld "$HOME/aoba-backups"

700 は所有者だけがアクセスできる権限です。

Xserverの公開領域外に、バックアップ専用ディレクトリを作成できました。

/home/xs437226/aoba-backups

5件のバックアップを移動します。

cd "$HOME/ki-hi-ro.com/public_html/work/aoba"

mv wp-content/themes/aoba-theme/inc/contact.php.backup \
   wp-content/themes/aoba-theme/patterns.backup \
   wp-content/themes/aoba-theme/templates.backup \
   wp-content/themes/aoba-theme/parts.backup \
   .htaccess.backup \
   "$HOME/aoba-backups/"

公開領域にバックアップが残っていないか確認しました。

find "$HOME/ki-hi-ro.com/public_html/work/aoba" \
  \( -name '*.backup' -o -name '*.backup.*' \) \
  -print

何も表示されなかったので、今回対象としたバックアップは公開領域からなくなっていることが確認できました。

7-2. Basic認証の動作確認

あおば精密工業は架空企業なので、第三者が自由に閲覧できないようにしておくことが重要です。

認証情報を送らずにサイトへアクセスし、HTTPステータスコードだけを確認するコマンドを打ち込みました。

curl -s -o /dev/null -w '%{http_code}\n' \
  https://ki-hi-ro.com/work/aoba/

結果は401でした。

HTTPステータスコード 401 が返されたので、あおば精密工業のトップページは、認証情報なしでは閲覧できない状態になっています。

下層ページも保護されているか確認しました。

4つのページに認証情報なしでアクセスし、HTTPステータスコードを確認するコマンドを打ち込みました。

for id in 9 10 11 12; do
  printf "page_id=%s: " "$id"
  curl -s -o /dev/null -w '%{http_code}\n' \
    "https://ki-hi-ro.com/work/aoba/?page_id=$id"
done

page_id=9: 401
page_id=10: 401
page_id=11: 401
page_id=12: 401

4つの下層ページすべてで 401 Unauthorized が返されました。

7-3. 検索エンジンへのインデックス防止設定を確認

Basic認証に加えて、WordPress側でも検索エンジンにインデックスしない設定になっているか確認

/usr/bin/php8.3 -d error_reporting=22527 /usr/bin/wp \
  --path="$HOME/ki-hi-ro.com/public_html/work/aoba" \
  --skip-plugins --skip-themes \
  option get blog_public

blog_public が 0 なので、あおば精密工業のWordPressでは、検索エンジンにインデックスしないよう依頼する設定が有効になっています。

7-4. スマートフォンで表示確認

https://ki-hi-ro.com/work/aoba

Basic認証でログインした後、トップページからお問い合わせページまで、レイアウト崩れやリンク切れがないかを確認

電車内で確認してOKだった

カテゴリー：思考・生き方

ローカルから本番への移行手順

検索エンジンに実在企業と誤認されないようにする

WordPressのシリアライズデータとは

1. バックアップ

2. サーバー準備

3. ファイル移行

3-1. ファイルの配置先の決定

3-2. ファイルを配置する

アップロード前の注意

WordPressファイルの配置

4. DB移行

4-1. MySQLデータベースの作成

4-2. MySQLユーザーの作成

4-3. 接続情報を控える

4-4. バックアップしていたデータベースのインポート

4-5. wp-config.phpを編集する

5. URL変更

5-1. siteurl と homeを変更

5-2. phpMyAdminで残存URLを調査

5-3. WP-CLIを使ってシリアライズデータに対応した安全なURL置換を進める

WP-CLIとは

XserverにSSH接続

WP-CLIの確認

SSH上で新しいPHPを指定する

WP-CLIの実体がある場所を確認する

PHP 8.3でWP-CLIを実行

URLを置換する

6. 表示・動作確認

6-1. 画像が表示されない

6-2. テーマ内の画像パスを一括修正

6-3. サイト全体の表示確認

6-4. 内部リンク先が表示されない

.htaccess を確認

.htaccessのバックアップ

.htaccessのURLの振り分け設定を修正

.htaccessの修正結果の確認

6-5. 事業内容ページを確認

テーマ内の古いURLを検索

古いリンクを一括修正

修正結果の確認

6-6. お問い合わせフォームが送れなくなっている

フォーム関連プラグインを確認

フォームの実装箇所を探す

送信準備の判定条件を確認

SMTP設定とは

SMTP設定の状態を確認

ローカルMacの設定ファイルを確認

SMTP設定ファイルをXserverへ転送

Xserver側でSMTP設定ファイルを確認

WordPress側の設定を確認する

参照先を変更する

お問い合わせフォームの問題が解決した

7. 公開設定

7-1. 公開ディレクトリ内に機密ファイルが残っていない状態にする

7-2. Basic認証の動作確認

7-3. 検索エンジンへのインデックス防止設定を確認

7-4. スマートフォンで表示確認

5-1. `siteurl` と `home`を変更

`.htaccess` を確認