WordPress スキルアップ

Vagrantでローカル環境にWordPressを構築する方法

WordPressの操作を試してみたり、新しいプラグインの検証をしてみたいと思った時に無料で使える環境がないか考えたことはありませんか?

私は以前WordPressの勉強をしたいと思い、自分のパソコンに入れる方法を探していました。例えば「local by Flywheel」というツールを使うと簡単に環境を構築できそうなので試したことがあります。
でも私の環境では、パソコンのセキュリティの強度を下げないと使えないことが分かって諦めました。

他に方法がないか探したところ、KUSANAGI for VagrantというWordPressの仮想マシンを使えば自分のパソコンに入れられるということが知りました。
ちょっと準備しないといけないことが多いですが、面倒なのは最初だけです。
一度構築してしまえば操作はWordPressと変わりませんし、無料で使えるのは大きな利点になると思います。

KUSANAGIの環境の導入方法については下記に公式サイトがあります。

KUSANAGI for Vagrant

ただ、この通りに進めても上手くいかなかったので、備忘録も兼ねて手順を残しておくことにしました。

事前準備

先に以下のものを先に準備しておくとスムーズに作業が進められます。

VirtualBoxのインストール

virtualbox_logo_icon
Windows10にVirtualBoxをインストールする方法

  勉強用にサーバーを立てて触ってみたいと思ったことありませんか? そういう時に便利なものが仮想化のソフトウェアです。 このソフトをインストールすることで、パソコン上にWindowsサーバー ...

Vagrantのインストール

vagrant_original_logo_icon_512
Windows10にVagrantをインストールする方法

これまで手動でVirtualBoxの環境を構築していたのですが、Vagrantを使うと簡単に構築できるらしいということで、勉強を兼ねてインストールしてみました。 今回はVagrantのインストール方法 ...

TeraTermのインストール

teratern_icon
TeraTermのインストール方法

今回はLinuxサーバーにリモート接続する際によく利用されているTeraTermのインストール手順をご紹介します。 TeraTermはLinuxにリモートで接続する時によく使用されているフリーのツール ...

パスワード

・CentOSのkusanagiユーザーのパスワード
・SSH鍵認証用のパスワード(テスト環境なので必要に応じて)
・DB名
・DBのrootユーザーのパスワード
・DBの一般ユーザー名
・DBの一般ユーザーのパスワード

パスワードは下記のサイトを使うと便利です。
パスワード生成(パスワード作成)ツール

Vagrant Boxのインストール手順

VirtualBoxを起動します。
すぐに使うわけではないのですが、どのタイミングでCentOSが起動するか確認しやすいので、あらかじめ起動しておきます。
virtualbox_start

これから行う作業はVagrantを使って、VirtualBoxにCentOSというLinuxのOSをインストールします。
基本的にはWIndowsのコマンドプロンプトを使って、コマンドのみで環境を構築します。
CUI操作に慣れていないと難しく感じるかもしれませんが、コマンドは数回ですし、コピペで対応できるので気負わなくても大丈夫です。

Vagrantfileの作成

コマンドプロンプトを起動します。
起動したらcdコマンドで任意の場所に移動してください。
例えば下記ではPCのユーザー名のフォルダ(ここではuser_name)に移動します。

cd C:/Users/user_name/

ここにVagrantfileファイルを作成するために、下記コマンドを実行してフォルダを作成します。
今回はkusanagiという名前のフォルダを作成しますが、何でも構いません。

mkdir kusanagi

次にcdコマンドでカレントディレクトリをkusanagiフォルダに移動します。

cd kusanagi

Vagrantfileファイルを生成するコマンドを実行します。

vagrant init primestrategy/kusanagi

実行が完了すると下記メッセージが表示されます。

A `Vagrantfile` has been placed in this directory. You are now
ready to `vagrant up` your first virtual environment! Please read
the comments in the Vagrantfile as well as documentation on
`vagrantup.com` for more information on using Vagrant.

これでkusanagiフォルダにVagrantfileファイルが作成されました。
同時にkusanagiフォルダと同じ階層に「.vagrant.d」フォルダが作成されます。

Vagrantfileの編集

