WordpressのテストサーバーのスタイルシートをDropbox越しに編集する

やわなべです。

マニアックな技術ネタが続いていて恐縮です。

ここまでのあらすじ

Windows7にVmwarePlayerとCentOS7を入れたらネットワークを認識しなくて困った話
デスクトップなしのCentOSにDropboxをインストールして動かす

Windows上の仮想化環境に作ったCentOSとMacとの間で、Dropboxを通じてファイルの同期が取れるようにしました。今回はこれを使って、いよいよ、当ブログのテスト環境を作っていきます。

スポンサーリンク

テストサーバに素のWordpress環境を構築

まずテストサーバのユーザー「ywnb」のホーム領域以下に、普通にアーカイブから最新版のWordpressをインストールします。

えっ? そこまでにいろいろ入れないといけないんじゃないの、って?

あーそうすね。ええと、そのあたりは「CentOS7 wordpress インストール」とかでググると、有用な情報がいろいろ得られるんじゃないでしょうか。(他人事)

というわけで、いろいろすっ飛ばして、現在「/home/ywnb/public_html」直下にWordpressのindex.phpがある状態です。

以前のエントリーで書いたように、テストサーバーには192.168.11.97という、自宅wifiネットワークの構内IPアドレスが割りあててあります。

これに対し、Macのhostsファイル(/etc/hosts)を編集して「ywnb.com」というダミーの名前をつけてあげます。

【/etc/hosts】
192.168.11.97 ywnb.com

実際のywnb.comというドメインの持ち主は私じゃありません。あくまでこのMacの中だけ「ywnb.comという名前は、隣にあるテストサーバーだよー」と、ウソを教えこんでるわけですね。いわゆるDNSハッキングの手順です。 お好みでgoogle.comとか、yahoo.co.jpとかに設定するのもいいでしょう。さぞかしネットライフに支障が出ることと思います。

一方、CentOS側のwebサーバー(HTTPD)には、「ywnb.comというリクエストが来たら、/home/ywnb/public_html以下のドキュメントを返しなさいよ」と教えこんでおきます。

具体的な設定ファイルはこう。

【/etc/httpd/conf.d/vhost.conf】

DocumentRoot /home/ywnb/public_html
ServerName ywnb.com
CustomLog /dev/null common env=0
ErrorLog /home/ywnb/logs/error_log

AllowOverride All
Require all granted
DirectoryIndex index.php index.html

あと、内部で混乱しないよう、こっちのhostsにも嘘情報を書いときます。

【/etc/hosts】
128.0.0.1 ywnb.com

この状態でテストサーバのHTTPDを再起動。Macから「http://ywnb.com」でアクセスすると、Wordpressのインストーラが起動。DBの準備さえできていれば、すぐに、

ss60053.png

まっさらな「新生やわなべ.net」の誕生です。繰り返しますが「http://ywnb.com」と叩いてこれが出てくるのは、偽情報で調教された私のMacだけです。

WordPressのテーマ情報をDropboxで共有する

投稿データは後で移行するとして、今回の主目的、Wordpressのカスタマイズ情報をMacから簡単に編集できるようにします。

WordPressのテーマ情報(=デザインテンプレート)は「wp-content/themes」というフォルダ以下にテーマ名ごとに格納されます。

自作のプラグインなどがなければ、カスタマイズ情報はすべてここに集約されるので、この「themes」フォルダを、Dropbox経由でMacと共有できるようにします。

Macの中にはこれまで使ってたテスト環境があるので、そのなかから「themes」だけ抜き出して、「~/Dropbox/linux/ywnbtheme」としてFinderでコピー(または移動、またはリンク)します。

するとDropboxの同期が動いて、すぐにCentOS側でも
/home/ywnb/Dropbox/linux/ywnbtheme」というフォルダが見えるようになります。

wp-content以下のthemesフォルダを一旦リネームして、代わりに上のDropbox共有下にある「ywnbtheme」を「themes」という名前でリンクさせます。

cd ~/public_html/wp-content
mv themes themes.orig
ln -s ~/Dropbox/linux/ywnbtheme themes

ターミナルでwp-content以下を表示するとこんな感じ。

ss59613.png

themesがDropboxの共有フォルダ内フォルダへのリンクになってるのがわかるかと。

この状態でテスト環境のWordpressの管理画面で「外観」「テーマ」から、「ywnb」テーマを選んで有効化。さっきのブラウザをリロードすると、

ss72851.png

はい、中身は空ですが、デザインだけ今のこのブログと同じものに変わりました。

ここんとこ技術ネタばっかり書いてるんで、出てくる広告が技術者向けのものばっかりになりましたよ。

WordPressの投稿データを移行する

ここらで本番サーバの投稿データをコピーしましょうか。

今回は素直に標準のインポートツールを使います。テストサーバー側の管理画面から「ツール」「インポート」「Wordpress」を選択。「WordPress Importer」というプラグインを入れろ、と言ってくるので入れます。

ss67233.png

本番側(ywnb.net)では逆に、管理画面から「ツール」「エクスポート」ですべてのコンテンツをXMLファイルでダウンロード。

落としてきたXMLは4.8MBもありました。これまでの駄文の集積だと思うと感慨深いですね。

再度テスト側(ywnb.com)のインポート画面に移って、今落としてきたxmlをアップロードファイルとして指定します。

ss72998.png

あら。PHPのデフォルト設定で、2MB以上のアップロードはできないようです。php.iniを編集して20MBまでアップロードできるようにしてリトライ。

待つことしばし。インポートが完了しました。私は画像をすべてGoogleフォトに上げてるんでこれですみますが、もし大量の画像を上の手順で移動しようとすると、ものすごく時間がかかるので、その場合は、本番サーバのwp-content以下まるごと圧縮して、FTPなどで転送するのがいいでしょう。

ss27961.png

というわけで、テスト環境「http://ywnb.com」のできあがり。パーマリンク設定やメニューのウィジェットなどは上記プラグインではインポートできないので、手動で設定するか、別の移行ツールを使いましょう。あと検索エンジンへの通知は必ずオフに。

デザイン編集がシームレスにできるか

ためしにちょっとデザインいじってみましょうか。

ss73938.png

いじる前の状態がこれ。

ss74000.png

わかりやすいところで、テーマ「ywnb」のスタイルシートをMacのテキストエディタで開き、サイト全体のデフォルトフォントサイズを15pxから20pxに変えてみます。

若干スタイルシート(.css)と書式が違うのはsassってやつで、エディタ(SublimeText)の設定で、保存する際、自動でcssにコンバート&圧縮するようにしてます。

で、ファイルを保存して、「ywnb.com」を表示しているブラウザをリロードすると、さっきのが、、、

ss74026.png

文字が大きくなって、Mac側の変更が即反映されたことが確認できました。

Wifi越しで若干タイムラグはあるもののほとんど気にならないレベル。Macの中にテスト環境をおいてた時とほぼ同じ感覚でカスタマイズができますね。

変更したファイルはrsyncで本番サーバーへ同期

変更したファイルはこれまで、rsyncという同期コマンドを使って、MacからSSH越しに本番のエックスサーバーに差分同期させてました。

今回これもCentOSに移設しなきゃ、と思ったんですが、よく考えたら、カスタマイズ部分はDropbox上にあるわけで、従来通りMacからDropboxの内容でエックスサーバへ同期をかければいいだけの話でした。

というわけで、「Let’sNote上にブログのテスト環境をつくてみよう」シリーズは、ひとまずこれで完結です。ありがとうございました。