ローカル環境   ※当サイトのコンテンツには広告が含まれる場合があります。

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

2022-07-27 yume-tada

vccw-wordpress-environment

Warning: Undefined variable $sc_Linkcard in /home/xs533301/biz-sel.com/public_html/wp-content/themes/affinger-jet-child/functions.php on line 145

VCCWでWordPressのローカル環境を作る方法が知りたい!

findout
お調べさん
ゆめただのり
ゆめただ

そんなお悩みを解決します!

 本記事を読んでわかるコト

あなたのPC(ローカル)に、VCCWを使ったWordPressの環境を構築する方法がわかります。

本番環境とローカル環境の同期方法がわかります。

この記事を書いた人【ゆめただ】

この記事を書いた人
track?id=8172&type=classic&u=d4a0c814 353b 40ec adce 45b5601cfe68

VCCWとは?

ゆめただのり
ゆめただ

VCCWとは何でしょうか?

VCCWとは

Vagrant・Chef・CentOS・WordPressのそれぞれの頭文字をとったものです。

仮想環境(VirtualBox)上でWordPressを動作させる開発環境となります。

Vagrant:仮想環境を設定・管理するためのソフトウェアです。

Chef :システム設定やソフトウェアの導入(インストール)などを自動化、効率化する構成管理ツールです。

CentOS:LinuxOSの中の1つです。RHELの完全互換を目指し、安定性・機能性を誇ります。

WordPress:CMLの中の1つで、Web開発プラットフォームです。

VCCWのWordPressローカル環境

本記事で説明する「VCCWのWordPressローカル環境」です。

ゆめただのり
ゆめただ

ゆめただが実際に自分のパソコンで立ち上げた時の方法です。

VCCW関連の記事を調べて複数の記事の内容を試し、成功した結果をまとめています。

VCCWのWordPressローカル環境イメージ

vccw-wordpress

レンタルサーバーの機能を、VirtualBoxを使い仮想環境を作り実現します。

Vagrantで仮想環境を設定してVirtualBoxを起動し、WordPRessを動かします。

本番環境のレンタルサーバーについて

ゆめただはエックスサーバーを使用しています。エックスサーバーの説明が後半にあります。

本番環境とローカル環境の同期

本記事では、本番環境とローカル環境の同期方法についても説明します。

ゆめただのり
ゆめただ

ローカル環境ができても、本番環境からデータを持ってきたり、

ローカルの記事を本番に持って行ったり、

相互にデータのやり取りができないと意味がありません。

本番環境とローカル環境の同期

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

VCCW環境を作るとwordmoveも使えるようになります。

Uploading

動作環境【参考】

ゆめただのり
ゆめただ

ゆめただが立ち上げた時のローカルの環境です。

参考にしてください。

VCCW WordPress ゆめただ 動作環境【参考】

OS:Windows10 Home

CPU : Intel(R) Core(TM) i7-8550U

Memory:16GB

Working

VirtualBoxのセットアップ

仮想環境を作るVirtualBoxをセットアップしていきます。

VirtualBoxダウンロード

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

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

vccw_image2

VirtualBoxインストール

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

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

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

vccw_image1

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

vccw_image3
vccw_image4
arrow-down
vccw_image5
vccw_image6
arrow-down
vccw_image7
vccw_image8
arrow-down

Finishで終了です。

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

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

vccw_image9
vccw_image10

Vagrantのセットアップ

仮想環境を設定・管理するVagrant(ベイグラント)をセットアップしていきます。

Vagrantをダウンロード

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

https://www.vagrantup.com/

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

vccw_image11
vccw_image12

Vagrantのバージョンについて

Vagrant公式サイトに掲載されているバージョンは、本記事のものと異なる場合があります。

Vagrant公式サイトの最新版をお使いください。

\ダウンロードしたインストーラー/

vccw_image13

Vagrantをインストール

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

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

vccw_image14
vccw_image15
arrow-down
vccw_image16
vccw_image17
arrow-down
vccw_image18
vccw_image19

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

再起動する

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

vccw_image20

hostsファイル編集

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

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

管理者権限でメモ帳を開く方法

「スタート」ー「Windowsアクセサリ]ー「メモ帳」を右クリック。

「その他」ー「管理者として実行」を選択。

hostsファイルはここにあります

「hosts」ファイルは、「OSインストールドライブ:\Windows\System32\drivers\etc」 にあります。

vccw_image21
vccw_image22

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

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

vccw_image23

VCCWのセットアップ

VCCWの環境ファイルをセットアップしていきます。

VCCW環境ファイルダウンロード

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

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

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

vccw_image24

zipファイルを解凍

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

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

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

vccw_image25

syte.ymlの準備

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

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

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

vccw_image26
vccw_image27

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

vccw_image28
vccw_image29

Vagrantを立ち上げる

