paloma blog

NWエンジニアやってます。技術の備忘など。Pythonもちょっと。タイトルは好きなカクテルから。

Wordpressのローカル開発環境をDuplicatorでつくる

あけましておめでとうございます。

昨年をいろいろ振り返りたい思いはありますが、

とりあえず本年一発目のエントリです。


昨年Degital oceanのVPSを契約しましてゲーム日記など細々書いています。

プレイ中の画像も載せているのですが、サイズが小さく拡大機能もないのでちょっとデザインを変更することにしました。

とは言っても本番一発勝負は怖いのでローカル開発環境を作ります。

Wordpressの複製はいろんな方法がありますが、Duplicatorというプラグインが簡単そうだったのでこれで複製することにしました。 design-plus1.com

まずはSnapshot取得

プラグイン入れるので万一の際戻せるようにSnapshot取っておきます。 手順に沿ってマシンをHalt。

www.digitalocean.com

Snapshotボタンをポチ。 f:id:paloma69:20190108233207j:plain

これで完了。(リストア試験ができていませんが、マシンが一機しかないのでそのときが来るまで放っておきます)

ローカル開発環境

帰省中に弄くっていた買ったばかりのノートPC上に作ります。

ローカル環境は * VMware Workstation * Turnkey Linux Wordpress OVA で一発で構築します。

VPSUbuntuでローカルがDebianというインフラ屋にあるまじき環境の作りですが、 プラグインの導入手順が確認できればよいので今回はこれでいいことにします。

Duplicator インストール 本番機

プラグインからDuplicatorをインストール。 インストール後、Create NewでArchiveを作成します。 f:id:paloma69:20190108234543p:plain

Archve作成後はinstaller.phpとzipファイルをダウンロードします。 f:id:paloma69:20190108234651p:plain

Duplicator インストール ローカル機

ローカルのWordpressにも同じくDuplicatorをインストールします。 インストール後は本番機からダウンロードしたinstaller.phpとzipファイルをローカルWordpressのパスに配置します。

配置後はブラウザからinstaller.phpにアクセス。 Duplicatorの画面が現れます。 f:id:paloma69:20190108234846p:plain フォームに沿って入力。

DBの接続もOKです。 f:id:paloma69:20190108234942j:plain

サイト名も変更できるので、間違えないように -local- という名前を足しておきます。 f:id:paloma69:20190108235110p:plain

あとは開発環境にログインしてみます。 f:id:paloma69:20190108235128p:plain

OK!クローンができました。 f:id:paloma69:20190108235159p:plain

ローカル環境をいじる

アクセス解析してみようとJetpackも入れたのですが、サーバのクローンだとマスターのサーバしか使えないみたいですね。 まあいいでしょう。

  • 画像サイズ変更

投稿時に画像を中サイズにしていましたが、小さすぎるので大サイズにしました。 HDフルサイズもできるのですが、拡大機能をつけるので大にしておきます。

  • 拡大機能追加

画像拡大もEasy Fancyboxというプラグインで簡単にできるそうです。

techacademy.jp

画像選択時に「メディアファイル」に設定すれば拡大できるようになります。
すごい仕組みですね。どうやっているんでしょうか。
JavaScriptがどうのってどこかに書いてあった気がしますが、時間があればソースを見てみようと思います。

というわけで本番機の画像周りを変更しました

ローカル環境の変更いじりらへんは割愛しまして、
そのまま同じ手順で本番機の変更を行いました。

GTAオンラインというゲームの物件サイト購入画面なんですが、拡大して見れるようになりました。
最近のゲームはゲーム内にもウェブがあったりと非常に凝ってます。

ちなみにこの時飛行機格納庫を購入しましたw f:id:paloma69:20190108235620p:plain

拡大できるようになるとブログの振り返りが楽しくなりますね。


長いこと直したかった画像周りをようやく直せました。
この時同時にHTTPS化もしたので、その辺は次回書きたいと思います。