Macの仮想環境でワードプレスを動かす

Macの仮想環境でワードプレスを動かす

■自己紹介
2006年頃からIT業界に興味を持ち始め、独自でプログラミングを勉強し2015年からワードプレスでサイトを構築している能勢です。


すでにインターネットで公開されていて多くのユーザーに利用されているウェブサイトをいきなり変更して失敗したら損失に繋がりますよね。


そこで、ウェブサイトをまずはローカル開発環境に落とし込み、そこで変更・検証をしてからステージング環境へアップロードし、何も問題ないことを確認してから本番環境へ適応する方法をご紹介します。


今回は、Macユーザー向けのローカル開発環境の構築方法とワードプレスをブラウザに表示する方法を解説していきます。


Windowsユーザーの方は手順が異なりますのでご注意ください。

Macの仮想環境でワードプレスを動かす – 事前準備

仮想環境とは、インターネットでは閲覧できないご自分のパソコン上に、仮想のコンピューターを生成することを言います。


仮想ですので、その仮想環境の中で万が一問題などが発生しても、ご自分の実機であるコンピューターには何ら影響を与えません。


ご自分のパソコン上に仮想環境を生成するには、これからご紹介するソフトウェアを利用する必要があります。


これらのソフトウェアをダウンロードしてインストールすることによって仮想環境を生成できますので、一つずつ解説していきます。

VirtualBoxをインストール – 仮想環境を生成

まずはこちらの「VirtualBox」の最新バージョンをダウンロードします。
ダウンロードはこちら⇨VirtualBox

ダウンロードしたファイル名をダブルクリックします。


ファイルが開き、下の画像のような画面が現れます。

１をクリックします。

インストールを進めると上記のような画面が現れます。


「254.9MBの領域が必要です」と、コンピューター上の容量の空きがあるか確認してきます。


結構重たいファイルなので、事前にコンピューターに空きがあることを確認してからインストールを進めます。

ターミナルでインストールを確認

インストールが無事に完了しましたら、きちんとインストールがされているか確認しましょう。


まずMacのターミナルを起動します。


そして下記の通り入力して実行します。

下記のようにバージョンが返ってきたらインストールは成功しています。

仮想環境を作るソフトウェアのインストールが完了したら、今度は開発環境を作るソフトウェアをインストールします。

Vagrantをインストール – 開発環境を生成

次に仮想環境の中で開発環境を生成する手順について解説していきます。


こちらから「Vagrant」の最新バージョンをダウンロードします。
ダウンロードはこちら⇨Vagrant

ファイルがダウンロードされたら、ダブルクリックでファイルを立ち上げます。


すると下の画像のような画面が現れるので、右上にある「vagrant.pkg」をクリックします。

下のようなインストーラーが立ち上がるので、インストールを進めていきます。

「96.5MBの領域が必要です」と、コンピューター上の容量の空きがあるか確認してきます。


こちらも重たいファイルなので、事前にコンピューターに空きがあることを確認してからインストールを進めます。

ターミナルでインストールを確認

Vagrantもインストールが完了したら、ターミナルで確認します。


ターミナルを立ち上げて、下記のコマンドを打ち込みます。

そして下記の結果が返ってきたらインストール成功です。

vagrant-hostsupdaterをインストール – プラグイン

次にIPアドレスとホスト名を自動で接続してくれる便利なプラグインをインストールします。


下記のコマンドをターミナルに打ち込みます。

下記のようなメッセージが表示されればインストール成功です。

念のため、確認してみましょう。


下記のようにターミナルに打ち込みます。

そして下記のようにリストが返ってきたら成功しています。

vccwをインストール – ワードプレスを動かす

仮想環境でワードプレスを動かすには、vccwというソフトウェアをインストールする必要があります。


ただその前に、Macのホームフォルダに新しく開発環境用のフォルダを作成します。


そしてそこにvccwのファイルを入れていきます。


下の画像のように、ホームフォルダ内に新しく開発環境用のフォルダとして「vagrant」を作成し、次に「test.dev」フォルダを作成しておきます。

フォルダの作成が終わったら、次はターミナルで下記のコマンドを実行します。