Vagrantを起動します。

コマンドプロンプトを開く

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

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

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

vccw_image30
vccw_image30_2

vagrantを起動する

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

vccw_image31
vccw_image32
vccw_image33

ローカルサイトアクセス・WordPressログイン

ローカルサイトへアクセスできるか、

WordPress管理画面にへログインできるかテストします。

ローカルサイトアクセステスト

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

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

vccw_image34

WordPressログインテスト

docker-bizsel-u2004/wp-login.php

または、

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

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

(admin、adminが設定されているはずです。)

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

vccw_image35
vccw_image36
vccw_image37

本番環境とローカル環境を同期しよう!

,ここからは、作成したローカル環境と本番環境を同期させるための方法をまとめいます。

せっかくローカル環境を作成したので、本番環境との同期ができるようにしましょう!

Uploading2

Cygwinセットアップ

Windows上で、Linix系のコマンドが使えるように

Cygwinをインストールします。

Cygwinをダウンロード

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

https://www.cygwin.com/

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

vccw_image38
vccw_image39

\ダウンロードしたインストーラです/

vccw_image40

Cygwinをインストール

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

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

vccw_image41
vccw_image42
arrow-down
vccw_image43
vccw_image44
arrow-down
vccw_image45
vccw_image46
arrow-down
vccw_image47
vccw_image48
arrow-down
vccw_image49
vccw_image50
arrow-down
vccw_image51
vccw_image52
arrow-down

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

vccw_image53

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

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

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

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

vccw_image54
vccw_image55

SSHの設定

本番環境のサーバーと通信するために、SSHの設定をします。

SSHとは?

SSH:Secure Shell(セキュアシェル)の略。

遠隔にあるサーバーやコンピュータと通信するための暗号プロトコルです。

相手先と暗号用の鍵(公開鍵と秘密鍵)を使って、通信内容を暗号化できます。

暗号化通信の仕組みは、理解しなくて大丈夫です。

公開鍵と秘密鍵を生成する

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

vccw_image56

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

vccw_image57

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

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

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

vccw_image58

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

「id_rsa」(秘密鍵)「id_rsa.pub」(公開鍵)

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

vccw_image59

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

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

vccw_image60

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

Cygwin

$ cd C:\cygwin64\home\user\.ssh

$ ls -a

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

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

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

Cygwin

$ chmod 600 /home/user/.ssh/id_rsa

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

Cygwin

$ ls-ltr /home/user/.ssh/id_rsa

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

vccw_image62

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

vccw_image63

公開鍵を本番サーバーへ登録する

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

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

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

エックスサーバー設定

サーバーパネルから、「SSH設定」を選択します。

vccw_image64

エックスサーバー設定

状態を「ON」にして「設定する」をクリックします。

vccw_image65
arrow-down
vccw image66

エックスサーバー設定

「ON」になっているコトを確認します。

vccw_image67

エックスサーバー設定

「公開鍵登録・更新」を選択します。

vccw_image68

エックスサーバー設定

公開鍵に、「id_rsa」の内容を貼り付けて、

「確認画面へ進む」をクリックします。

vccw_image68_2

エックスサーバー設定

内容確認して、「登録する」をクリックします。

vccw_image69
arrow-down

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

vccw_image70

公開鍵のパーミッションを変更する

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

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

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

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

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

vccw_image71
ゆめただのり
ゆめただ

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

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

公開鍵と秘密鍵の設定が終わりました。

本番環境のサーバーとSSHで接続できるか確認しましょう。

Cygwinを起動します。

.sshのフォルダで、接続するためのコマンドを入力します。

「ssh アカウント名@サーバーID.xsrv.jp -p ポート番号」と入力します

Cygwin

$ ssh アカウント名@サーバーID.xsrv.jp -p ポート番号

\実行例です/

vccw_image72

Yes/no/[fingerprint]?と表示されるので、yes」を入力します

登録したパスフレーズを求められるので入力します

パスフェーズはここで説明しています!

エックスサーバー情報

アカウント名:sshのログインアカウントです。サーバー契約時に通知されている情報です。

サーバーID:レンタルサーバーのIDです。サーバー契約時に通知されている情報です。

ポート番号:エックスサーバーのSSH接続用ポート番号は、10022です。

\エックスサーバーのSSH情報はこちらから確認できます/

ゆめただのり
ゆめただ

本番サーバーへの接続が確認できました。

次は、自動でサーバーに接続する準備をしていきましょう!

SSHパスフェーズを登録する

本番サーバーにSSH接続するときに、自動で接続できるように

パスフェーズを登録しておきます。

cygwinで、.sshフォルダに移動し次のコマンドを入力します。

Cygwin

$ eval `ssh-agent`

$ ssh-add id_rsa

登録されている秘密鍵は、このコマンドで確認できます。

Cygwin

$ ssh-add -l

