VCCW(ver3.18.0)でWordPress構築~Wordmove編~

VCCWでローカルのWordPress環境を構築して、git管理するところまできました。
ただ、ローカル環境で一人でWordPressを運用してもあまり意味がないので、次はWordmoveを利用してリモートサーバーにデプロイしたり、逆にリモートからローカルに同期したりしてみましょう!

Wordmoveとは

VCCWはデフォルトでWordmoveというローカル環境とリモート環境を同期するツールがインストールされています。
wordmove pushとすればローカル環境をリモートに同期し、wordmove pullとすればリモート環境をローカルに同期することができます。

このWordmoveを使用してデプロイしていきますが、諸々準備があるので進めていきます。

前提

  • git管理編まで構築が進んでいる
  • リモートサーバーにsshの公開鍵認証orパスワード認証でアクセスができる状態
  • 秘密鍵をキーチェーンに登録して使用できる状態
  • デプロイ先の以下の情報が確認できる
    • DBの名前
    • DBのユーザー名
    • DBのパスワード
    • DBのホスト
    • デプロイ先のドメイン
    • SSHホスト
    • SSHユーザー名
    • リモートのWordPressを設置しているディレクトリ

設定ファイル

Wordmoveはmovefile.ymlというローカルとリモートの環境を記述した設定ファイルを読み込みます。
このファイルはVCCW環境で初回のvagrant up実行時に自動で生成されるファイルで、デフォルトでは以下のようになっています。

global:
  sql_adapter: default

local:
  vhost: "http://vccw.dev"
  wordpress_path: "/var/www/html" # use an absolute path here
  database:
    name: "wordpress"
    user: "wordpress"
    password: "wordpress"
    host: "localhost"
    charset: "utf8"

  # paths: # you can customize wordpress internal paths
  #   wp_config: "wp-config-custom.php"
  #   wp_content: "wp-content"
  #   uploads: "wp-content/uploads"
  #   plugins: "wp-content/plugins"
  #   mu_plugins: "wp-content/mu-plugins"
  #   themes: "wp-content/themes"
  #   languages: "wp-content/languages"

production:
  vhost: "http://example.com"
  wordpress_path: "/var/www/your_site" # use an absolute path here

  database:
    name: "database_name"
    user: "user"
    password: "password"
    host: "host"
    port: "3308" # Use just in case you have exotic server config
    mysqldump_options: "--max_allowed_packet=50MB" # Only available if using SSH

  exclude:
    - ".git/"
    - ".gitignore"
    - ".sass-cache/"
    - "bin/"
    - "tmp/*"
    - "Gemfile*"
    - "movefile.yml"
    - "wp-config.php"
    - "wp-content/*.sql"

  ssh:
    host: "host"
    user: "user"
    port: 22
    rsync_options: --verbose

ではそれぞれの項目を見ていきます。

global

sql_adapter

defaultのままでOKです

local

vhost

site.ymlで設定したhostnameと同じ値を設定します。
忘れた方はこちらをどうぞ。

wordpress_path

WordPressの構成ファイルが設置されているディレクトリになります。
特に変更していなければこれもデフォルトの”/var/www/html”で大丈夫です。

database

これも特に変更していなければデフォルトのままでいけます。
念の為site.ymlのWordPress Databaseに記述した情報と合っているか確認しておきましょう。

production

ここが一番大切です。
Productionとあるように、本番環境の諸々の情報を設定する箇所です。

vhost

本番環境のドメインを設定します。
http(s)://hoge.com的な感じですね。

wordpress_path

本番環境でWordPressが設置されているディレクトリを指定します。
WordPressの構成ファイルが格納されているファイルのディレクトリです。

database

本番環境のDBに接続するための諸々の情報になります。
レンタルサーバーの方などはそれぞれのサービスの管理画面から確認できるかと思います。
自前で環境構築された方は、ご自分で設定した情報を入力します。

デフォルトですとportに”3308″が設定されていますが、この設定を残すことでWordmoveの実行が失敗するケースが多いみたいです。
MySQLの場合はデフォルトで解放されているポートは3306らしいので、もしMySQL環境でこのままの設定だと確かに落ちそうです。
というわけで、リモート側のDBが特別な設定をしていない限りはコメントアウトしてしまいます。

最後にmysqldump_optionsですが、これはデフォルトでは”–max_allowed_packet=50MB”になっています。
DB間でデータ通信する際の制限オプションのようなのですが、自分の場合はここでハマりました…

自分はさくらのレンタルサーバー+MySQLという構成なのですが、MySQLの文字コード設定がutf8になっていないようで、以下のように変更する必要がありました。
※それに伴いデフォルトの”–max_allowed_packet=50MB”は削除しています

mysqldump_options: "--default-character-set=utf8"

exclude

これはWordmoveで転送する対象から除外したいファイルを指定する部分です。
本番環境とローカルでは.htaccessの設定が異なるため、デフォルトの設定に加えて”.htaccess”も追記しておきましょう。

あと、もしローカル環境にphpMyAdminを導入している方はphpMyAdminが格納されているフォルダ名も追加しておきます。

ssh

これで設定ファイルは最後になります。
Wordmoveはssh接続でリモートと通信を行うため、認証情報を記入していきます。

ただ、今回は公開鍵認証ですでにリモートのサーバーにアクセスできる前提で進めいているので以下の記載だけで大丈夫です

  • host
    • ssh接続先のホストです。さくらのレンタルサーバーであればFTPサーバという項目で確認できます。
  • user
    • ssh接続時のユーザー名です。さくらのレンタルサーバーであればFTPアカウントという項目で確認できます。

movefile.ymlの設定を確認

Wordmoveにはmovefile.ymlに誤りがないか確認するための機能があるので、ここまできたら設定内容に問題ないかチェックしていきます。

