「WordPressの教科書」ローカル環境構築②Vagrantの起動方法&できない時の対処法

Vagrantの起動方法&できない時の対処法 Webデザイン

『ビジネスサイトを作って学ぶWordPressの教科書』の本で最初に行うVirtualBox(バーチャルボックス)とVagrant(ベイグラント)を使ったローカル構築に苦戦した記録②です。Mac使用者かつ同じ本で迷った人がいたら、少しでも参考になれば嬉しいです。

環境構築でつまずいたところ
VirtualBoxのインストールに失敗(前回の記事
Vagrantが起動しない【←この記事で説明】

『ビジネスサイトを作って学ぶWordPressの教科書』はこちら

ワードプレスで本格的な企業サイトを制作できる本で、最初のローカル環境構築を乗り越えれば楽しいですよ。

ビジネスサイトを作って学ぶWordPressの教科書
「ビジネスサイトを作って学ぶ WordPressの教科書 Ver5.X対応版」 ソシム株式会社 発行

免責事項

この記事では、Vagrantが起動しなかった問題を解決できた方法をまとめていますが、使用するパソコンの環境やバージョンによってエラーが異なるため、必ず解決できる内容とは限りません。またこの記事で紹介した対処法により、パソコンに不具合が生じた場合などに責任は負えませんので、自己責任で試してください。またこの記事では「Macで使う場合」の説明です。ご了承ください。

Vagrantで仮想マシンを作成

前回の復習:ターミナルを開いてインストール(バージョン)を確認する

【ターミナルを開く方法】
・デスクトップ画面右上の虫眼鏡のマーク(Spotlight)で「ターミナル」と検索。
・または[移動]→[ユーティリティ]→[ターミナル]を選択。

ターミナルを開いた画面
ターミナルを開いた状態

(2)この画面で$マークの後に「vagrant(半角スペース)−−(ハイフンを2連続)version」と打ち、Enterキーを押します。↓コピペ用にどうぞ。

vagrant --version
Vagrantバージョンの確認画面
Vagrantのバージョンが出てきました

これが出ていればインストールは完了しています。次は仮想マシンの起動です。

Vagrantによる仮想マシンの起動方法

1.ターミナルに「ログイン中のユーザーのデスクトップに新規ディレクトリ(フォルダ)を作成する」というコマンドを入力します。

$ cd /Users/username(=あなたのユーザーネームを入力)/Desktop/
$ mkdir pacificmall

例)もしあなたが「gon」という名前でMacにログインしていたら、
1行目は$の後に cd/Users/gon/Desktop/
と入力します。$のあとは半角スペースです。

cdとは
change directoryの略で、ディレクトリを移動するコマンド。

mkdirとは
makdirectoryの略で、新規ディレクトリを作成するコマンド。

mkdir pacificmallで、「pacificmall」という名前のディレクトリを作成しました。

デスクトップにディレクトリが作成された画像
デスクトップにディレクトリが作成されました

2.作成したpacificmallディレクトリに移動し、Vagrantの初期化を行います。

$ cd pacificmall
$ vagrant init prime-strategy/kusanagi-wp5 --box-version 1.0

init = 初期化する という意味があります。入力し終わるとこのようになります。

ターミナルの画像
cd pacificmall の記述は上の画像では見えなくなり、pacificmallのフォルダに移動している。

自動的に出てくる英文
訳)このディレクトリに Vagrantfile が配置されています。これで最初の仮想環境を vagrant up する準備ができています。以下の項目をお読みください。ドキュメントと同様に、Vagrantfileのコメントも参照してください。Vagrant の使用に関する詳しい情報は vagrantup.com を参照してください。

デスクトップの「pacificmall」ディレクトリの中にVagrantfileができました!

pacificmallの中にあるVagrantfileの画像

3.Vagrantfileを修正します。

Vagrantfileを任意のコードエディタで開き、15行目と16行目に注目。先ほど「vagrant init」で指定したVagrant Boxと使用するバージョンが同じであることを確認します。

使用するバージョンの確認画像
バージョンを確認

コメントアウトされている36行目の#を削除して保存します。

コメントアウトされた画像
画面はVisualStudioCodeです
コメントアウトを削除画像
これで上書き保存します

4. Vagrantの起動コマンドを入力(Mac)

先ほどの続きで、ターミナルに「vagrant up」と入力します。

$ vagrant up

起動に成功した場合も失敗した場合も、ターミナルにメッセージが表示されるはずです。

1.Vagrant起動時のSSLエラー対処法(MacOS:Big Sur)

