WordPressなどのWebサービスの動作確認のために、ローカル開発環境を構築する手順です。
WindowsやmacOSのどちらでも構築できますが、今回はmacOSで紹介しますので、Windowsで構築する場合は適宜変更しながら作業を行ってください。
今回はゲストOSに、Ubuntuでローカル開発環境を構築します。
他のOSでは、Webサーバなどのインストールするコマンドが今回とは違うので注意してください。
ソフトウェアのインストールと準備
VirtualBoxのインストール
使用しているパソコンに別のOS(ゲストOS)を実行させるために、仮想化ソフトウェアのVirtualBoxをインストールします。
- VirtualBoxのダウンロード(https://www.virtualbox.org/)
- VirtualBoxのインストール
Vagrantのインストール
WindowsにVagrantにインストール
VirtualBoxと同じように、Vagrantの公式サイトでから最新バージョンをダウンロードしてインストールします。
macOSにVagrantのインストール
macOSにインストールする場合、公式サイトからのダウンロードは必要ありません。
代わりに、下記のコマンドを入力してインストールします。
% brew install vagrant
Vagrantのインストールが終わったら、バージョン確認をして正常にインストールされているか確認します。
Vagrantのバージョンを表示するコマンド
% vagrant -v
![Vagrantのバージョン確認](https://naoyoshi.com/wp-content/uploads/2022/12/vagrant-v.png)
Vagrantのバージョンが表示されたら、インストールは正常にできているので完了です。
Vagrantの作業用のディレクトリ作成(準備)
次に、VagrantでゲストOSをインストールするための作業ディレクトリを作ります。
ディレクトリでゲストOS(仮想マシン)の設定など行うので、複数の仮想マシンを作成してローカル開発環境を構築したい場合は、仮想マシンごとにディレクトリを作成して設定すれば、複数のローカル開発環境を構築できます。
ディレクトリ作成のコマンド(vagrant作業用のディレクトリを作成します)
% mkdir vagrant
作業用のディレクトリを作成したら、作業用のディレクトリに移動するために下記のコマンドを入力します。
% cd vagrant
![Vagrant作業用のディレクトリ作成と移動](https://naoyoshi.com/wp-content/uploads/2022/12/vagrant-work-directory-1.png)
手順通りに作業用のディレクトリを作成して移動したら、%の左側にディレクトリ名が表示されています。
OSのイメージをダウンロード
vagrantのBOXを調べて新しそうなバージョンを探してインストールします。
今回は、ubuntu 22.04 LTSを見つけたので、インストールします。
% vagrant init ubuntu/focal64
![Vagrantのイメージをダウンロードと初期化](https://naoyoshi.com/wp-content/uploads/2022/12/vagrant-init.png)
イメージのダウンロードは、あまり時間がかかりませんが少し待ちます。
Vagrantfileの編集
OSのイメージをダウンロードしたまま起動させたら、ゲストOSはネットにアクセスできますが、PCのブラウザなど外部からゲストOSにアクセスできません。
設定ファイルのVagrantfileを編集してブラウザからアクセスできるようにします。
Vagrantfileを下記のように、2ヶ所#マークを外しコメントアウトして、設定を変更させます。
# config.vm.network "forwarded_port", guest: 80, host: 8080, host_ip: "127.0.0.1"
↓
config.vm.network "forwarded_port", guest: 80, host: 8080, host_ip: "127.0.0.1"
# config.vm.network "private_network", ip: "192.168.33.10"
↓
config.vm.network "private_network", ip: "192.168.33.10"
![Vagrantfileの編集](https://naoyoshi.com/wp-content/uploads/2022/12/vagrantfile-edit.png)
Vagrantfileの編集は、Windowsだとメモ帳、macOSではvimを利用して編集しても良いですし、テキストエディットを使って編集します。
赤枠の行の頭にある「#」削除して保存したら、編集は完了です。
ゲストOSの初期起動
VirtualBoxの仮想マシンが起動してない状態で下記のコマンドを入力して起動させます。
コマンドは、Vagrantfileがあるディレクトリで実行させます。
% vagrant up --provision
![Vagrantで仮想マシン(ubuntu)をインストール](https://naoyoshi.com/wp-content/uploads/2022/12/vagrant-up-provision.png)
エラー表示されず正常に起動できたら、OSのインストールされて起動します。
次回からOSの起動は、下記のコマンドで起動します。
% vagrant up
![Vagrantで仮想マシンを起動する](https://naoyoshi.com/wp-content/uploads/2022/12/vagrant-up-1.png)
シャットダウンするには、下記のコマンドを入力します。
% vagrant halt
![Vagrantシャットダウン](https://naoyoshi.com/wp-content/uploads/2022/12/vagrant-halt.png)
仮想マシンがシャットダウンしたら、コマンドを入力できる状態になります。
ゲストOS(Ubuntu)の設定
ゲストOSのインストールが完了したら、WEBサーバやデータベースサーバ、phpなどをインストールして、ローカル開発環境を構築します。
sshでログイン
コマンドを入力してsshでログインします。
% vagrant ssh
![Vagrant sshにログイン](https://naoyoshi.com/wp-content/uploads/2022/12/vagrant-ssh.png)
SSHでログインすると、下記の画面になります。
パッケージのアップデート
ゲストOS(ubuntu)をインストールした状態は、少しファイルが古い場合があるので、アップデートします。
アップデートすると、最新の状態になり、WEBサーバなどが最新の状態でインストールできます。
アップデートするには、sshでログインした状態で下記のコマンドを入力します。
最初に更新があるが最新のバージョンに一覧をアップデートします。
$ sudo apt update
アップデートを実行したら、処理に少し時間がかかります。
処理が終わったら、コマンドが入力できる状態になるので、次の処理を行います。
![ubuntuのアップデート](https://naoyoshi.com/wp-content/uploads/2022/12/apt-update.png)
次に最新の一覧の状態にパッケージを更新します。
$ sudo apt upgrade
アップグレードのコマンドを実行して、アップグレードするものがある場合、処理を続けるか確認があるので、続ける場合はYキーを押してエンターキーを押して処理を続けます。
$ sudo apt -y upgrade
オプションで -yを付加すると途中でY/nが表示されず最後まで実行されます。
![ubuntuのパッケージをアップグレード時に続ける](https://naoyoshi.com/wp-content/uploads/2022/12/apt-upgrade-continue.png)
処理を続けたら、更新するパッケージの量で処理時間が分かりますが、処理が終わるまで待ちます。
![ubuntuのアップグレード](https://naoyoshi.com/wp-content/uploads/2022/12/apt-upgrade.png)
コマンドが入力できる状態になったら、アップグレードが完了です。
NTPサーバのインストール
これから、インストールするファイルやデータなどの時間が正確な時間になるように、NTPサーバをインストールして時間を合わせます。
$ sudo apt -y install ntp
![ubuntuのNTPをインストール](https://naoyoshi.com/wp-content/uploads/2022/12/ubuntu-ntp-install.png)
NTPサーバが動作しているか確認するために下記のコマンドを入力します。
$ ntpq -p
![ubuntuのNTP動作確認](https://naoyoshi.com/wp-content/uploads/2022/12/ubuntu-ntpq-p.png)
NTPサーバのタイムゾーンを変更
NTPサーバをインストールしたままの状態は、タイムゾーンが日本ではないので、下記のコマンドでタイムゾーンを日本に変更します。
$ sudo timedatectl set-timezone Asia/Tokyo
コマンドを入力しても、何もメッセージが表示されませんが更新されます。
NTPサーバの再起動
タイムゾーンを変更したら、下記のコマンドを入力して、NTPサーバを再起動します。
$ sudo systemctl restart ntp
再起動のコマンド入力しても、何もメッセージは表示されません。
以上で、NTPサーバのインストールは完了です。
Webサーバ(apache)のインストール
OSに、Webサーバ(apache)をインストールします。
下記のコマンドを入力してWebサーバのインストールを実行させます。
$ sudo apt -y install apache2
![ubuntuにapache2をインストール](https://naoyoshi.com/wp-content/uploads/2022/12/ubuntu-apache2-install.png)
エラー表示されずに終了したら、Webサーバのインストールは完了です、
次に、WebサーバがOSの起動時と同時に起動するように設定します。
下記のコマンドで、OSの起動と同時にWebサーバが自動起動できます。
$ sudo systemctl enable apache2
![ubuntuのapache2を自動起動する](https://naoyoshi.com/wp-content/uploads/2022/12/ubuntu-apache2-systemctl-enable.png)
Webサーバ(apache)を起動
Webサーバを起動させるコマンドです。
$ sudo systemctl start apache2
Webサーバの設定を変更したり場合などに、再起動させるコマンドです。
コマンドの、「start」を「restart」に変更すれば再起動コマンドになります。
$ sudo systemctl restart apache2
Webサーバの起動や再起動のコマンドを実行させても、メッセージは何も表示されません。
![ubuntuでapache2の起動コマンド](https://naoyoshi.com/wp-content/uploads/2022/12/ubuntu-apache2-start.png)
これで、Webサーバのインストールを終了です。
ブラウザで、http://192.168.33.10/ にアクセスしたら、Webページを見ることができます。
![ubuntuのapache2にアクセス](https://naoyoshi.com/wp-content/uploads/2022/12/apache2-access.png)
![](https://naoyoshi.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
PHPのインストール
WordPressなどが動作するように、PHPをインストールします。
$ sudo apt -y install php
![ubuntuにphpをインストール](https://naoyoshi.com/wp-content/uploads/2022/12/ubuntu-php-install.png)
関連するPHPのパッケージをインストール
PHP本体のインストールが終わったら、DBにアクセスするパッケージなど、WordPressに必要と思う関連するPHPのパッケージをインストールします。
$ sudo apt -y install php-fpm libapache2-mod-php7.4 php-common php-mbstring php-xmlrpc php-gd php-xml php-mysql php-zip php-curl php-imagick php-cli
PHPは、インストールが完了したら、PHPは使える状態になっています。
![ubuntuにPHPの関連パッケージをインストール](https://naoyoshi.com/wp-content/uploads/2022/12/ubuntu-php-package-install.png)
PHP動作の確認
PHPが正常にインストールされているか確認するには、インストールされているPHPのバージョンをコマンドを入力して確認してみましょう。
$ php -v
上記のコマンドで、PHPのバージョンが表示されたら、PHPのインストールは正常動作できる状態になっています。
![phpのバージョン確認コマンド](https://naoyoshi.com/wp-content/uploads/2022/12/php-v.png)
DBサーバ(MariaBD)のインストール
データベースを使えるようにするため、DB(データベース)サーバをインストールします。
MariaBDは、MySQLの派生として開発されているDBサーバソフトウェアでコマンドなど、互換があるので今回は利用します。
下記のコマンドで、MariaBDをインストールすることができます。
$ sudo apt-get -y install mariadb-server
![ubuntuのMariaDBをインストール](https://naoyoshi.com/wp-content/uploads/2022/12/ubuntu-mriadb-install.png)
DBサーバのバージョンを確認
インストールが正常に完了したか確認するために、コマンドを入力してバージョンを確認します。
$ mariadb --version
![MariaDBのバージョン確認](https://naoyoshi.com/wp-content/uploads/2022/12/mariadb-version.png)
rootのパスワードを設定
インストールしたDBサーバを操作するために管理者(root)のパスワードを設定します。
下記のコマンドでは、パスワードを「0000」で設定します。
$ sudo mysql -u root -e "SET PASSWORD = PASSWORD('0000');FLUSH PRIVILEGES;"
rootのパスワードを正常に登録できたら、何もメッセージは表示されません。
![MariaDBのrootにパスワードをセットするコマンド](https://naoyoshi.com/wp-content/uploads/2022/12/mariadb-root-password-set.png)
DBサーバにログイン
パスワードは、正常に登録されたか確認するために、DBサーバにログインしてみます。
下記のコマンドを入力して、パスワードを求められるので「0000」を入力したらログインできます。
$ mysql -u root -p
![MariaDBのログインコマンド](https://naoyoshi.com/wp-content/uploads/2022/12/mariadb-login.png)
MariaDBにログインして、ログアウトするには「exit」と入力してエンターキーを押すとMariaDBからログアウトできます。
OS起動時にDBサーバが自動起動する設定
下記のコマンドを入力して、OS起動時にDBサーバが自動起動するようにします。
$ sudo systemctl enable mariadb
自動起動のコマンドで設定しても何もメッセージは表示されません。
phpMyAdminインストール
DBサーバを操作するために、phpMyAdminをインストールします。
phpMyAdminをインストールするディレクトリに移動
phpMyAdminをインストールするディレクトリに移動して作業をします。
下記のコマンドを入力して、インストールするディレクトリに移動します。
$ cd /var/www/html
/var/www/html は、Webサーバをインストールした状態の公開されるディレクトリです。/var/www/html に保存されたhtmlやjpgなどは表示されます。
![apache2のドキュメントルートに移動](https://naoyoshi.com/wp-content/uploads/2022/12/apache2-document-root.png)
phpMyAdminをダウンロード
最新のphpMyAdminを公式サイトで確認してダウンロードします。
zip形式のファイルは、ゲストOSをインストールしたままでは、解凍できないので、tar.gz形式のファイルをダウンロードします。
下記のコマンドは、コマンドでバージョン5.2.0のtar.gzをダウンロードするコードです。
$ sudo wget https://files.phpmyadmin.net/phpMyAdmin/5.2.0/phpMyAdmin-5.2.0-all-languages.tar.gz
![phpMyAdminをダウンロード](https://naoyoshi.com/wp-content/uploads/2022/12/phpmyadmin-download.png)
ダウンロードしたphpMyAdminを解凍
ダウンロードしたphpMyAdminを解凍して使える状態にします。
$ sudo tar xvfz phpMyAdmin-5.2.0-all-languages.tar.gz
![ダウンロードしたphpMyAdminを解凍](https://naoyoshi.com/wp-content/uploads/2022/12/phpmyadmin-unzip.png)
解凍したフォルダのリネーム
解凍したファイルは、「phpMyAdmin-5.2.0-all-languages」と長いディレクトリなので、簡単にアクセスできるように「phpmyadmin」とディレクトリの名前を変更(リネーム)します。
下記のコマンドで、ディレクトリ「phpMyAdmin-5.2.0-all-languages」を「phpmyadmin」に変更します。
$ sudo mv phpMyAdmin-5.2.0-all-languages phpmyadmin
リネームしても何もメッセージは表示されません。
ダウンロードしたphpMyAdminを削除
ダウンロードしたphpMyAdminのファイルを削除するコマンドです。
削除しなくても大丈夫ですが、今後使うことないので削除することを、おすすめします。
$ sudo rm -rf phpMyAdmin-5.2.0-all-languages.tar.gz
ダウンロードしたphpMyAdminのファイルを削除しても、何もメッセージは表示されません。
phpMyAdminへアクセス
パソコンのブラウザで、http://192.168.33.10/phpmyadmin/ で、phpmyadminにアクセスします。
もし、なにも表示されないときは、Webサーバを再起動してアクセスします。
下記のコマンドで、Webサーバを再起動します。
$ sudo systemctl restart apache2
![phpMyAdminのログイン](https://naoyoshi.com/wp-content/uploads/2022/12/phpMyAdmin-login.png)
phpmyadminのログイン画面が表示されたら、DBサーバで設定した管理者でログインします。
ユーザ名:root
パスワード:0000
![phpMyAdmin メイン画面](https://naoyoshi.com/wp-content/uploads/2022/12/phpMyAdmin-main.png)
phpMyAdminの警告対処
phpmyadminのログインできたら、画面の下部に警告が表示されているので対処します。
![phpMyAdmin初期の警告メッセージ](https://naoyoshi.com/wp-content/uploads/2022/12/phpMyAdmin-warning-message.png)
phpmyadminのディレクトリに移動します。
$ cd /var/www/html/phpmyadmin
年のために、元のファイルをコピーしてバックアップします。
$ sudo cp config.sample.inc.php config.inc.php
![phpMyAdmin設定準備](https://naoyoshi.com/wp-content/uploads/2022/12/phpmyadmin-setting-setup.png)
“blowfish_secret”に値を設定
設定ファイルに、暗号化 (blowfish_secret) 用の非公開パスフレーズの設定を必要とするようになりました。と警告が表示されているので、blowfish_secretに値を設定します。
下記のコマンドで、blowfish_secretに適当に文字列を設定して保存します。
$ sudo vim config.inc.php
![php configの初期状態](https://naoyoshi.com/wp-content/uploads/2022/12/php-config-org.png)
初期状態では、blowfish_secretは、空白で設定されているので何かしら文字列を入力して設定します。
32文字入力するようにコメントが書いてあるので、適当な文字列を入力します。
![php configの編集](https://naoyoshi.com/wp-content/uploads/2022/12/phpmyadmin-config-edit.png)
今回は、「12345678901234567890123456789012」と設定しました。
vimの使い方は別途紹介します。
config.inc.phpを編集して、phpMyAdminにアクセスするとログイン画面に切り変わるので再度ログインすると、「設定ファイルに、暗号化 (blowfish_secret) 用の非公開パスフレーズの設定を必要とするようになりました。」のメッセージが消えています。
もし、文字数が足りないときは、警告メッセージが表示されます。
ディレクトリ phpmyadminのディレクトリの所有者やグループを変更
$cfg[‘TempDir’] (/var/www/html/phpmyadmin/tmp/) にアクセスできません。phpMyAdmin はテンプレートをキャッシュすることができないため、低速になります。と表示されている警告の対処をします。
lsコマンドで最初の状態を確認します。
![phpMyAdminのドキュメントのアクセス権確認](https://naoyoshi.com/wp-content/uploads/2022/12/phpmyadmiin-permission.png)
$ sudo chown www-data:www-data /var/www/html/phpmyadmin -R
ディレクトリの所有者やグループを上記のコマンドを入力して変更します。
![phpMyAdminのドキュメントの所有者とグループ変更](https://naoyoshi.com/wp-content/uploads/2022/12/phpmyadmiin-permission-edit.png)
コマンドを入力して、ディレクトリの所有者やグループを変更しました。
これで、phpMyAdminの警告が消えました。
![phpMyAdminの警告が消えた](https://naoyoshi.com/wp-content/uploads/2022/12/phpMyAdmin-main-edit.png)
FTPクライアントからのゲストOSへのアクセス方法
最後にゲストOSのubuntuに、FTPクライアントからアクセスする方法を紹介します。
今回、解説した手順で、ローカル開発環境を構築した場合の設定です。
無料で使えるFTPクライアントの、FileZilaの設定方法を紹介しますので、使ってるFTPクライアントに合わせて設定してください。
FileZilaの設定方法
![VagrantへアクセスするFTPの設定](https://naoyoshi.com/wp-content/uploads/2022/12/vagrant-filezila-setting.png)
FTPでアクセスする設定内容
プロトコル:SFTP
ホスト:127.0.0.1
ポート:2222
ログオンタイプ:鍵タイプ
ユーザ名:vagrant
鍵ファイル:/Users/(ユーザ名)/vagrant/.vagrant/machines/default/virtualbox/private_key
※鍵ファイルのユーザ名は、ログインしてるユーザ名を入力してください。
ゲストOSの削除手順
ゲストOSを使わなくなったときや、ゲストOSのインストールに失敗して最初からやり直したいとき、パソコンの容量不足などでゲストOSを削除したいときの手順を紹介します。
作業用のvagrantディレクトリを削除
作業用で使っているvagrantのディレクトリを削除します。
これで、vagrantの設定ファイルなどが削除できます。
VirtualBoxで仮想マシンを削除
VirtualBoxで実行している仮想マシンを削除します。
- vagrantでゲストOSをシャットダウンしてから操作してください。
- VirtualBoxを起動して画面左側にあるゲストOSの上で右クリックして除去を選びます。
- メッセージが表示されてすべてのファイルを削除ボタンをクリックします。
- 左側の画面から仮想マシンが消えたら削除完了です。
![VirtualBox マネージャー](https://naoyoshi.com/wp-content/uploads/2022/12/VirtualBox-manager.png)
VirtualBoxを起動したら、VirtualBoxマネージャーが表示されます。
画面の左側に作成した仮想マシンが表示されています。
![VirtualBox 仮想マシンを右クリック](https://naoyoshi.com/wp-content/uploads/2022/12/VirtualBox-manager-vm-detail.png)
仮想マシンを右クリックするとメニューが表示されます。
仮想マシンを削除するには、除去をクリックします。
![VirtualBox 仮想マシンを削除](https://naoyoshi.com/wp-content/uploads/2022/12/VirtualBox-manager-vm-delete.png)
除去をクリックすると、メッセージが表示されます。
すべてのファイルを削除をクリックすると、仮想マシンが削除され実データも削除されます。
除去のみをクリックすると、仮想マシンは削除されますが、実データは削除されないのでパソコンの残容量は増えません。
まとめ
以上で、VirtualBox + Vagrantを使ってローカル開発環境を構築することができます。
macosでは、ターミナルにコマンドを入力して、ローカル開発環境を起動できるようになるので簡単にテスト環境が作れます。
また、ubuntuはLinuxなのでネットワークコマンドが使えるので、Windowsでは使えないコマンドを使えて便利です。
今回構築したローカル開発環境にWordPressをインストールするには、こちらの記事を参考にしてください。