VCCWでWordPressローカル環境を作る方法【図解完全版】

VirtualBoxのダウンロードサイトへ移動し、インストーラーをダウンロードします。

https://www.virtualbox.org/wiki/Downloads

ダウンロードしたインストーラーをダブルクリックして起動します。

プラットフォームを選択します。

ここでは、「Windows hosts」を選択します。

インストールを進めます。

Finishで終了です。

「ようこそVirtialBoxへ！」が表示されます。

「×」をクリックして終了します。

Vagrant公式サイトへ移動します。

https://www.vagrantup.com/

ダウンロードをクリックして、Windows(32bitまたは64bit)をクリックします。

＼ダウンロードしたインストーラー／

ダウンロードしたインストーラーをダブルクリックして起動します。

インストールを進めます。

Finishをクリックして終了です。

再起動する画面がでたら「Yes」をクリックして再起動します。

hostsファイルを編集し、VCCW導入前の準備をします。

管理者権限で「hosts」ファイルをメモ帳で開き、編集します。

ローカル用のIPアドレス　VCCW用のドメイン名を1行追加して上書き保存します。

ここでは、「docker-bizsel-u2004　docker-bizsel-u2004」とします。

VCCWのファイルをGithubからダウンロードします。

zipファイルをクリックしてダウンロードします。

https://github.com/vccw-team/vccw/releases/

zipファイルを解凍します。

解凍したvccwfフォルダを好きな名称に変更します。（vccwのままでもOKです）

vccwの作業場所を決め移動します。　例：C:\project\vccw

「site.yml」ファイルを作ります。

「site.yml」ファイルで、IPアドレス等の環境を設定します。

「provision」フォルダにある「default.yml」をvccw直下にコピーし、「site.yml」にファイル名を変更します。

「site.yml」を編集し、langを「lang: en_US」から「lang: ja」に変更します。

vccwフォルダに移動して、コマンドプロンプトを開きます。

vccwフォルダに移動した状態で、windowsエクスプローラーのロケーションバーに「cmd」と入力し、ENTERキーを押します。

すると、vccwフォルダでコマンドプロンプトが起動します。

コマンドプロンプトで「vagrant　up」と入力し、ENTERキーを押して起動します。

docker-bizsel-u2004または、docker-bizsel-u2004にブラウザからアクセスします。

WordPressのテーマが表示されれば成功です。

docker-bizsel-u2004/wp-login.php

または、

docker-bizsel-u2004/wp-login.phpにアクセスします。

「site.yml」ファイルに、ログイン、パスワードが設定されています。

（admin、adminが設定されているはずです。）

管理画面が表示されれば成功です！

Cygwin公式サイトへアクセスします。

https://www.cygwin.com/

Install cygwinをクリックしてダウンロードします。

＼ダウンロードしたインストーラです／

ダウンロードしたインストーラーをダブルクリックして起動します。

インストールを進めます。

完了をクリックしてインストール終了です。

インストールが完了すると、

デスクトップにショートカットができるのでクリック。

Cygwinのウインドウが起動することを確認します。

これで、Linuxコマンドが扱える準備ができました。

Cygwinのウインドウで、「ssh-keygen」と入力します。

「Enter file in which to save the key」と表示されるので、そのままEnterキーを押します。

Enter passphase(empty for no passphase)：と表示されるので

独自のパスワードを入力します。2回求められるので２回同じパスワードを入力します。

このパスワードは後ほど使用するため覚えておきます。

2回とも同じパスワードを入力すると

「id_rsa」（秘密鍵）「id_rsa.pub」（公開鍵）

というファイルが生成されたメッセージが出ます。

「C:/cygwin64/home/ユーザー名/.ssh」フォルダ内を見ると

「id_rsa」、「id_rsa.pub」と二つのファイルが生成されています。

Cygwinウインドウで、以下を入力して確認することもできます。

公開鍵の「id_rsa.pub」の内容をサーバーに登録します。

サーバーに公開鍵を登録する前に、

秘密鍵（id_rsa）のパーミッションを下記のようにCygwinで変更しておきます。

パーミッションが変更されたか確認します。

Id_rsaのパーミッションが、「-rw-------」になっていれば成功です。

念のため、「.ssh」フォルダのパーミッションも確認しておきましょう。

公開鍵を、本番環境のサーバーに登録して、

本番環境のサーバーとデータのやり取りが相互にできるようにします。

エックスサーバー社のレンタルサーバーへの登録方法をまとめています。

「公開鍵の登録を完了しました」のメッセージが出れば完了です。

公開鍵を登録したあと、パーミッションを秘密鍵と同じ「600」にします。

FTPソフトなどで本番環境のサーバーに入ります。

ホームディレクトリにある「.ssh」フォルダの「authorized_keys」上で右クリックをして、「600」と変更します。

もとから600であれば変更は不要です。

ゆめただは、FileZilliaを使っています。

ゆめただ

これでSSHの設定は終了です。

さあ次は、SSHの接続を確認しましょう。

VCCWの設定を実施したときに、wordmoveの設定ファイルがセットされています。

VCCWのフォルダに、「Movefile.yml」があるか確認をします。

Movefile.ymlを開きます。

Notepad等のテキストエディタであれば何でもOKです。

global:
  sql_adapter: default

local:
  vhost: "http://docker-bizsel-u2004"
  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

SSH接続で同期するために次の部分を変更します。

production:
  vhost: "本番サイトのURL"
  wordpress_path: "本番環境のWordPressの絶対パス" # use an absolute path here

「public_html」パス確認方法

・Cygwinを立ち上げ、sshでサーバーに接続する

・「cd サイトURL/public_html」をキーイン

・「ls」をキーイン

・「wp-settings.php」ファイルがあることを確認

・「pwd」をキーイン

・絶対パスが表示される。これを設定する。（末尾スラッシュなしで）

本番サーバー上のWordPress環境の、wp-config.phpファイルに書かれている内容を設定します。

  database:
    name: "本番データベース名"
    user: "本番データベースユーザー名"
    password: "本番データベースパスワード"
    host: "MySQLホスト名.xserver.jp"
    charset: "utf8"

ssh:以下内容をを次の通りに変更します。（エックスサーバー例）

設定内容は、「SSHの接続を確認する」で設定した内容と同じになります。

host：「xserver_account.xsrv.jp」　#サーバーID.xsrv.jp
user：「xserver_account」　#サーバーID
port：「10022」
rsync_options:はそのまま残す。

exclide:の項目は、本番環境とローカル環境で、同期しないファイルを設定することができます。

ここでは、重要な「.htaccess」ファイルが同期しないように設定します。

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

編集後のMove.ymlファイルです。

global:
  sql_adapter: default

local:
  vhost: "http://docker-bizsel-u2004"
  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: "本番サイトURL"
  wordpress_path: "本番環境のWordPressの絶対パス" # use an absolute path here

  database:
    name: "本番データベース名"
    user: "本番データベースユーザー名"
    password: "本番データベースパスワード"
    host: " MySQLホスト名.xserver.jp "
charset: "utf8"

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

  ssh:
    host: " xserver_account.xsrv.jp "
    user: " xserver_account "
    port: 10022
    rsync_options: --verbose

ゆめただ

これで、準備ができました！

さっそく、本番環境とローカル環境間でデータをやり取りしてみましょう！