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

どうも。Reoです。

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

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

ということで。

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

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

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

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

VirtualBoxとVagrantを用意

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

vagrantはターミナルで

brew install vagrant-completion

すればおkです。

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

VVVをインストール

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

mkdir vagrant

んで移動しておきます。

cd vagrant

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

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

vagrantフォルダ内にVVVフォルダができればおk!

 

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

cd ~/vagrant/VVV

ここで

vagrant up

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

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

vvv.testとかが開ければおkのはず!

 

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

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です。

この2つはわかりやすいように適当につけておkです。(.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)

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

 

具体的には

cd ~/Vagrant/VVV/www/damp/
ls
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
sudo chmod 0600 ~/.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
gem install rubygems-update
update_rubygems
gem install wordmove

でインストールします。

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とかの導入や、実際にデータを反映するのとかやりたいと思います。

 

ではでは。

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

 

それではでは〜

Comments...

コメントは認証制です。詳しくは下記の注意をお読みください。お気軽にコメントお願いします!

Write a Comment

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

Related Memo...

wordmove+ロリポップうまくいかないときメモ

無駄に2回も同じことでハマった。くそう。

rsyncがうまくいかない

ssh接続でrsyncがどうのっていうエラーが出た時

rsync: connection unexpectedly closed (0 bytes received so far) [sender]
rsync error: error in rsync protocol data stream (code 12) at io.c(226) [sender=3.1.0]

権限がおかしい(が自分はどこの権限がおかしいのかよくわかっていない)のだが

ロリポに SSH で公開鍵接続して rsync でサーバー同期をしてみる – IMPOV::In My Point Of View

で公開鍵接続の設定をするとなんか上手くいく(パスワード接続できない→鍵生成・配置→パスワード接続できるようになる。実際には鍵使わずパスワード認証してるのになんでだろう)

 

子ページが404になる

ロリポップサーバーでサブディレクトリを変更して記事が404エラーになる場合の対処法

まさにこれで、WordPressのパーマリンク設定を開いて保存を押すだけで直る。

 

でもこのメモ見る機会なければいいなぁとは思う。

WordPress

【bbpress】管理者以外で投稿時にhtmlが反映されないときの対処【wordpress】

管理者以外で用意した投稿フォームから投稿してもhtmlタグが変換されない。

bbpressがそういう仕様ではあるのだが、それでもhtmlを使いたい場合。

Topic: Allowing Participants to post “unrestricted HTML” · bbPress.org

このスレの一番下より

WordPressにUser Role Editorというプラグインを導入。

指定したユーザにunfiltered_htmlを割り振る。

ユーザを全て管理者にするよりはいいはず。

WordPress

【WordPress】プラグイン化したカスタム投稿をテーマ内で使うとき

通常テーマ内でカスタム投稿を表示させる時に

$args = array( "posts_per_page" => 5,
        "post_type" => 'news'
    );
$the_query = new WP_Query( $args );
if($posts):

と書けば表示されるのに、プラグイン化していたので表示されなかった話。

 

functions.phpでカスタム投稿を追加している場合は必要ないが、newsというカスタム投稿をプラグイン化していたので、以下の記述が必要でした。

    public function __construct() {
        add_action( 'pre_get_posts', array($this, 'add_my_post_types_to_query') );
    }

    // queryにnewsをセットする
    function add_my_post_types_to_query( $query ) {
        if ( is_home() && $query->is_main_query() )
            $query->set( 'post_type', array( 'post', 'page', 'news' ) );
        return $query;
    }

WordPressプラグインの作り方は、また後日ちゃんとした記事にしたいと思ってます。今回はとりあえず忘れそうなのでメモだけで失礼。

WordPress

WordPressで抜粋の語尾が文字化けするときメモ

以下の記事にて解決。ありがとうございます。

the_excerpt() で表示される &nbsp | Web Design Leaves

 

改行コード等についてのみ触れられていますが、

こういう文字化けにも対応可能でした。

仕事で使ったけれどこのブログにも対応せねばメモ。

WordPress

【WordPress】メディアライブラリ の画像IDを取得する

WordPressのメディアライブラリ にアップロードされた画像IDを取得する方法です。

例えば6件取得してギャラリーで表示するとき。

$ids = get_posts( 
    array(
        'post_type'      => 'attachment', 
        'post_mime_type' => 'image', 
        'post_status'    => 'inherit', 
        'posts_per_page' => 6,
        'fields'         => 'ids',
    ) 
);

$ids_str = '';
foreach ( $ids as $id ) {
    $ids_str .= $id . ',';
}

$ids_str = rtrim($ids_str, ',');

// ショートコードでギャラリーを表示
echo do_shortcode( '[gallery ids="' . $ids .'"]' );

意外と便利なのでは!

 

WordPress
more