VVV+WordMoveでWordPressのローカル環境を構築するぞッ！【Xserver】

どうも。Reoです。

このブログを改装するにあたって、今までやったことのなかったWordPressのローカル環境構築をやってみたのでメモがてらに書いていきます。

今まで本番環境でそのまんま作っていたのですが、流石に今このブログでそれをするのはヤバイので、ちゃんとローカルに本番と同様な環境でしっかり作ってからデプロイしないと！

ということで。

とりあえず今回は「VVV(Varying Vagrant Vagrants)」を用いてWordPressのローカル環境を作り、今すでに公開しているものとを同期するところまでやっていこうと思います。

なんやかんやで自分は3日くらい戦ってようやくできました。。。vagrantも全然詳しくないし色々細かいところはわからんですが、とりあえず方法だけメモメモします。

操作は全てMacのターミナルで行なっています。

サーバーはXserverを利用しています。

VirtualBoxとVagrantを用意

まずはVirtualBoxとVagrantをインストールしておきます。

vagrantはターミナルで

brew install vagrant-completion

すればおｋです。

この辺の細かいことは割愛。

VVVをインストール

適当に作業用ディレクトリを作っておきます。

mkdir vagrant

んで移動しておきます。

cd vagrant

そこでVVVをgithubからクローンします。

git clone git@github.com:Varying-Vagrant-Vagrants/VVV.git

vagrantフォルダ内にVVVフォルダができればおｋ！

Vagrantfileが入っているところまでcdで移動します。(VVVまで)

cd ~/vagrant/VVV

ここで

vagrant up

をします。結構時間がかかります。

終わったら、とりあえずWordPressのサイトが立ち上がるようになります。

vvv.testとかが開ければおｋのはず！

一応入れといた方がいいよということなので

vagrant plugin install vagrant-hostsupdater

vagrant plugin install vagrant-triggers

をいれておきました。こちらを参考に！（【WordPress】 VVV（Varying-Vagrant-Vagrants）を使った 最強ローカル環境構築！！）

ここまではどこみてもできました。他の方の記事のが詳しく書かれていると思いますので是非そちらを参考にしてくださいね。

vvで新規サイトを作成する！

自分のサイト用のローカル環境を作っていきます。

今回は、私のvivicamblog「DAMP」のローカル環境を作っていこうと思います。

まずはVVV内のvvv-config.ymlを複製し、vvv-custom.ymlとします。

そして中を編集します。コメントアウトを取り除くとファイルの中はこんな感じです。

---
sites:
  damp:
    hosts:
      - damp.test
utilities:
  core:
    - memcached-admin
    - opcache-status
    - phpmyadmin
    - webgrind
    - trusted-hosts
    - tls-ca

vm_config:
  memory: 2048
  cores: 1

vvv-config.ymlのデフォルトのsites等をを書き換える形で編集すると良いと思います。

インデントが大事らしいので崩さないように注意しながら編集してください。

sites:の後がディレクトリ名等に使われる名前(damp)でhosts:の後がローカルで確認するときに用いられるURLです。

この２つはわかりやすいように適当につけておｋです。（.localはあんまりよろしくないらしい。参考）

変更した後は

vagrant reload --provision

しておきます。

次にvv(Variable VVV)コマンドを使えるように入れておきます。

brew install vv

vvが入っているか確認。

vv --version

vv version 1.12

そしたらいよいよ作成します。

cd vagrant/VVV

に移動しておき

vv create --name damp --domain damp.test

を実行。

nameは先ほどsites:に書いた名前、domainはhosts:に書いたアドレスを書いてください。（ここが違うとうまくいかない！）

色々聞かれるので適当に答えておきます。

しばらく待ちます。

Successになれば終わりです。場合によってはなんか足りないものとかあってうまくいかないかもしれないです。その時は頑張って調べて・・・(┐「ε:)

ちゃんとできているかの確認をします。

先ほど作ったURLにアクセスしてみます。今回は(damp.test)

んでちゃんと表示されればおｋ

具体的には

cd ~/Vagrant/VVV/www/damp/

htdocs  vvv-hosts vvv-init.sh wp-cli.yml

で先ほど出来上がったフォルダ(damp)内にhtdocsがあればうまくできているはずです。

自分が失敗しまくってた時（vvv-custom.ymlを作らずにただコマンドだけを書いていたり、sites:host:の名前が一致していていなかった時）はアクセスできないのはもちろん、このhtdocsがない状態で生成されていました。

なのでhtdocsがあって、サイトにアクセスできればここまではうまくいっているはずです。

htdocsがあってもうまくいかない時はうまくいきません。

なぜだ・・・・・・・。

さっきまで開けてたのにvagrant reload --provisionしたら死んでしまった・・・・。

時間おいたら直った！！！！！反映されてなかっただけかも！！！

なんかうまくいかないときはちょっと時間おいてみるのも必要かもしれないです。

WordMoveを導入しよう！

WordMoveを導入していきます。WordMoveはWordPress専用のデプロイツールです。

