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.thetechshare.org
wordpress管理者ログインページの表示
例：http://codeforube.thetechshare.org/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