こんにちは、tatsukiです。
『WordPressのローカル開発環境の構築方法を知りたい！』
このサイトではそんな方に向けて簡単に全手順を紹介します。
今回は『VirtualBox』と『Vagrant』というソフトウェアを使用して、
PCにローカル開発環境を構築する方法を簡単に紹介していきます。
このソフトウェアを使用する事で
一からサーバーを用意して構築の設定をする手間を省き、簡単に開発環境を構築できます。
今回紹介する方法以外にも簡単に構築できる方法を前回紹介しましたのでこちらも
見て自分に合った方を使用してみてください。
合わせて読みたい！
では紹介していきます。
使用するソフトウェアの説明
最初に使用する2つのソフトウェアを簡単に紹介します。
VirtualBoxとは？
VirtualBoxは仮想化Oracle社が提供している、
ホストOS（WindowsやMac）上にゲストOS（Linux）を稼働させる事ができる無料の仮想化ソフトウェアです。
図で表すとこのようなイメージです。
さまざまなゲストOS（今回はLinux）を立ち上げる事ができるので非常に便利という事があげられます
しかしその一方で注意点として、
利用しているPCのメモリを多く利用してしまうという事があげられますので、
そこは注意しなければいけない点です。
より『VirtualBox』について知りたい方は参考になる記事を紹介しますのでこちらをご覧ください。
Vagrantとは？
Vagrantは簡単にいうと、仮想マシンの構成を自動化できるソフトウェアです。
VirtualBoxが持っている機能を操作することで
ボタン操作で行っていた手順をコード化、自動化して開発環境を構築する事ができます。
実際にVagrantが管理できるVirtualBoxの機能は以下の通りです。
- ・仮想マシンの起動
- ・仮想マシンの停止
- ・仮想マシンの設定
- ・仮想マシンの削除
以前はローカルで開発環境を用意する場合は、PHPやMySQLを起動させるなど手間がかかりました。
しかし、Vagrantを導入する事で
実際に本番で稼働するOSから、使用言語の近いバージョンに近い状態でテスト環境の
構築・開発を行えるようになりました。
同じく『Vagrant』について詳しく知りたい方はこちらの記事をどうぞ。
構築手順
では、実際に構築する手順を紹介していきます。
VirtualBoxをインストールする
VirtualBoxをインストールしていきましょう。
こちら、真ん中の『Download VirtualBox 6.1』をクリックします
Macなら『OS X hosts』をクリックしてダウンロード開始です
ダウンロードが完了したら開いて、インストールしていきます
『VirtualBox.pkg』をダブルクリック
こちらは続けるで大丈夫です
そのまま続けるを押していき、『インストール』をクリックします。
インストールが完了したら閉じてしまって大丈夫です。
これでVirtualBoxの準備は終了です。
Vagrantをインストールする
次にVagrantをインストールしていきましょう。
ダウンロードボタンをクリック！どちらでも大丈夫です。
自身のOSのものをダウンロードします。
ダウンロードが完了したら開きましょう
ここからはVirtualBoxと同じ手順です。
Vagrant/pkgをダブルクリックします。
そして、進んでいきインストールをしましょう。
これで準備は完了です
ローカル環境を構築していきましょう。
仮想マシンの作成をする
では、『Vagrant』で仮想マシンを作成していきましょう
Macをお使いの方は
『⌘＋スペース』でSpotlight検索を起動します。
『ターミナル』と検索してターミナルを起動させます。
Windowsをお使いの方は
Windowsボタンを押してスタートメニューの『プログラムとファイルの検索』から
『cmd』と入力すると、cmd.exeまたはコマンドプロンプトが表示されるので、クリック。
ターミナル、コマンドプロンプト上でコマンドを入力する事で仮想マシンを作成していきます。
まずは現在インストールしているVagrantのバージョンを確認してみましょう
『vagrant --version』と入力する事でバージョンが確認できます。
vagrant --version
vagrant 2.2.9
仮想マシンを起動する
Vagrantでは、Vagrant Boxという仮想マシンをテンプレート化したイメージファイルを基に、
仮想マシンの作成が可能です。
まず以下の作業を行います。
usernameはご利用端末のログインユーザー名が該当します。
わからない方は『whoami』というコマンドを入力する事で確認できます。
$cd /Users/username/Desktop/
$mkdir test
$cd test
$vagrant init prime-strategy / kusanagi-wp5 --box-version 1.0
- 作業用ディレクトリへの移動
- ディレクトリの作成
- 作成したtestディレクトリに移動
- Vagrantの初期化
これでDesktop上に『test』というディレクトリが作成されて、
その中を見ると『Vagrantfile』というファイルが入っていれば正しく実行できています。
Vagrantfileを開き
# config.vm.network "private_network", ip:"192.168.33.10"
と書いてある行があると思います。
コメントアウトされているので、行頭の『＃』を消して保存します。
次に、Vagrantを起動させます。
ターミナル、コマンドプロンプトで実行してください
$vagrant up
仮想マシンの生成が始まります
完了すると、自動的に起動するので待ちましょう。（最初は結構時間がかかります）
PCをシャットダウンしたりすると作成したローカル開発環境にアクセスできなくなりますが、その都度『vagrant up』コマンドを実行する事で、開発環境が立ち上がります。
仮想マシンに接続する
接続する前に紹介する仮想マシンについての説明です。
WordPressでの環境というとLAMP環境です。
LAMP（ランプ）は構成するOSとミドルウェアの頭文字です。
Linux（OS）のL、Apache（WEBサーバー）のA、
MySQL（データベース）のM、PHP（サーバーサイドスクリプト言語）のPです。
今回はKUSANAGI for Vagrantを利用します。
これによりLAMP環境と同様にWordPress環境を構築する事ができます。
KUSANAGIはこちらから
KUSANAGIの設定についてはわかりやすい記事を探しましたので、こちらを参考に初期設定をしてみてください。
これで開発環境の構築が終了です。
hosts設定
ブラウザを起動し、アクセスできるようにするためにhosts設定をします。
Macの方は
Finderを開いて、画面上部の『移動』から『フォルダへ移動』をクリックします。
『/private/etc』
と入力して移動をクリック。
そこで『hosts』というファイルを見つけて、そのファイルをデスクトップにドラッグします。
移動させた『hosts』ファイルをお使いのエディターで開き編集します。
そしてデスクトップにあるファイルを元の場所に戻します。
警告画面が出てアクセスできない人は、詳細設定からアクセするをクリックする事で
アクセスできるようになります。
あとは任意のユーザー名などを入れてWordPressのインストールが完了です。
まとめ
お疲れさまでした。
これで、WordPressのローカル開発環境を構築する事ができました。
手順が少し多かったかと思いますが、インストールが終わってしまえば
とは楽に開発ができます。
冒頭にも紹介しましたが、こちらにはより簡単で初心者向けの方法でのローカル開発環境の構築方法を
紹介しているので、見てみてください。
自分にあった環境を構築しましょう。
では、以上になります。