Vagrantfileファイルを編集したいので、startコマンドを実行してファイルを開きます。
この時、どのアプリで開くか聞かれると思いますので、メモ帳を選んで開いてください。

start Vagrantfile

ファイルを開いたら下記の編集前の行を編集後の5行に置き換えます。
また、"1024"の部分はパソコンのメモリーを逼迫しない程度に調整してください。単位はMB(メガバイト)です。
修正が終わったら保存して、ファイルを閉じます。

編集前:

# config.vm.network "private_network", ip: "192.168.33.10" 

編集後:

config.vm.box_download_insecure = true
config.vm.network "private_network", ip: "192.168.33.10"
config.vm.provider "virtualbox" do |vb|
  vb.customize ["modifyvm", :id, "--memory", "1024"]
end

仮想マシンの起動

下記コマンドを実行すると仮想マシンが起動しますが、完了まで数分かかります。

vagrant up

起動が成功すればVirtualBoxの画面左側にCentOS実行中が表示されます。

virtualbox_exe

このタイミングでkusanagiフォルダと同じ階層に.vagrant.dフォルダが作成されます。
もし、エラーが表示されて失敗した場合にはVagrantfileファイルに誤りがないか確認してください。
修正したらuser_name(アカウント名)の下にある「.vagrant.d」フォルダを削除してから、再度vagrant upコマンドを実行すれば大丈夫です。

VagrantBoxフォルダの構成

※[]はフォルダ、・はファイルを意味します。

kusanagi

[kusanagi]
│ ・Vagrantfile

└─[.vagrant]
├─[machines]
│     └─[default]
│               └─[virtualbox]
│                      ・action_provision
│                      ・action_set_name
│                      ・box_meta
│                      ・creator_uid
│                      ・id
│                      ・index_uuid
│                      ・synced_folders
│                      ・vagrant_cwd

└─[rgloader]
・loader.rb

.vagrant.d

[.vagrant.d]
│ ・insecure_private_key
│ ・setup_version

├─[boxes]
│  └─[primestrategy-VAGRANTSLASH-kusanagi]
│        │   ・metadata_url
│        │
│        └─[1.0.0]
│                └─[virtualbox]
│                            ・box.ovf
│                            ・box_update_check
│                            ・centos-7-1-1.x86_64.vmdk
│                            ・metadata.json
│                            ・Vagrantfile

├─[data]
│    │ ・checkpoint_cache
│    │ ・checkpoint_signature
│    │ ・lock.dotlock.lock
│    │ ・vbox_symlink_create_warning
│    │
│    ├─[fp-leases]
│    └─[machine-index]
│          ・index
│          ・index.lock

├─[gems]
│     └─[2.6.6]
├─[rgloader]
│     ・loader.rb

└─[tmp]

ここまででVirtualBoxへのCentOSのインストール作業は完了です。

KUSANAGIのインストール

次にこのCentOSにWordPressをインストールします。

コマンドプロンプトのコマンドで「Vagrant ssh」で接続することも可能ですが、ここではTeraTermというツールを使って解説します。

SSH接続

まず、TeraTermを起動します。
ここではIPアドレスとTCPポートを設定します。
IPアドレスは「127.0.0.1」(自分の端末を意味するIPアドレス)
TCPポートは「2222」を入力してください。
入力が完了したら[OK]ボタンをクリックします。

teraterm_ip_tcp

初めてログインする時はセキュリティ警告が表示されますので、そのまま[続行]ボタンをクリックします。
既存のカギを新しい鍵で上書きするにチェックを入れると次回以降、このセキュリティ警告は表示されなくなりますので、入れておいてもいいです。

teraterm_セキュリティ_next

ユーザー名とパスワードには「vagrant」と入力して[OK]ボタンをクリックします。

teraterm_id_pass

CentOSやKUSANAGIのアップデート

最初にroot権限を取得するために、下記コマンドを実行します。

sudo su -

KUSANAGIとCentOSのアップデートを実施します。
下記コマンドを1行ずつ実行してください。

yum update kusanagi -y
yum --enablerepo=remi,remi-php56 update -y

「Complete!」が表示されたら下記コマンドでCentOSを再起動します。

reboot