最初に1台目のPC(MacOS : Big Sur)で起動できなかった時、以下のようなエラーが出ました。

Error: SSL certificate problem: self signed certificate in certificate chain
(訳)エラー:SSL証明書の問題:証明書チェーン内の自己署名証明書

SSL証明書(自己署名証明書)のエラー画像

エラー内容の自己署名証明書とは
:別名「オレオレ証明書」。公的機関のSSL証明書ではなく、自己署名の証明書はなりすましの可能性もあり信頼度が低いため、警告されています。

対処法は、この1行を「pacificmall」ディレクトリ内のVagrantfileに追加することでした。

config.vm.box_download_insecure = true

先ほど確認したバージョンの下に追加してみました。

config.vm.box_download_insecure = trueを追加した画像
バージョンの下に追加した

これでSSLエラーは解決しました。

▼参考にした記事(新規ウインドウで開きます)
https://reject.tokyo/vagrant-error-ssl/ (リジェクト東京)

Vagrantが起動しているかの確認方法

Vagrantが起動しているかを確認するには、ターミナルでvagrant statusと入力します。

$ vagrant status

runnningと表示されれば起動しています。ですが、poweroffと表示されてしまいました。

vagrant poweroff(virtualbox) の画像
起動していない・・・

ターミナルに他のエラー表示が書かれています。IPアドレスのエラーでした。

2.Vagrant起動時のIPアドレスエラー対処法

SSL証明書の問題を解決した1台目のPC(MacOS : Big Sur)と、2台目のPC(MacOS:Mojave)でこのようなエラーが出ました。

IPアドレスのエラーの画像
赤字で書いてあるのがエラー内容

IPアドレスが許可された範囲にないというエラーメッセージ

The IP address configured for the host-only network is not within the
allowed ranges. Please update the address used to be within the allowed
ranges and run the command again.
Address: 192.168.33.10
Ranges: 192.168.56.0/21
Valid ranges can be modified in the /etc/vbox/networks.conf file. For
more information including valid format see:

(訳)
ホスト専用ネットワークに設定されたIPアドレスが、以下の許可された範囲にない。
使用するアドレスが許可された範囲になるように更新してください。
範囲を設定し、再度コマンドを実行してください。
 アドレス 192.168.33.10
 範囲 192.168.56.0/21
有効範囲は、/etc/vbox/networks.conf ファイルで変更することができます。有効範囲については有効なフォーマットなど、詳細はこちらをご覧ください。

書籍で指定されたIPアドレスの部分を、以下のように変更するとうまくいくそうです。

ipアドレス変更前の画像
ipアドレス変更前

「Vagrantfile」の36行目のip: ”192.168.33.10”を”192.168.56.10”に設定します。

config.vm.network "private_network", ip: "192.168.56.10"

こんな感じです。

ipアドレスを092.168.56.10に変更した画像
ipアドレスを変更

保存して、もう一度ターミナルでvagrant upと入力します。

Vagrantの起動に成功した時の画面
エラーメッセージが出ていない

さらに、vagrant statusと入力して起動を確認します。runningと表示されたら成功です。

runnning(virtualbox)の確認
今度はrunnningと書かれている!

これでVagrantでVirtualBoxが起動しました!環境構築ができて一安心ですね。

▼参考にした記事(新規ウインドウで開きます)
VagrantとVirtualBoxでの仮想マシン作成時にpoweroff(virtualbox)と表示されてしまう (teratail)
https://teratail.com/questions/368962
(stackoverflow)

この他、VirtualBoxのインストールが正常にできていない場合もエラーが起こるらしいです。その場合はVirtualboxを一度アンインストール→再インストールしてみるとうまくいくことがあるそうです。

ローカル環境構築ができたら、この本でWordPressの本格的なビジネスサイト制作を勉強しましょう!内容が充実していて、HTMLで作られたサイトをワードプレス化する力がつきます。
また、WordPressで使う関数やプラグイン(自作も含む)をいろいろ使うのでワードプレスの機能をたくさん使えるようになります。
↓PRです。

プロフィール
この記事を書いた人
いまみ&ごん

在宅Webデザイナーになった主婦です。前職は編集系の仕事をしていました。退職後にWebデザインの職業訓練校を経て、Web制作会社でアルバイトを経験。現在は在宅でバナー制作を中心にお仕事をしています。Twitterをフォローしてもらえると喜びます。

いまみ&ごんをフォローする
WebデザインWordPress
いまみ&ごんをフォローする
タイトルとURLをコピーしました