WordPress
vagrant
wordmove
VCCW

[初歩]Wordpressローカル環境を構築してサーバーからpullするまで

この記事のターゲット

  • 社内向けに書いた、初歩のステップから書いた記事です。
  • Mac(のターミナル向け)に書いてます

イメージ

Untitled (7).png

Wordpressのローカル環境の構築手順(Mac)

  1. vargant & virtual box を公式サイトからDL&解凍
    https://www.vagrantup.com/downloads.html
    https://www.virtualbox.org/wiki/Downloads

  2. Macのターミナルを立ち上げ、インストールが完了しているか確認する
    $ vagrant -v
    Vagrant 1.7.2
    $ VirtualBox --help
    Oracle VM VirtualBox Manager 4.3.20

  3. 自分のPC内の好きな階層に、開発環境を構築したいディレクトリを作成
    ↓例
    /Users/user_name/dev_sample
    ※macでは/Users/user_name/dev_sample~/dev_sampleと同じなので、以下その方法で記述します。

  4. vccwをDLして解凍、そのvccwフォルダの「中身」を、丸ごとさっき作成したディレクトリに移し替える
    http://vccw.cc/
    (中身だけ、つまりvccwというフォルダ自体は不要)

  5. 必要なプラグインをインストール。
    $ vagrant plugin install vagrant-hostsupdater

  6. 仮想環境のベースをインストールする (Boxファイルの準備)
    $ vagrant box add miya0001/vccw
    ※結構時間かかる

  7. 設定ファイルの準備
    上記まで終わると、3で作った開発ディレクトリの中に、色々ファイルが生成されているはず。
    その中の/provision/にある default.yml をコピーして、"site.yml"にリネームした後、一段上のディレクトリ~/dev_sample に設置し直す

  8. site.yml の編集
    最低限、下記は変更する

    • 18行目のhostname:(ローカル立ち上げてブラウザでアクセスする際の好きなURL)
    • (注意)chromeの場合 .dev など一部避けるべきドメインがある > 参考記事
    • 19行目のip(2サイト以上立ち上げる場合は、hostnameとipは独自にする必要あり)
  9. サイトの立ち上げ
    $ cd ~/dev_sample 開発ディレクトリに移動する
    $ vagrant up 環境を立ち上げる
    その後、site.ymlで設定したHost、もしくはIPにブラウザからアクセスすると、wordpressのデフォルトサイトが立ち上がっている。
    起動したvargantの終了は $ vagrant halt (メモリが重くなってきたときなど)
    再起動は $ vagrant reload (設定ファイル書き換えたときなど)

  10. Wordpress環境の改修
    ~/dev_sample の直下に
    wordpress というフォルダができるはずで、それ以下がWordpressの階層になるので、ここを編集していく

サーバーからローカル環境にソースを反映する

  • Wordmoveというツールを使います。
  • SSHキーではなくパスワード方式です。
  1. 開発用のルートディレクトリに移動してMovefileを見つける
    ~/dev_sampleにMovefileがあるのでそれを開く

  2. 接続先サーバー情報の更新
    20行目production:以降に接続先サーバーの情報を記入する 

Movefile(記入例)
production:
  vhost: "{ホストのURL}"
  wordpress_path: "{wordpressフォルダがあるサーバー上のパス}" # 例"/home/website/public_html"のようにパスを指定する
  database:
    name: "{データベース名}"
    user: "{データベースのユーザー名}"
    password: "{データベースのパスワード}"
    host: "localhost"
    port: "3306" # 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"
    - "wp-config.php"
    - "wp-content/*.sql"
    - ".htaccess" #basic認証とかリダイレクトとかいらない場合が多いので
    - "*.zip" #バックアップとかなのでいらない
    - "*.gz" #バックアップとかなのでいらない
  ssh:
    host: "{ホストのURL}"
    user: "{FTPユーザー名}"
    port: 22
    # password: {パスワード}
    # 自分の場合1度目にpasswordを記述するとエラーになるので最初だけコメントアウト
    rsync_options: --verbose

3 . 以下、コマンドラインで実行してpullする
  $ cd ~/dev_sample 開発用のフォルダに移動する
  $ vagrant ssh sshログインする
  (※sshを終えたい場合は$ exit)
  $ cd /vagrant pullを実行できるフォルダに移動する
  $ wordmove pull -t サーバーのWordpressの"themes"フォルダのみ、ローカルにソースを同期させる
  ※ 要注意! 上記pullpushにすると、逆にローカルからサーバーにソースをアップロードする(上書きされる)
  ※ -tはオプション(入力必須)。「themes」フォルダ配下だけ同期する、の意味。
  ※ その他のオプションでは、-u(uploadフォルダを同期)、-p(plugin)、--all(DBまで含め全て)
  -> まずtheme,pluginなどだけダウンロードしていくのが無難
4. テーマの再設定
   pullした後、デフォルト以外のテーマを使っている場合はフロントが真っ白になるので、まず管理画面にアクセス&ログインして正しいテーマを選択すると見えるようになる

以上、ツッコミなどあればぜひコメントください。お待ちしております。