CentOSが起動したらもう一度TeraTermで接続してください。
まずはKUSANAGIの初期設定をします。
下記コマンドでroot権限を再度取得します。

sudo su -

サーバータイムゾーンの設定

下記コマンドを実行するとサーバーのタイムゾーンの設定が開始されるのですが、以降、設定選択して進める形式になります。
途中で設定を止めた場合は、もう一度このコマンドから実行するか、下記サイトを参考に残りの設定をコマンドで設定してください。
https://kusanagi.tokyo/document/kusanagi-init/

kusanagi init --tz tokyo

処理が終わりましたら、下記のようにメッセージにFinishが表示されます。

Checking KUSANAGI Version.
KUSANAGI is already latest version.
(中略)
Finish.
Applying Location: Asia/Tokyo.

使用言語の選択

続けて使用言語を選択します。日本語の場合は「2」を選んでEnterを押下します。

Select your using language.
1 : English
2 : 日本語

キーボードタイプの選択

次はキーボードの設定です。英語配列キーボードでなければ「2」の日本語配列キーボードを選んでください。

You choose: Japanese
Select your keyboard layout.
1 : English
2 : Japanese

ユーザーkusanagiのパスワード設定

次はユーザー kusanagiのパスワードを設定します。
「Retype new password:」が表示されたら同じパスワードをもう一度入力します。

kusanagi user password using in software update.
Changing password for user kusanagi.
New password:

下記メッセージが表示されたらパスワードの設定は成功です。
passwd: all authentication tokens updated successfully.

鍵認証の設定

ユーザーkusanagiのSSHユーザ鍵のパスワードを設定します。(何も入力せずに進めることも可能です。)
「passphrase again:」が表示されたら同じパスワードをもう一度入力します。

Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase):

以下のように表示されればパスワードの設定は完了です。
Your identification has been saved in /root/kusanagi.pem.
Your public key has been saved in /root/kusanagi.pem.pub.
The key fingerprint is:
xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx root@
The key's randomart image is:
+---[RSA 2048]----+
(略)
+----[SHA256]-----+
/root/kusanagi.pem.pub is moved to /home/kusanagi/.ssh/authorized_keys.
/home/vagrant/.ssh/authorized_keys is added to /home/kusanagi/.ssh/authorized_keys.
/root/kusanagi.pem is moved to /home/vagrant/kusanagi.pem.

Webサーバーの選択

WebサーバーをNGINXかApachかを選びます。ここではNGINXを選択します。

KUSANAGI can choose middlewares.
Please tell me your web server option.
1) NGINX(Default)
2) Apache

アプリケーションサーバーの選択

次に起動するアプリケーションサーバーを選択します。
PHP7を選択して進めます。

nginx: the Then, Please tell me your application server option.
1) PHP7(Default)
2) HHVM
3) PHP5

データベースの選択

使用するDBを選択します。
ここではMariaDBを選択します。

All settings correct for using Composer
Downloading...
Composer (version 2.0.11) successfully installed to: /usr/bin/composer
Use it: php /bin/composer
Then, Please tell me your Database system.
1) MariaDB(Default)
2) PostgreSQL

DBのrootユーザーパスワードの設定

続いてDBのユーザー rootのパスワードを設定します。
8文字以上で任意のパスワードを入力してください。
「Re-type MySQL root password.」が表示されたら同じパスワードをもう一度入力します。

Enter MySQL root password. Use [a-zA-Z0-9.!#%+_-] 8 characters minimum.

下記のメッセージが表示されればKUSANAGIの処理設定は完了です。(sizeは環境によって変わります。)

innodb_buffer_pool_size = 384M
query_cache_size = 128M
(略)
KUSANAGI initialization completed
(略)

KUSANAGIのプロビジョニング

続いてKUSANAGIでWordPressなどを使用するためのプロファイルを作成します。

以降は例としてwptestというドメインを想定した内容で作成します。

まず、下記コマンドを実行してプロビジョニングを開始します。

kusanagi provision --WordPress wptest

WordPressインストールの言語設定

下記ではWordPressのインストールで使用する言語を選択します。
ここではja「日本語」を選択して進めます。

Target directory is /home/kusanagi/kusanagi_html.
Choose the installation language of WordPress.
1 : en_US
2 : ja

ホスト名の設定

ホスト名(FQDN) を入力します。
ここでは「wptest」という名前で設定します。
「Re-type hostname(fqdn) for your website.」が表示されたらもう一度入力します。

Enter hostname(fqdn) for your website. ex) kusanagi.tokyo

