2018年11月28日
wordpress資料1(ローカル仮想サーバ環境の作成)

0.wordpressでのホームページ作成の全体像

 1.本番環境ではなくローカル環境にて作成を行う理由
 2.ローカル環境に仮想サーバーを構築する
 3.wordpressのテーマを編集し仮想サーバー上でテストする(資料2に記載)
 4.完成したホームページを本サーバーにアップする(資料3に記載)
 5.バージョン管理をする(資料4に記載)






1.本番環境ではなくローカル環境にて作成を行う理由

 自作したサーバ、レンタルサーバ内にてインターネット上に公開しているサイトのファイルを直接編集すると、編集している間もサイトは公開され続けてしまう。一旦非公開にして、編集することも可能だが、その間に見に来る人がいる可能性があるため、サイトは公開したまま編集できる方が良い。ローカル環境に仮想サーバーを作成し、そこのファイルを編集しながら、確認を行うことで、サイトを公開しつつ、編集、テストを行うことが出来る。wordpressにてプラグインの使用やテーマの編集を行わない場合は必ずしも、ローカル環境は必要ではないが、今回はプラグインの使用、テーマの編集を行うため、ローカル環境を構築し、wordpressにてホームページを作成する。






2.ローカル環境に仮想サーバーを構築する



2-1.vccwを用いてwordpress開発環境を作る

vccwとは

vagrant + chefベースのwordpressのプラグイン/テーマ開発環境。VagrantとVirtualBoxをインストールすればコマンド数階で仮想マシンが立ち上がり便利なWordpress開発環境が出来上がる。ダウンロードしたvccwのVagrantを立ち上げるとwordpressがインストールされているOSが仮想サーバーへインストールされる。以前はMAMPの仮想環境を用いて開発をしていたが、IPアドレス設定により複数のサイトを作成する際に、仮想環境を複数作成することが難しかったため、vccwで開発することにした。



参考記事
http://whiskers.nukos.kitchen/2014/09/01/vccw.html



chefとは
Ruby製のシステム構成管理ツールでインフラの構築を自動化できる。

参考記事
http://blog.schoolwith.me/chef-re-introduction/






2-1-1.vccwのダウンロード

vccwホームページよりダウンロードする。

http://vccw.cc/






2-1-2.VirtualBoxとVagrantのインストール

VirtualBoxとは

使用しているPC上に仮想的なPCを作成し、別のOSをインストール・実行できるフリーのPC仮想化ソフト。PC仮想化ソフトはたくさんあるが、WindowsやLinuxなど複数のOSをサポートしているVirtualBoxがおすすめとされている。ただVirtualBoxはグラフィックの描画速度が遅いと評判とされているため、画面表示が遅いと感じたらVMware Playerを試してみても良い。

参考記事
http://jukenki.com/contents/other/virtualbox/about-virtualbox.html


VirtualBoxホームページよりダウンロードし、インストールする

https://www.virtualbox.org/


Vagrantとは

違う環境に移行可能な開発環境を簡単に構築・管理し、配布することができる開発環境作成ツール。「ほんの数行書くだけで開発用の仮想マシンを構築できる。」



参考記事
http://www.atmarkit.co.jp/ait/articles/1307/22/news076.html



Vagrantホームページよりダウンロードし、インストールする

https://www.vagrantup.com/



Vagrantがインストールできたか確認する。コマンドプロンプトにて以下を入力し、以下の出力が出るとインストール完了している。

$vagrant -v

<出力>
Vgrant 2.2.3



参考サイトwindows版
https://qiita.com/ozawan/items/160728f7c6b10c73b97e

参考サイトmac版
https://qiita.com/sudachi808/items/3614fd90f9025973de4b






2-1-3.vccwを開発するフォルダに設置する

適当なフォルダに設置し、vccw-3.18.0をコピーし、適当な名前のフォルダを作成。





2-1-4.Vagrantfileの修正

vccw-3.18.0/provision/default.ymlを修正する。

・hostnameの修正
  前:vccw.test
  後:任意の名前(例.codeforube.vccw)
・IPアドレスの修正
  前:192.168.33.10
  後:192.168.33.11
・言語の修正
  前:lang:en_US
  後:lang:ja






2-1-5.hostsファイルの手動設定

Vagrantfileにて設定したhostname(例.codeforube.vccw)をブラウザのアドレスバーに入力すると、ホームページが見れるように、IPアドレスとhostnameをwindowsに設定する必要がある。