$ vagrant ssh
$ cd /vagrant/
$ wordmove doctor

これを実行すると…

        .------------------------.
        |       PSYCHIATRIC      |
        |         HELP  5¢       |
        |________________________|
        ||     .-"""--.         ||
        ||    /        \.-.     ||
        ||   |     ._,     \    ||
        ||   \_/`-'   '-.,_/    ||
        ||   (_   (' _)') \     ||
        ||   /|           |\    ||
        ||  | \     __   / |    ||
        ||   \_).,_____,/}/     ||
      __||____;_--'___'/ (      ||
     |\ ||   (__,\\    \_/------||
     ||\||______________________||
     ||||                        |
     ||||       THE DOCTOR       |
     \|||         IS [IN]   _____|
      \||                  (______)
       `|___________________//||\\
                           //=||=\\
                           `  ``  `

▬▬ Using Movefile: ./Movefile.yml ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▬▬ Validating movefile section: global ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    ✅  success | Formal validation passed

▬▬ Validating movefile section: local ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    ✅  success | Formal validation passed

▬▬ Validating movefile section: production ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    ✅  success | Formal validation passed

▬▬ Using Movefile: ./Movefile.yml ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▬▬ Checking local database commands and connection ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    ✅  success | `mysql` command is in $PATH
    ✅  success | `mysqldump` command is in $PATH
    ✅  success | Successfully connected to the MySQL server
    ✅  success | Successfully connected to the database

▬▬ Checking local wp-cli installation ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    ✅  success | wp-cli is correctly installed
    ✅  success | wp-cli is up to date

▬▬ Checking rsync ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    ✅  success | rsync is installed at version 3.1.1

▬▬ Checking SSH client ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    ✅  success | SSH command found

こんな感じでオールグリーンでしたら問題ないです!
もしエラーが出ていたら指摘されている箇所が正しく記述できているか確認しましょう。

リモートサーバーにデプロイ

ここまできたらコマンドを一つ叩くだけでWordPress環境を丸っとリモートにデプロイしたり、ローカルに落としてきたりできます。
ではいってみましょう。

$ vagrant ssh
$ cd /vagrant/
$ wordmove push --all

wordmove push –allは、ローカル環境のWordPressを丸ごとリモートにデプロイして上書きする処理になります。
もちろん–all以外にもオプションは用意されているので、テーマだけとかデータだけとかも指定できます。
詳しくはドキュメントを読んでみてください。

pushを実行した後、特にエラーが出ずに完了したらリモートにWordPressが反映されているか確認してみましょう!

WordPressのインストール画面が表示される…

いざデプロイ先のページを開いてみたら、自分の場合はこんな画面が表示されました。

正直未だに原因は分かっていないのですが、productionのvhostにさくらの初期ドメインを設定していたのが怪しいと思ってます。
自分の場合はさくらのレンタルサーバーを登録した直後にWordmoveでデプロイをしていたのですが、さくらが初期に用意してくれるホームページURLのドメインが開通するまで時間差があるらしく、そこらへんの切り替えのタイミングでデプロイしていたことが良くなかったのかなと…

ちなみに上記の画面でWordPressのインストールを続行しようとすると「すでにテーブルが存在しています」的なエラーで落ちてしまいました。
ということでvhostをホームページURLに変更して再度wordmove push –allをしたら無事表示されました。

画像が表示されない…

WordPressで構築したサイトが表示されていて、管理画面にも入れるのですがなぜか画像だけ404エラーになっていました。
色々情報を集めたところ、WordPressでファイルをアップロードすると基本的にはwp-content/uploadsディレクトリに格納されるが、この設定をわざわざ指定しないと直せないようでした。

というわけで、サイトドメイン/wp-admin/options.phpにアクセスして以下の設定を反映します。

これで再度リロードしたところ、無事画像も表示されました。
(なんだか腑に落ちないですが…)

おわり

かなり駆け足でしたが、これでWordPressをローカルで開発してリモート環境にデプロイすることができるようになりました!
また、本番環境をローカルに再現することも可能です。

設定ファイルを書くのは少し大変かもですが、この環境を一度作ってしまえば後の運用はかなり楽になるかと思います。

最後に、自分のmovefile.ymlをアップしておきます。

global:
  sql_adapter: default

local:
  vhost: "<%= ENV['LOCAL_VHOST'] %>"
  wordpress_path: "<%= ENV['LOCAL_WORD_PRESS_PATH'] %>"

  database:
    name: "wordpress"
    user: "wordpress"
    password: "wordpress"
    host: "localhost"
    charset: "utf8"

production:
  vhost: "<%= ENV['PROD_VHOST'] %>"
  wordpress_path: "<%= ENV['PROD_WORD_PRESS_PATH'] %>"

  database:
    name: "<%= ENV['PROD_DB_NAME'] %>"
    user: "<%= ENV['PROD_DB_USER'] %>"
    password: "<%= ENV['PROD_DB_PASS'] %>"
    host: "<%= ENV['PROD_DB_HOST'] %>"
    mysqldump_options: "--default-character-set=utf8"

  exclude:
    - ".git/"
    - ".gitignore"
    - ".sass-cache/"
    - "bin/"
    - "tmp/*"
    - "Gemfile*"
    - "movefile.yml"
    - "wp-config.php"
    - "wp-content/*.sql"
    - ".htaccess"

  ssh:
    host: "<%= ENV['PROD_SSH_HOST'] %>"
    user: "<%= ENV['PROD_SSH_USER'] %>"

movefile.ymlの中身はデリケートな情報だらけなので間違っても公開してはいけないのですが、このように環境変数に置き換えておけばgit管理もできるようになります。
ここらへんはまた後日の記事で触れます。

ではでは