\実行例です!/

vccw_image74

wordmoveの設定

本番の環境と同期をとるために、wordmoveというプログラムを使います。

このwordmoveの設定を行います。

Movefile.ymlを確認する

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

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

vccw_image75

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
Movefile.yml

Movefile.ymlを編集【Production:本番環境設定】

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

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

注意

Vhost:URLの末尾部分には、”/”(スラッシュ)を記述しないこと!

WordPresspass:コメントにもあるように、ルートから絶対パス指定すること。「wp-settings.php」ファイルがあるパスを指定する。

エックスサーバーの場合は、「/home/サーバーID/サイトURL/public_html」になる。パスがわからない場合は、次の方法で確認する。

「public_html」パス確認方法

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

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

・「ls」をキーイン

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

・「pwd」をキーイン

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

vccw_image76

Movefile.ymlを編集【database:本番環境設定】

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

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

wp-config.phpの確認方法

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

ホームディレクトリにある「wp-config.php」を確認します。

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

Movefile.ymlを編集【ssh:ssh設定】

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

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

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

ymlファイル編集時の注意点

Movefile.ymlファイルは、ymlというフォーマット。

ymlファイルはインデントで階層構造を表現するため、インデントの位置に非常に重要。

変更を行った場合はデフォルトの並びを参考にしてインデントを揃えるコト。

インデントとは、行の先頭位置のコト

Movefile.ymlを編集【exclude:同期除外設定】

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

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

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

編集後のMovefile.yml

編集後の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
ゆめただのり
ゆめただ

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

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

wordmoveで本番環境をローカル環境へ

Wordmoveを実行する準備が整いました。

では、実際にwordmoveコマンドを使って、本番サーバーとローカルを同期させてみましょう。

Download1

cygwinのウインドウでvccwのフォルダまで移動しコマンドを実行します。

cygwinは、windowsのドライブへ「/cygdrive/を指定する」ことででアクセスできます。

例えば、C:\project\vccwに移動したい場合は、cygwinウインドウでは、以下のパスになります。

「/cygdrive/c/project/vccw」

cd /cygdrive/c/project/vccw で移動し、以下のコマンドを実行します。

Cygwin

$ cd /cygdrive/c/project/vccw

$ vagrant ssh

$ cd /vagrant

$ wordmove pull -all

【重要】wordmoveコマンドの注意点

wordmove pull -all

pullは、ローカル環境に本番環境を持ってくるコマンドです。(本番→ローカル)※方向に十分気を付けること!

-allはすべて持ってくるオプション。

 サイトの規模にもよりますが、概ね10分程度でファイルの転送は完了します。

 変更部分のみファイルを転送するので、変更部分が少ない場合は短い時間で終了します。

\wordmove 実行結果例/

vccw_image77

VCCWローカル環境の動作を確認する

本番環境のデータがローカル環境にコピーされたか、確認します。

本番環境と同じ内容がローカル環境でも表示されれば成功です!

ローカル環境の確認方法

ブラウザでローカルサイトのURLを指定します。

【例】http://docker-bizsel-u2004

Browsing online

ローカル環境から本番環境へ

ローカル環環境から本番環境へデータをコピーする方法です。

Uploading

注意

ここでは、本番環境へローカル環境のデータをコピーする方法を説明します。

本番環境にデータが書かれますので、実行は十分確認して行ってください。

cygwinのウインドウでvccwのフォルダまで移動しコマンドを実行します。

cygwinは、windowsのドライブが/cygdrive/を指定することででアクセスできます。

例えば、C:\project\vccwに移動したい場合は、cygwinウインドウでは、以下のパスになります。

「/cygdrive/c/project/vccw」

cd /cygdrive/c/project/vccw で移動し、以下のコマンドを実行します。

Cygwin

$ cd /cygdrive/c/project/vccw

$ vagrant ssh

$ cd /vagrant

$ wordmove push -all

【重要】wordmoveコマンドの注意点

wordmove push -all

pushは、ローカル環境から本番環境へデータをコピーします。(ローカル→本番)※方向に十分気を付けること!

-allはすべて持ってくるオプション。

wordmove主要コマンド一覧

コマンド意味
wordmove pull ––allWordPress 全て
wordmove pull –wwp-contentフォルダの配下全て
wordmove pull -tテーマファイル(themeフォルダ以下全て)
wordmove pull -dデータベース(記事データなど)
wordmove pull -pプラグイン
wordmove pull –uuploads(uploadsフォルダ以下全て)
wordmove pull -s –d-s(ドライモード)でデータベースを持ってくる
ドライモードは実際にはデータをやり取りしない試行モード
woedmove -hヘルプ。コマンド一覧使い方が表示される
ゆめただのり
ゆめただ

これであなたも今日から

本番環境とローカル環境の同期が

できるようになります!

-ローカル環境