WEB WEB制作 ブログ運営

2017.05.22

Vccw&Wordmoveでローカルとmixhostを同期！超快適なwordpress開発環境（後編）


こんにちは、トーマ(@toma_tokyoboy)です！

前回の記事ではvccwを使っていくための準備をしていきました。

関連記事
Vccw&Wordmoveでローカルとmixhostを同期！超快適なwordpress開発環境（前編）

続きを見る

いよいよローカル環境とMixhost（ミックスホスト）を同期させていきます。

当サイトの開発環境

アプリケーションやOSのバージョンが違うことによって、この記事通り開発環境構築しても予期せぬエラーが出る可能性があります。

 

参考に僕が開発した環境を載せておくので、うまくいかない人はできるだけバージョンを合わせてみてください。

 
  • MAC OS Sierra 10.12.4
  • Virtualbox 5.1.2
  • Vagrant 1.9.4
  • Vccw 3.18.0

仮想環境からサーバーにアクセスするための設定

ここからは、仮想環境から本番環境にアクセスするための設定をしていきます。

今回ご説明するのは、mixhostにアクセスするためのやり方です。

本番環境へのアクセスはSSH接続で行うので、そのための設定をしていきます。

公開鍵、秘密鍵を作成

ターミナルで以下のコマンドを打つと、公開鍵と秘密鍵が作成されます。

$ ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/ユーザー名/.ssh/id_rsa):  #enterキーを押します
Enter passphrase (empty for no passphrase):  #お好きなパスワードを入力
Enter same passphrase again:  #パスワード再入力

作成されたファイルは以下の２点

  • /Users/ユーザー名/.ssh/id_rsa（秘密鍵）
  • /Users/ユーザー名/.ssh/id_rsa.pub（公開鍵）

※.sshフォルダは不可視ファイルなので、Finderで確認したい方は不可視ファイルが見れるように設定してください。

Macの隠しファイルや隠しフォルダを表示する裏技 / Inforati

公開鍵の権限変更

自分以外が公開鍵を読み書きできないように権限を変更します。

$ chmod 600 ~/.ssh/id_rsa.pub

mixhostに公開鍵を登録

mixhostの管理画面（Cpanel）にアクセスします。

Vccw 7
「SSH アクセス」をクリック

「SSHキーの管理」をクリック
SSHキーの管理」をクリック

「キーのインポート」をクリック
「キーのインポート」をクリック

Vccw 2

公開鍵の中身は、ターミナルで以下のコマンドを打つと表示されるので、それを全コピーして貼り付けてください。

$ cat ~/.ssh/id_rsa.pub

各種情報を入力してインポート

Vccw 3
管理をクリック

Vccw 4
Authorizeをクリック

Vccw 9
認証ステータスがAuthorizeになっていたらOK

ssh-agentに秘密鍵を登録

$ ssh-add -K ~/.ssh/id_rsa

-Kオプションで、Macのキーチェーンに情報を保存しておかないと、MACを再起動した際にエラーが出るようです。

最初この作業をやっていなかったので、データベース移行時、以下のエラーが出てきて同期できないことがありました。

▬▬ ✓ Pushing Database ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
   remote | mysqldump --host=localhost --user=◯◯◯◯◯◯◯◯ --password=◯◯◯◯◯◯◯◯ --default-character-set=utf8 --result-file="/home/◯◯◯◯/public_html/◯◯◯◯◯◯◯◯◯◯◯◯/wp-content/dump.sql" ◯◯◯◯◯◯◯◯