C:\\Windows\systems32\drivers\etc\hostsファイルを開き、以下を追記する。
※ファイルはフォルダ内で編集できないため、デスクトップ上にて編集する。

192.168.33.11 codeforube.vccw





2-1-6.vagrantの立ち上げ

Vagrantfileがあるフォルダで以下のコマンドを実施

$vagrant up


(バグ)vagrant upの処理中にtimeoutになり進まない

→vagrant upを何度か実行するとできる

(バグ)vagrant-hostsupdaterをインストールすると、vagrant upの途中で「C:/WINDOWS/system32/drivers/etc/hosts (Errno::EACCES)」が出て、正常に起動されない。

→vagrant-hostsupdaterをアンインストールし、ipアドレス設定を手動で行う。





2-1-7.仮想サーバにて公開されたホームページの確認

vagrant upが完了したら、default.ymlにて設定したhostnameをブラウザ(IE,Safari,Chrome等)のアドレスバーに入力する。
Wordpressの初期画面が表示されたら正常に起動している。

wordpressトップページの表示
例:http://codeforube.vccw

wordpress管理者ログインページの表示
例:http://codeforube.vccw/wp-login.php


(バグ)wordpressの初期画面にてcssが反映されていない場合

→ipアドレス設定を手動で行うと解決。

(バグ)hostname(例.codeforube.vccw)をアドレスバーに入力すると、「このサイトにアクセスできません」となる。

→ipアドレス設定を手動で行うと解決。





2-1-8.仮想マシンの終了

$vagrant halt





2-2.複数のページを開発できる環境を作る

ここまでで、ローカル環境でwordpressの1つのホームページを開発する環境が出来た。しかしこの方法では、1つのページしか開発することが出来ない。次に複数のホームページを開発するための設定を行う。






2-2-1.vagrant boxの作成

新規ホームページを作る場合、以前作成したvccwフォルダのコピーにてdefault.ymlの値を変更しvagrant upしても、以前設定のIPのままvagrant upしてしまう。ダウンロードした新規のvccwを使って作りなおさなければならない。
「2-1-4.Vagrantfileの修正」の通り、これまで作成したホームページとは異なるhostname、IPアドレスを設定し、「2-1-5.hostsファイルの手動設定」と同じく、hostファイルを手動にて設定し、vagrantにて仮想サーバを起動する。

■vccw-3.18.0/provision/default.ymlを修正する。

・hostnameの修正
  前:vccw.test
  後:任意の名前(例.codeforube2.vccw)
・IPアドレスの修正
  前:192.168.33.10
  後:192.168.33.12
・言語の修正
  前:lang:en_US
  後:lang:ja






■C:\\Windows\systems32\drivers\etc\hostsを修正する。
※ファイルはフォルダ内で編集できないため、デスクトップ上にて編集する。

192.168.33.12 codeforube2.vccw






■vagant設定をパッケージしたいvccwのVagrantfileのあるフォルダ内にて以下のコマンドを実行する。

$vagrant package

http://qiita.com/t_cyrill/items/ef9cb2b615bfb326f79c





2-2-2.vagrant boxの登録

■vccwから複数のvagrant boxを作成するためにvccwのvagrantをpackageしそのboxを適当な名前をつけてvagrant boxに登録する。

$ vagrant box add codeforubevccw(※1) package.box(※2)
※1.listに登録する任意のbox名を記載
※2.vagrant packageにて作成されたbox名

参考資料
http://qiita.com/mochizukikotaro/items/52f4434c3f69c4ba1f54





■boxが登録されたかどうか確認する

boxリストの確認

$vagrant box list





2-2-3.default.ymlファイルの修正

 wp_box名の修正
  前:wp_box: vccw-team/xenial64
  後:wp_box: codeforubevccw.box





2-2-4.起動するか確認

■vagrantを起動する
$vagrant up

■ブラウザで確認する
http://codeforube2.vccw





2-2-5.vagrant boxの削除

vccw初期フォルダにてWebからダウンロードされるboxを削除する。
削除をしていないと、前回のIPアドレス、hostnameのままとなってしまう。

■現在boxリストの確認

$vagrant box list


■boxを削除する
$vagrant box remove vccw-team/xenial64


■削除後のboxリストの確認

$vagrant box list