ひとりアドベントカレンダー3日目です。Reoです。
先日、久々にうるおいらんどの改修をしようと思ったところ、VVV のバージョンが変わり、結構導入手順が変わってしまっていることに気がつきました。
かなり前に書いた記事「VVV+WordMoveでWordPressのローカル環境を構築するぞッ！【Xserver】」の情報が古くなってしまったので、改めて書き直しをしようと思います。
このVVVの記事は、このブログで一番何度も読んだ記事です。WordPress をローカル環境で動かしたいときにいつも読んでいました。
WordMove については今回触れません。本番環境とｺﾞﾆｮｺﾞﾆｮしたい人は上記の記事を参考にしてください。
書いていたら、かなりはじめてのWordPress感が出てきました。初めてのWordPress、ローカル環境からはじめませんか？
環境
- Mac OS 10.14.6
- Vagrant 2.2.6
- VirtualBox 6.0.14
- VVV 3.2.0
まだ Mojave でやってます... Catalina にするとAdobeソフト の CS6が死ぬんだってのが怖くてあげてないです...
Vagrant と VirtualBox を導入
vagrant を導入します。
ターミナルで
brew cask install vagrant
brew cask install virtualboxbrew がないよ cask がないよという場合は Homebrew を導入しましょう。
以下をターミナルに打ち込んで導入してから上記を実行しましょう。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
VVVを導入
VVV(Varying-Vagrant-Vagrants)を導入します。WordPressサイトを構築してくれるやつです。
vagrantディレクトリを作ってから GitHub よりリポジトリをクローンします。
mkdir vagrant && cd vagrant
git clone https://github.com/Varying-Vagrant-Vagrants/VVV.git
cd VVVこれで ls をして中身がこうなってたらおｋです。
vagrant up で起動
起動しましょう。
vagrant upInstall local plugins には Y をしましょう。vagrant-hostsupdater という、127.0.0.1 とかではなく hogehoge.test で接続できるやつがインストールされます。
それが終わったらもう一度
vagrant upをします。結構時間がかかります。お茶でも飲んでﾏﾀ-ﾘ ( ´ー｀)y-~~しましょう。
終わったら vvv.test に接続してみましょう。
失敗したら...
今ちょっと環境を作ったことがない Mac で試しながら書いているんですが、なんかエラーが出ました。
There was an error while executing `VBoxManage`, a CLI used by Vagrant for controlling VirtualBox. The command and stderr is shown below.
Command: ["hostonlyif", "create"]
Stderr: 0%... Progress state: NS_ERROR_FAILURE VBoxManage: error: Failed to create the host-only adapter VBoxManage: error: VBoxNetAdpCtl: Error while adding new interface: failed to open /dev/vboxnetctl: No such file or directory VBoxManage: error: Details: code NS_ERROR_FAILURE (0x80004005), component HostNetworkInterfaceWrap, interface IHostNetworkInterface VBoxManage: error: Context: "RTEXITCODE handleCreate(HandlerArg *)" at line 94 of file VBoxManageHostonly.cpp
こんなやつ。
こうなった場合、VirtualBox を入れるのに失敗してますね...。
もし、brew cask install virtualbox をした後に、許可がないよとかで設定のセキュリティとプライバシーであとから許可をしていた場合は失敗しているかもしれません。（私は今回それでした。）
許可をしてから、再度
brew cask install virtualboxを実行して、その後にもう一度
vagrant upをしてみてください。 
可愛いクマさんに会えましたか？（クマじゃなかったらどうしよう）
vvv.test を開いてみましょう。
この画面がひらけたらおｋです。
config.yml を作成しよう
さて、ここからが VVV 3.2 からの変更点になります。
config.yml を作ることは同じなんですが、ファイルの場所が以前とは変わりました。
既に VVV 3.2 より前のバージョンを使っている場合は、git pull origin master で最新の VVV を落としてくるだけで自動でマイグレーションしてくれるはずです。
cp config/default-config.yml config/config.ymlconfig.yml を編集していきます。普通にエディタで開いた方が楽です。
vi config/config.yml // もしくは適当なエディタで開く vvv-test:
skip_provisioning: false
description: "WordPress and VVV test!"
repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
hosts:
- vvv-test.test
wordpress-one 等を書き換える形で大丈夫です。もしくはコピペして貼り付けましょう。インデントがおかしいと失敗するので気をつけてください。
config.yml を編集をした後は保存して
vagrant reload --provisionをしましょう。
config.yml の中身の説明
ドキュメントを見てください！！！！
https://varyingvagrantvagrants.org/docs/en-US/config/
丸投げだとちょっとアレなので。
sites: の後に追加したいサイトの設定を書いていきます。wordpress-default を見ていきましょう。
まず wordpress-default がサイト名になります。フォルダ等の名前になります。
repo
このリポジトリを元にしたサイトが構築されます。
https://github.com/Varying-Vagrant-Vagrants/custom-site-template を覗いてみてください。
最初はこのまま設定しておきましょう！
古いバージョンから使っていて、vv を用いてサイトを構築した等の場合は、必要ないです。
vm_dir / local_dir
VirtualBox内とローカルでのパスを書きます。 書かなくても自動で作成されます。
branch
repo を使うときにどの branch から取得するかを決めます。
skip_provisioning
いくつかのサイトを構築した場合、もし使用してないやつがあれば false にしておきましょう。true のもののみ provisioning されます。
また使うときになったら true にしましょう。
allow_customfile
難しいことが書いてありました。provisioning中にRubyを使用する場合等に使うらしいです。false もしくは書かなくておｋです。
nginx_upstream
PHPのversionを指定できます。 php72 等で設定できます。
hosts
ドメインとホストを定義します。サイト名.test がオススメです。
理由についてはhttps://varyingvagrantvagrants.org/docs/en-US/troubleshooting/dev-tld/を参照してください。
雑ですが適当にこんなかんじです。
で、結局のところ何を書けば構築できるかというと、さっきの
vvv-test:
skip_provisioning: false
description: "WordPress and VVV test!"
repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
hosts:
- vvv-test.test
だけ書いておけばとりあえず大丈夫です。
vagrant reload --provision が無事完了していれば、先ほど作ったホスト名（今回はvvv-test.test)にブラウザでアクセスしてWordPressのサイトが見れればおｋです！
やったぜ。
もしこんな画面が出たら...
こういうのが出たら、失敗しています。
管理画面に接続してみよう
さてさて、これでWordPressのローカル環境が構築されました。
管理画面は、先ほどの例だと、vvv-test.test/wp-admin でログイン画面に移動します。
ユーザ名は admin, パスワードは password に設定されています。
テーマを追加してみよう
あとはもう好きなように作るだけ！になります。
最後にテーマを配置するところまでやってみようと思います。
VVV では、VVV/www/サイト名(vvv-test)/public_html/wp-content/themes/ にテーマを設置します。
適当に sample フォルダを作ってその中に、index.php と style.css を配置しましょう。
index.php の中身はとりあえず空で大丈夫です。確認用に好きな文字でもいれておいてください。
style.css の中に
@charset "UTF-8";
/*
Theme Name: Sample
Description: サンプルです。
*/適当にテーマの名前を書いて保存しましょう。
そして管理画面から、外観 > テーマ (英語なら Appearance > Theme）で 先ほど作った Sample ができていれば有効化しましょう。
これで、テーマを作る準備ができました。
おわりに
この方法を使えば、サーバーを用意してなくても WordPress を試すことができます。
WordMove を組み合わせて、ローカル環境をコマンド一つで本番環境に反映させることもできます。本番環境から持ってくることもできます。 WordMove については、昔の記事の方「VVV+WordMoveでWordPressのローカル環境を構築するぞッ！【Xserver】」を参照してください。
WordMove を使わなくても、FTP等 でやる場合でもローカルで作っておいて損はないと思います。
WordPress のテーマを作ってみたい、プラグインを作ってみたい、そういう方は是非是非導入してみてください！
VVV3.2 になって、以前までサイト構築に利用していた vv を使わなくて良くなりました。逆に vv を使うと失敗してハマってしまう場合があります。（なんもドキュメント読んでなくて結構ハマった）
ドキュメントがしっかりしてますので、そちらもご確認ください！
https://varyingvagrantvagrants.org/
それではでは、良い WordPress ライフを！
アドベントカレンダー3日目にしてクソ長記事を書いてしまった...毎日3000字以上とか死ぬのでは...今日なんて5000字超えてしまったんだけど...
明日はちょっと楽するかもしれません。いや、頑張ります。 あと、prism.js がちょっと調子悪くて2行じゃないと反映してくれないのでそのうち直しますorz
参考リンク
Additional Notes追記
あまりにもキレイな3日坊主で感動した。
コメントはありません。
現在コメントフォームは工事中です。