WordMove自体の説明は「WordMoveを使ってVagrant内のWordPressと本番環境を同期する！」の記事の説明がわかりやすいです。 リンク切れにより削除

まずはvagrant sshで接続します。

cd vagrant/VVV

vagrant ssh

ログインしたら、そこで秘密鍵の作成をします。ここからしばらくはvagrant内です。

ssh-keygen

passphraseは適当につけてください。（あとで何度も使うことになります）

公開鍵も生成されているはずなので

cat ~/.ssh/id_rsa.pub

で取得し、表示された文字列を全てコピーします。

ここからはXserverを用います。

サーバーパネルにログインし、ssh設定を開きます。

ssh設定がONになっていなければONにします。

そして先ほど取得した公開鍵を以下にペーストします。

公開鍵を登録するボタンを押して登録します。

登録ができたら接続できるかを確認しましょう。

ssh アカウントID@アカウントID.xsrv.jp -p 10022

アカウントIDはサーバーパネルにログインする際のIDです。

Permission denied (publickey,gssapi-with-mic).のエラーが出た場合は、

sudo chown vagrant ~/.ssh/authorized_keys

をしてあげると多分いけます。これはvagrant sshで接続した状態で行ないます。

このPermission deniedに2日ぐらい悩みました。自分はvartualBox内でなく外で公開鍵の設定やらなんやらをしていて、いざ中に入ってやったらPermission deniedをくらってました。

ssh アカウントID@アカウントID.xsrv.jp -p 10022で接続ができれば、そこでpwd（現在地）とls（そのディレクトリの中身のリスト）を駆使して、現在運用しているサイトのパスを取得しておきます。

具体的にはwp-configのある位置までのpathです。

自分のだとhome/アカウントID/ドメイン名/public_htmlにあったので、そこまでのpathを保存しておきます。（多分普通は/public_html/hoge/ぐらいにあると思います）

このpathをどこかにメモっておいてください。

サーバにssh接続している場合は一度exitで切断しておきます。

vagrant sshした状態でWordMoveをインストールします。

gem install wordmove

rubyやgemのバージョンが古い場合は

apt-get install -y ruby-dev

でインストールします。

ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the〜的なことを言われた場合はルートに行ってから

sudo su -

gem install wordmove

でできるはずです。

インストールできたら、

cd /srv/www/damp/htdocs

で移動します。dampの部分は最初にvvで生成したsites:の名前です。

ここで

wordmove init

をします。すると、movefile.ymlが生成されます。

movefile.ymlを編集します。

vi movefile.yml

movefileの中身を以下のように適宜編集します。

global:
  sql_adapter: default

local:
  vhost: http://damp.test  # ここは最初に作ったhosts:のURL ①
  wordpress_path: /srv/www/damp/htdocs # use an absolute path here

  database:
    name: damp
    user: wp
    password: "wp" # could be blank, so always use quotes around
    host: localhost

production:
  vhost: http://uruly.xyz/damp  # 実際に運用中のサイトURL ②
  wordpress_path: /var/www/your_site # WordPressのpath ③

  database:
    name:hoge_wp # ④
    user: hoge_wp   # ⑤
    password: password  #⑥
    host: mysqlXX.xsrv.jp  #⑦


  ssh:
    host: hoge.xsrv.jp  # ⑧
    user: hoge  # ⑨
  #   password: password # password is optional, will use public keys if available.
    port: 10022 # Port is optional
    rsync_options: --verbose 

①vvで作成した際のhosts:部分 ②実際に運用中のサイト（同期したいサイトのURL） ③②の配置されている場所。先ほどssh hoge@hoge.xsrv.jp -p 10022をして調べてきたpathです。 ④アカウント名_wpXX（以下の画像参照） ⑤④と同じはず（以下の画像参照） ⑥データベースのパスワード（以下の画像参照） ⑦MySQLのホスト（以下の画像参照） ⑧アカウント名.xsrv.jp ⑨アカウント名

④〜⑦は取得したいサイトのwp-config.phpに書いてあります。

もしくはXserverのサーバーパネル内のMySQL設定で調べてください。

これらを編集したら保存して、

wordmove pull -e production --all

を実行します。これをするとmovefile.ymlのデータを元に引っ張ってくることができます。

もしルートに入ってる状態になっていたら、上手くいかないと思いますので、exitで抜けておいて

/srv/www/damp/htdocs$ wordmove pull -e production --all

ここで何度もpathphraseを求められますが、これは秘密鍵を生成する時に設定したパスワードを入力します。

これでローカルのurlにアクセスしてみると、データが同期されているはず！！

damp.testにアクセスしてみた。

写真が重すぎて全く入ってきてないですが、ちゃんと中身はきてます。やったぜ。

これで一応ローカル環境に本番環境を丸々取り込むことができました。

とはいってもまだこの後どうしたらいいかわからんので、とりあえずまた次回。gitとかの導入や、実際にデータを反映するのとかやりたいと思います。

ではでは。

苦労したんだなって感じのリンクの量！！！苦労しました！！！他にも色々迷走しましたが特に役にたったのをリンクさせていただきました。

それではでは〜