WordPress

Ubuntuを使ったローカル開発環境構築の手順(VirtualBox + Vagrant)

2022-12-01

ローカル開発環境構築の手順(VirtualBox + Vagrant)

WordPressなどのWebサービスの動作確認のために、ローカル開発環境を構築する手順です。

WindowsやmacOSのどちらでも構築できますが、今回はmacOSで紹介しますので、Windowsで構築する場合は適宜変更しながら作業を行ってください。

今回はゲストOSに、Ubuntuでローカル開発環境を構築します。
他のOSでは、Webサーバなどのインストールするコマンドが今回とは違うので注意してください。

目次 非表示

ソフトウェアのインストールと準備

VirtualBoxのインストール

使用しているパソコンに別のOS(ゲストOS)を実行させるために、仮想化ソフトウェアのVirtualBoxをインストールします。

  1. VirtualBoxのダウンロード(https://www.virtualbox.org/
  2. VirtualBoxのインストール

Vagrantのインストール

WindowsにVagrantにインストール

VirtualBoxと同じように、Vagrantの公式サイトでから最新バージョンをダウンロードしてインストールします。

macOSにVagrantのインストール

macOSにインストールする場合、公式サイトからのダウンロードは必要ありません。

代わりに、下記のコマンドを入力してインストールします。

% brew install vagrant

Vagrantのインストールが終わったら、バージョン確認をして正常にインストールされているか確認します。

Vagrantのバージョンを表示するコマンド

% vagrant -v
Vagrantのバージョン確認

Vagrantのバージョンが表示されたら、インストールは正常にできているので完了です。

Vagrantの作業用のディレクトリ作成(準備)

次に、VagrantでゲストOSをインストールするための作業ディレクトリを作ります。

ディレクトリでゲストOS(仮想マシン)の設定など行うので、複数の仮想マシンを作成してローカル開発環境を構築したい場合は、仮想マシンごとにディレクトリを作成して設定すれば、複数のローカル開発環境を構築できます。

ディレクトリ作成のコマンド(vagrant作業用のディレクトリを作成します)

% mkdir vagrant

作業用のディレクトリを作成したら、作業用のディレクトリに移動するために下記のコマンドを入力します。

% cd vagrant
Vagrant作業用のディレクトリ作成と移動

手順通りに作業用のディレクトリを作成して移動したら、%の左側にディレクトリ名が表示されています。

OSのイメージをダウンロード

vagrantのBOXを調べて新しそうなバージョンを探してインストールします。

今回は、ubuntu 22.04 LTSを見つけたので、インストールします。

% vagrant init ubuntu/focal64
Vagrantのイメージをダウンロードと初期化

イメージのダウンロードは、あまり時間がかかりませんが少し待ちます。

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の編集

Vagrantfileの編集は、Windowsだとメモ帳、macOSではvimを利用して編集しても良いですし、テキストエディットを使って編集します。

赤枠の行の頭にある「#」削除して保存したら、編集は完了です。

ゲストOSの初期起動

VirtualBoxの仮想マシンが起動してない状態で下記のコマンドを入力して起動させます。

コマンドは、Vagrantfileがあるディレクトリで実行させます。

% vagrant up --provision
Vagrantで仮想マシン(ubuntu)をインストール

エラー表示されず正常に起動できたら、OSのインストールされて起動します。

次回からOSの起動は、下記のコマンドで起動します。

% vagrant up
Vagrantで仮想マシンを起動する

シャットダウンするには、下記のコマンドを入力します。

% vagrant halt
Vagrantシャットダウン

仮想マシンがシャットダウンしたら、コマンドを入力できる状態になります。

著:Mitchell Hashimoto, 翻訳:Sky株式会社 玉川 竜司
\タイムセール祭り最終日!/
Amazon

ゲストOS(Ubuntu)の設定

ゲストOSのインストールが完了したら、WEBサーバやデータベースサーバ、phpなどをインストールして、ローカル開発環境を構築します。

sshでログイン

コマンドを入力してsshでログインします。

% vagrant ssh
Vagrant sshにログイン

SSHでログインすると、下記の画面になります。

パッケージのアップデート

ゲストOS(ubuntu)をインストールした状態は、少しファイルが古い場合があるので、アップデートします。

アップデートすると、最新の状態になり、WEBサーバなどが最新の状態でインストールできます。

アップデートするには、sshでログインした状態で下記のコマンドを入力します。

最初に更新があるが最新のバージョンに一覧をアップデートします。

$ sudo apt update

アップデートを実行したら、処理に少し時間がかかります。

処理が終わったら、コマンドが入力できる状態になるので、次の処理を行います。

ubuntuのアップデート

次に最新の一覧の状態にパッケージを更新します。

$ sudo apt upgrade

アップグレードのコマンドを実行して、アップグレードするものがある場合、処理を続けるか確認があるので、続ける場合はYキーを押してエンターキーを押して処理を続けます。

$ sudo apt -y upgrade

オプションで -yを付加すると途中でY/nが表示されず最後まで実行されます。

ubuntuのパッケージをアップグレード時に続ける

処理を続けたら、更新するパッケージの量で処理時間が分かりますが、処理が終わるまで待ちます。

ubuntuのアップグレード

コマンドが入力できる状態になったら、アップグレードが完了です。

NTPサーバのインストール

これから、インストールするファイルやデータなどの時間が正確な時間になるように、NTPサーバをインストールして時間を合わせます。

$ sudo apt -y install ntp
ubuntuのNTPをインストール

NTPサーバが動作しているか確認するために下記のコマンドを入力します。

$ ntpq -p
ubuntuのNTP動作確認

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をインストール

エラー表示されずに終了したら、Webサーバのインストールは完了です、

次に、WebサーバがOSの起動時と同時に起動するように設定します。

下記のコマンドで、OSの起動と同時にWebサーバが自動起動できます。

$ sudo systemctl enable apache2
ubuntuのapache2を自動起動する

Webサーバ(apache)を起動

Webサーバを起動させるコマンドです。

$ sudo systemctl start apache2

Webサーバの設定を変更したり場合などに、再起動させるコマンドです。

コマンドの、「start」を「restart」に変更すれば再起動コマンドになります。

$ sudo systemctl restart apache2

Webサーバの起動や再起動のコマンドを実行させても、メッセージは何も表示されません。

ubuntuでapache2の起動コマンド

これで、Webサーバのインストールを終了です。

ブラウザで、http://192.168.33.10/ にアクセスしたら、Webページを見ることができます。

ubuntuのapache2にアクセス
著:辻 秀典, 著:渡辺 高志, 著:鈴木 幸敏, 著:できるシリーズ編集部
\タイムセール祭り最終日!/
Amazon

PHPのインストール

WordPressなどが動作するように、PHPをインストールします。

$ sudo apt -y install php
ubuntuにphpをインストール

関連する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の関連パッケージをインストール

PHP動作の確認

PHPが正常にインストールされているか確認するには、インストールされているPHPのバージョンをコマンドを入力して確認してみましょう。

$ php -v

上記のコマンドで、PHPのバージョンが表示されたら、PHPのインストールは正常動作できる状態になっています。

phpのバージョン確認コマンド
著:山田祥寛
\タイムセール祭り最終日!/
Amazon

DBサーバ(MariaBD)のインストール

データベースを使えるようにするため、DB(データベース)サーバをインストールします。

MariaBDは、MySQLの派生として開発されているDBサーバソフトウェアでコマンドなど、互換があるので今回は利用します。

下記のコマンドで、MariaBDをインストールすることができます。

$ sudo apt-get -y install mariadb-server
ubuntuのMariaDBをインストール

DBサーバのバージョンを確認

インストールが正常に完了したか確認するために、コマンドを入力してバージョンを確認します。

$ mariadb --version
MariaDBのバージョン確認

rootのパスワードを設定

インストールしたDBサーバを操作するために管理者(root)のパスワードを設定します。

下記のコマンドでは、パスワードを「0000」で設定します。

$ sudo mysql -u root -e "SET PASSWORD = PASSWORD('0000');FLUSH PRIVILEGES;"

rootのパスワードを正常に登録できたら、何もメッセージは表示されません。

MariaDBのrootにパスワードをセットするコマンド

DBサーバにログイン

パスワードは、正常に登録されたか確認するために、DBサーバにログインしてみます。

下記のコマンドを入力して、パスワードを求められるので「0000」を入力したらログインできます。

$ mysql -u root -p
MariaDBのログインコマンド

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のドキュメントルートに移動

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をダウンロード

ダウンロードしたphpMyAdminを解凍

ダウンロードしたphpMyAdminを解凍して使える状態にします。

$ sudo tar xvfz phpMyAdmin-5.2.0-all-languages.tar.gz
ダウンロードしたphpMyAdminを解凍

解凍したフォルダのリネーム

解凍したファイルは、「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のログイン

phpmyadminのログイン画面が表示されたら、DBサーバで設定した管理者でログインします。

ユーザ名:root

パスワード:0000

phpMyAdmin メイン画面

phpMyAdminの警告対処

phpmyadminのログインできたら、画面の下部に警告が表示されているので対処します。

phpMyAdmin初期の警告メッセージ

phpmyadminのディレクトリに移動します。

$ cd /var/www/html/phpmyadmin

年のために、元のファイルをコピーしてバックアップします。

$ sudo cp config.sample.inc.php config.inc.php
phpMyAdmin設定準備

"blowfish_secret"に値を設定

設定ファイルに、暗号化 (blowfish_secret) 用の非公開パスフレーズの設定を必要とするようになりました。と警告が表示されているので、blowfish_secretに値を設定します。

下記のコマンドで、blowfish_secretに適当に文字列を設定して保存します。

$ sudo vim config.inc.php
php configの初期状態

初期状態では、blowfish_secretは、空白で設定されているので何かしら文字列を入力して設定します。

32文字入力するようにコメントが書いてあるので、適当な文字列を入力します。

php configの編集

今回は、「12345678901234567890123456789012」と設定しました。

vimの使い方は別途紹介します。

config.inc.phpを編集して、phpMyAdminにアクセスするとログイン画面に切り変わるので再度ログインすると、「設定ファイルに、暗号化 (blowfish_secret) 用の非公開パスフレーズの設定を必要とするようになりました。」のメッセージが消えています。

もし、文字数が足りないときは、警告メッセージが表示されます。

ディレクトリ phpmyadminのディレクトリの所有者やグループを変更

 $cfg['TempDir'] (/var/www/html/phpmyadmin/tmp/) にアクセスできません。phpMyAdmin はテンプレートをキャッシュすることができないため、低速になります。と表示されている警告の対処をします。

lsコマンドで最初の状態を確認します。

phpMyAdminのドキュメントのアクセス権確認
$ sudo chown www-data:www-data /var/www/html/phpmyadmin -R

ディレクトリの所有者やグループを上記のコマンドを入力して変更します。

phpMyAdminのドキュメントの所有者とグループ変更

コマンドを入力して、ディレクトリの所有者やグループを変更しました。

これで、phpMyAdminの警告が消えました。

phpMyAdminの警告が消えた

FTPクライアントからのゲストOSへのアクセス方法

最後にゲストOSのubuntuに、FTPクライアントからアクセスする方法を紹介します。

今回、解説した手順で、ローカル開発環境を構築した場合の設定です。

無料で使えるFTPクライアントの、FileZilaの設定方法を紹介しますので、使ってるFTPクライアントに合わせて設定してください。

FileZilaの設定方法

VagrantへアクセスするFTPの設定

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で実行している仮想マシンを削除します。

  1. vagrantでゲストOSをシャットダウンしてから操作してください。
  2. VirtualBoxを起動して画面左側にあるゲストOSの上で右クリックして除去を選びます。
  3. メッセージが表示されてすべてのファイルを削除ボタンをクリックします。
  4. 左側の画面から仮想マシンが消えたら削除完了です。
VirtualBox マネージャー

VirtualBoxを起動したら、VirtualBoxマネージャーが表示されます。

画面の左側に作成した仮想マシンが表示されています。

VirtualBox 仮想マシンを右クリック

仮想マシンを右クリックするとメニューが表示されます。

仮想マシンを削除するには、除去をクリックします。

VirtualBox 仮想マシンを削除

除去をクリックすると、メッセージが表示されます。

すべてのファイルを削除をクリックすると、仮想マシンが削除され実データも削除されます。

除去のみをクリックすると、仮想マシンは削除されますが、実データは削除されないのでパソコンの残容量は増えません。

まとめ

以上で、VirtualBox + Vagrantを使ってローカル開発環境を構築することができます。

macosでは、ターミナルにコマンドを入力して、ローカル開発環境を起動できるようになるので簡単にテスト環境が作れます。

また、ubuntuはLinuxなのでネットワークコマンドが使えるので、Windowsでは使えないコマンドを使えて便利です。

今回構築したローカル開発環境にWordPressをインストールするには、こちらの記事を参考にしてください。