/home/vagrant/.gem/ruby/2.3.0/gems/net-ssh-3.2.0/lib/net/ssh.rb:249:in `start': Authentication failed for user ◯◯◯◯@jp◯.mixhost.jp (Net::SSH::AuthenticationFailed)
    from /home/vagrant/.gem/ruby/2.3.0/gems/photocopier-1.1.1/lib/photocopier/ssh.rb:70:in `session'
    from /home/vagrant/.gem/ruby/2.3.0/gems/photocopier-1.1.1/lib/photocopier/ssh.rb:43:in `exec!'
    from /home/vagrant/.gem/ruby/2.3.0/gems/wordmove-2.0.0/lib/wordmove/deployer/ssh.rb:56:in `remote_run'
    from /home/vagrant/.gem/ruby/2.3.0/gems/wordmove-2.0.0/lib/wordmove/deployer/ssh.rb:67:in `download_remote_db'
    from /home/vagrant/.gem/ruby/2.3.0/gems/wordmove-2.0.0/lib/wordmove/deployer/ssh.rb:18:in `push_db'
    from /home/vagrant/.gem/ruby/2.3.0/gems/wordmove-2.0.0/lib/wordmove/cli.rb:86:in `block in push'
    from /home/vagrant/.gem/ruby/2.3.0/gems/wordmove-2.0.0/lib/wordmove/cli.rb:37:in `block in handle_options'
    from /home/vagrant/.gem/ruby/2.3.0/gems/wordmove-2.0.0/lib/wordmove/cli.rb:36:in `each'
    from /home/vagrant/.gem/ruby/2.3.0/gems/wordmove-2.0.0/lib/wordmove/cli.rb:36:in `handle_options'
    from /home/vagrant/.gem/ruby/2.3.0/gems/wordmove-2.0.0/lib/wordmove/cli.rb:85:in `push'
    from /home/vagrant/.gem/ruby/2.3.0/gems/thor-0.19.4/lib/thor/command.rb:27:in `run'
    from /home/vagrant/.gem/ruby/2.3.0/gems/thor-0.19.4/lib/thor/invocation.rb:126:in `invoke_command'
    from /home/vagrant/.gem/ruby/2.3.0/gems/thor-0.19.4/lib/thor.rb:369:in `dispatch'
    from /home/vagrant/.gem/ruby/2.3.0/gems/thor-0.19.4/lib/thor/base.rb:444:in `start'
    from /home/vagrant/.gem/ruby/2.3.0/gems/wordmove-2.0.0/exe/wordmove:6:in `'
    from /home/vagrant/.gem/ruby/2.3.0/bin/wordmove:23:in `load'
    from /home/vagrant/.gem/ruby/2.3.0/bin/wordmove:23:in `

開発環境にアクセス

準備が整ったので、仮想環境を構築していきます。

ターミナルでデスクトップに置いたvccwフォルダに移動します。

$ cd Desktop/vccw

アクセス

仮想環境内にアクセスします。

$ vagrant ssh

でアクセスできます。

仮想環境から出たい場合は、

$ exit

と入力してあげればOK。

movefileを作る

Movefileは、レンタルサーバーとローカルを同期するための情報を管理するファイルです。

普通はvagrant up時に自動で生成されるらしいんですが、僕が使ったバージョンではなぜかmovefileが作成されなかったので、手動で作成していきます。

※「movefile」もしくは「Movefile.yml」がすでに作成されていた場合、この工程は無視して大丈夫です。

vagrant sshで仮想環境に入ったら、/vagrantディレクトリに移動します。

cd /vagrant

このディレクトリで、Movefileを作ります。

wordmove init
create  Movefile

フォルダを見たら、Movefileが作成されているのが確認できます。

Vccw 15

このMovefileをテキストエディタで開き、編集していきます。

【エラー例】　wordmoveがないといわれる

vccwにはwordmoveが同梱してあるはずなんですが、なぜか「wordmoveがないよ」というエラーが出ます。

wordmove init
wordmove: command not found

vccwにはruby2.3が同梱してあるので、rubyバージョンに対応したwordmoveをインストール

gem install wordmove -v 2.0.0

インストールが完了したらwordmoveコマンドを実行できるので、再びmovefileを作成

wordmove init
create  Movefile

movefileを編集

ロカールのvccwフォルダを見てみましょう。

Vccw 15

wordmoveファイルができているので、こちらをテキストエディタで開き、編集していきます。

編集前はこうなってます。