これをする事で、ワードプレス用の仮想環境のボックスを追加することが出来ます。

そして、vccwをダウンロードします。
ダウンロードはこちらから⇨vccw


これまで、下の画像の1〜4までをやってきました。

ダウンロードしたzipファイルを解凍すると、vccwというフォルダ名の中にそれぞれファイルなどが入っていますので、それを全て上記で作成したフォルダ名「test.dev」の中にコピペします。


具体的には下の画像にあるようなファイルがコピペできたと思います。

site.ymlを作成する

続いて、provisionフォルダの中にある「default.yml」ファイルをコピーして、一つ上のフォルダ、「test.dev」にコピペします。


「.yml」=ヤメルファイルと言われています。


コピペをしたら、ファイル名を変更します。


「default.yml」⇨「site.yml」


そして、ファイルエディターのatomで「site.yml」を開きファイルの中身を変更していきます。


具体的には下記の通り。

18行目と19行目

⬇️

「hostname」はご自分が開発環境で運用するサイト名に変更します。


「ip」については開発環境で、

初めてのサイトの場合は「192.168.33.10」

2番目のサイトの場合は「192.168.33.11」

3番目のサイトの場合は「192.168.33.12」

と、サイトが増えていく毎に、末尾の数字を１ずつ上げて行く必要があります。

33行目

⬇️

開発環境のワードプレスの使用言語を変更します。

上記は英語から日本語に変更しています。

54行目

⬇️

初めてワードプレスを動かす際には必要ありませんが、後ほど本番環境で運営しているワードプレスのサイトをローカル環境にダウンロードする際には、データベース接頭辞は合わせて置く必要があります。


今は特に変更する必要はありませんが、本番環境をダウンロードする際に変更する程度に覚えておいてください。


※以上で説明した行数番号は変更される可能性があるので、適宜確認しながら変更を進めて下さい。


ここまで来たら、いよいよ「vagrant up」を実行します。

Vagrant up

さて、ここからは少しターミナルでコマンド操作をする必要があります。


まずターミナルを立ち上げます。


立ち上げたらまず「ls(エルエス)」と入力します。


すると、下記のようにフォルダ(ディレクトリ)内のファイルやフォルダー一覧が表示されます。


上記手順で作成した「vagrant」のフォルダがあるのを確認しましょう。

確認したら「cd vagrant」というコマンドを打ち込みます。


すると「vagrant」フォルダに移動します。


「vagrant」フォルダ内でも「ls(エルエス)」と入力して実行してみましょう。

すると「test.dev」のフォルダを確認できると思います。


また「cd test.dev」とコマンドを打ち込み「test.dev」フォルダに移動します。」

「test.dev」フォルダに移動したら、「ls(エルエス)」と打ち込んで、フォルダ内にどのようなファイルがあるか確認しましょう。


上記で作成した「site.yml」も確認出来るかと思います。


初回の「Vagrant up」は5〜10分くらいの時間が掛かりますので、気長に待ちましょう。


「Vagrant up」が無事に終わると、先ほどの「test.dev」フォルダの中は下の画像のようにファイルがいくつか追加されていますので、確認しておいてください。

ワードプレスを構成するファイル群はワードプレスフォルダ内に自動で落とし込まれるので、特に自分でワードプレスをインストールする必要などはありません。

Macの仮想環境でワードプレスを動かす – safariで確認

MacでChromのブラウザで確認すると、保護されていない通信という事で閲覧できないので、safariを立ち上げて「test.dev」と打ち込んでみましょう。


下の画像のようにワードプレスの画像が表示されれば成功です。

最後に、ターミナルを終了する前に実行中のVagrantをストップする必要があります。


それには、下記の通りコマンドを打ち込みます。

以上です。

まとめ

如何でしたでしょうか。


とりあえず、ご自分のパソコン上で仮想環境を構築し、ブラウザ上でワードプレスを表示させることに成功したのではないかと思います。


次回は、本番環境からワードプレスをダウンロードして仮想環境で表示させる方法について解説していきます。


ご質問などあるかたは下記のお問い合わせよりご連絡ください。