ひとりアドベントカレンダー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 virtualbox
brew がないよ 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 をして中身がこうなってたらおkです。
vagrant up で起動
起動しましょう。
vagrant up
Install 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 を開いてみましょう。
この画面がひらけたらおkです。
config.yml を作成しよう
さて、ここからが VVV 3.2 からの変更点になります。
config.yml を作ることは同じなんですが、ファイルの場所が以前とは変わりました。
既に VVV 3.2 より前のバージョンを使っている場合は、git pull origin master で最新の VVV を落としてくるだけで自動でマイグレーションしてくれるはずです。
VVV/config/default-config.yml をコピーして、config.yml を作成します。
cp config/default-config.yml config/config.yml
config.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 もしくは書かなくておkです。
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のサイトが見れればおkです!
やったぜ。
もしこんな画面が出たら…
こういうのが出たら、失敗しています。
repoにhttps://github.com/Varying-Vagrant-Vagrants/custom-site-template.gitを設定してみる、インデントを確認する等をしてやり直してみてください。
管理画面に接続してみよう
さてさて、これで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
コメント時の注意
「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。