local:
  vhost: "http://vhost.local"
  wordpress_path: "/vagrant" # use an absolute path here

  database:
    name: "database_name"
    user: "user"
    password: "password"
    host: "127.0.0.1"

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=1G" # Only available if using SSH

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

  # paths: # you can customize wordpress internal paths
  #   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"

  # ssh:
  #   host: "host"
  #   user: "user"
  #   password: "password" # password is optional, will use public keys if available.
  #   port: 22 # Port is optional
  #   rsync_options: "--verbose" # Additional rsync options, optional
  #   gateway: # Gateway is optional
  #     host: "host"
  #     user: "user"
  #     password: "password" # password is optional, will use public keys if available.

  # ftp:
  #   user: "user"
  #   password: "password"
  #   host: "host"
  #   passive: true
  #   scheme: "ftps" # default "ftp"

# staging: # multiple environments can be specified
#   [...]

以下は僕が編集したmovefileです、参考にしてください。追加、変更している行をハイライト表示しています。

local:
  vhost: "http://example.com"
  wordpress_path: "/home/bwrmflbd/public_html/tokyoboy.me" # use an absolute path here

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

production:
  vhost: "https://tokyoboy.me"  # 末尾に/をつけない
  wordpress_path: "/home/mixhostユーザー名/public_html/ドメイン名" # use an absolute path here

  database:
    name: "データベース名" # 本番環境のwp-config.phpを参照
    user: "データベースユーザー名"
    password: "データベースパスワード"
    host: "localhost"
    charset: "utf8"

  exclude:
    - ".git/"
    - ".gitignore"
    - ".sass-cache/"
    - "node_modules/"
    - "bin/"
    - "tmp/*"
    - "Gemfile*"
    - "Movefile"
    - "wp-config.php"
    - "wp-content/*.sql"
    - ".htaccess"   # .htaccessを同期させない

  ssh:
    host: "jp◯.mixhost.jp"
    user: "mixhostユーザー名"
    port: 22 # Port is optional
    rsync_options: "--verbose" # Additional rsync options, optional


local:
  vhost: "http://example.com"
  wordpress_path: "/home/bwrmflbd/public_html/tokyoboy.me" # use an absolute path here

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

vhostは、site.ymlで入力したhostnameと合わせます。

wordpress_pathがデフォルトのままだと、vccwのトップディレクトリにwordpressがインストールされてしまうので、書き換えます。

databaseはそのままコピペしてください。

local:
production:
  vhost: "https://tokyoboy.me"  # 末尾に/をつけない
  wordpress_path: "/home/mixhostユーザー名/public_html/ドメイン名" # use an absolute path here

vhostは本番環境のURLを入力しますが、末尾に"/"をつけるとエラーになるので注意してください。

wordpressパスはmixhostの場合、「/home/mixhostユーザー名/public_html/ドメイン名」になります。FTPクライアントなどでパスを確認すると確実です。

  database:
    name: "データベース名"
    user: "データベースユーザー名"
    password: "データベースパスワード"
    host: "localhost"
    charset: "utf8"

データベースは、本番環境にあるwp-config.phpに記載されているので、そちらを参考にしてください。

  exclude:
    - ".git/"
    - ".gitignore"
    - ".sass-cache/"
    - "node_modules/"
    - "bin/"
    - "tmp/*"
    - "Gemfile*"
    - "Movefile"
    - "wp-config.php"
    - "wp-content/*.sql"
    - ".htaccess"   # .htaccessを同期させない

eccludeは同期させたくないファイルを記載します。ここでは.htaccessを追加しています。

  ssh:
    host: "jp◯.mixhost.jp"
    user: "mixhostユーザー名"
    port: 22 # Port is optional
    rsync_options: "--verbose" # Additional rsync options, optional

コメントアウト（# ）を消して内容を書き換えます。不要な部分は削除しました。

注意してほしいのはhostの部分です。

ここはftpホスト名（◯◯◯◯.mixh.jp）ではなく、ftpsホスト名（jp◯.mixhost.jp）です。
間違いやすいので注意してください。

mixhostのportは22です。
ftpsホスト名、ユーザー名などは、mixhost契約時のメールに記載されているのでそちらを参考にしてください。