Let’s Encryptの設定

次にLet’s Encryptの設定(SSL証明書の発行)ができるのですが、今回は省略して何も入力せずにEnterで先に進めます。
もう一度入力を求められますが、そのままEnterで先に進めます。

In order to use Let's Encrypt services, you must agree to Let's Encrypt's Term of Services.
If you agree to this TOS, type your email address; if not, hit enter twice.
TOS of Let's Encrypt : https://letsencrypt.org/repository/

DB名の設定

データベース名を設定します。
ここでは「wpdb」という名前でDBを設定します。
確認用を含めて2度入力します。

Enter the name of your database.

DBの一般ユーザー名の設定

データベースのユーザー名を設定します。
ここでは「wpuser」という名前のユーザーを作成します。ここでも同じく確認用を含めて2度入力します。

Enter user name for database wpdb.

DBの一般ユーザーパスワードの設定

作成したデータベースのユーザーのパスワードを設定します。
確認用を含めて2度入力します。

Enter password for database user 'wpuser'. USE [a-zA-Z0-9.!#%+_-] 8 characters minimum.

下記が表示されたらプロビジョニングは完了です。

Provisioning of wptest completed. Access wptest and install WordPress!

WordPressのインストール

hostsファイルの編集

VagrantのデフォルトのIPアドレスが「192.168.33.10」なので、URLにそのまま入力したのですが繋がりませんでした。
VagrantfileかCentOSの設定を変更すれば接続できると思うのですが、今回はWindowsのhostsファイルに追記して名前解決する手順で進めたいと思います。
まずコマンドプロンプトを管理者権限で起動します。

start C:/Windows/System32/drivers/etc/hosts

開くプログラムを聞かれると思いますのでメモ帳で開きます。
一番下の行に下記を追加します。

192.168.33.10 wptest

追記したら保存します。
保存できない場合はコマンドプロンプトを管理者権限で開けているか確認してください。

WordPressをブラウザで開く

保存できたら、chromeなどのブラウザを起動して、URLにドメイン名(今回はhttp://wptest)を入力します。
すると下図のような画面が開きますので、[さあ、始めましょう]ボタンをクリックします。

wp_start

以下の画面が開いたら、下記情報を入力します。
データベース名:「DB名の設定」で指定した名前を指定します。
ユーザー名:「DBの一般ユーザー名の設定」で指定した名前を指定します。
パスワード:「DBの一般ユーザーパスワードの設定」で指定したパスワードを指定します。
データベースのホスト名:localhost
テーブル接頭語:wp_

wp_start_info

WordPressのインストール

次にWordPressの情報を入力して[WordPressをインストール]ボタンをクリックします。
サイトタイトル:任意のタイトル
ユーザー名:WordPressにログインするユーザー名
パスワード:WordPressにログインするパスワード
メールアドレス:ローカルパソコンで使う場合はメールは飛んでこないので、適当なメールアドレスを入力します。

wp_wellcome

[インストール実行]ボタンをクリックして進めます。

wp_install

下記の画面になったら[ログイン]ボタンをクリックして、WordPressにログインします。

wp_success

以上でローカルパソコンにWordPressをインストールする手順は完了です。

WordPressの停止

TeraTermで下記コマンドを実行することで、CentOSをシャットダウンできます。

sudo shutdown now

まとめ

いかがでしたでしょうか。

最初は手順を見ながら進めるので時間がかかりますが、やり方を覚えると簡単に環境を構築できるようになります。
また、構築に失敗してもやり直しが簡単にできるので安心です。
もちろん大事なのは構築した後ですが、その前の段階で時間をあまり消費しなくなるのはすごいメリットに感じます。

今後はこの環境を使ってWordPress関連やPHP、javascriptなどの情報を記事にしていきたいと思います。

-WordPress, スキルアップ

© 2022 気ままにまとめる技術の備忘録 Powered by AFFINGER5