インデントに注意

行頭のインデント（行頭の空白スペース２つ）が少しでもずれるとエラーになってしまいます。

 

最初に作られる雛形ファイルのスペースなどはキープし、テキストのみ正確に編集していきましょう。

movefileの作成が終わったら、ローカルと本番環境を同期できるようになります。

wordmoveで本番環境とローカルを同期

wordmoveを使って、ローカルと本番環境を同期していきます。

本番環境からローカルへデータ移行

wordmove pull -—all

と入力します。ハイフンは２つ必要なので注意！

移行中に途中で止まって、

Are you sure you want to continue connecting (yes/no)?

と行った表示が出てきたら、ターミナルにyesと打ち込んでenterキーを押してください。

エラーが出ず全てpullできたら、ローカル環境のURLをブラウザで開くと、本番環境と完全に同期できてます。

ローカルから本番環境へデータ移行

ローカルのデータを本番環境にアップするときはpushを使います。

wordmove push —-all
pullとpushを間違えない

pushとpullは絶対に間違えないように最新の注意を払ってください。pull --allする前に、pushで本番環境のファイルとデータベースが上書きされてしまうと全てのデータが消えてしまいます。

pull
本番環境　→　ローカル環境

push
ローカル環境　→　本番環境

オプションでファイルごとの同期も可能

wordmoveのオプションをつけることにより、特定のファイル、データベースだけを同期することがができます。all以外のオプションはハイフンは１つです。

$ wordmove pull --all  # 全て同期
$ wordmove pull -w  # wordpressソースのみ
$ wordmove pull -d  # データベースのみ
$ wordmove pull -t　# テーマファイルのみ
$ wordmove pull -p　# プラグインのみ
$ wordmove pull -u　# アップデートファイルのみ（写真など）
$ wordmove pull -l　# 言語ファイルのみ
$ wordmove pull -c　# wp-config.phpを同期

【エラー例】データベース接続エラー

データベース同期時に下記のようなエラーが出ることがあります。

Unknown collation: 'utf8mb4_unicode_520_ci'_

mixhostとvccwのmysqlのバージョン違いによりこのエラーが起きます。

vccwのversion2を使うとこのエラーが出ることが確認できたので、version3のvccwを使ってください。

僕が使った使用環境は冒頭に記載しているので、そちらを参考にしてください。

ローカルサーバーにアクセス

全て同期できたらローカルサーバーにアクセスしてみましょう。

site.ymlで設定したhostname、もしくはipをブラウザで開いてみます。今回の例だと、「example.com」もしくは「192.168.33.22」です。

Vccw 19

本番環境と同じようにサイトが表示されていたらOKです。

管理画面にログイン

http://exapmple.com/wp-login.php

で管理画面にも入れるか確認します。

ログイン時のユーザー名、パスワードは本番環境と同じものを入力すればOKです。

【エラー例】 画像認証で管理画面にログインできない場合

ローカル環境でwordpressにログインした際、ログイン画面に画像認証が出るプラグインを入れていたのですが、画像パスが通っておらずキャプチャが出てこなかったです。

Vccw 8

このままではにっちもさっちもいかないので、調べてみると以下の２点のプラグインが影響してました。

  • si-captcha-for-wordpress
  • siteguard

本番環境でプラグインを停止するか、ログイン画面の画像認証を一旦無効にして、再度本番環境からpullしてあげれば解決しました。

これらのセキュリティプラグインは、ログインURLをランダムで変更する機能もあります。その機能を利用している場合も、一旦無効にする必要があります。

あとがき

長くなってしまいましたが、一度慣れてしまえばMAMPより簡単にローカル環境を構築できます。

もしエラーが出る場合は、どこか工程が抜けているか間違っている可能性があるので、もう一度記事を隅々までチェックしてみてください。

それでも解決しない場合は、エラー分をそのままコピーしてgoogle検索すると解決策が見つかるかもしれません。

とにかく一度環境を作ってしまうとその後の作業効率が大幅に上がるので、ぜひ試してみてください！

© 2024 東京ボーイ