VirtualBox,MAMP,XAMPP,Local by flywheel…WordPressローカル環境を一番簡単に作れる方法は？
このブログではアフィリエイト・アドセンス広告を利用しています
当ブログでは、アドセンス・アフィリエイト広告を掲載しています。
消費者庁が発表しているルールに沿って記事を作成していますが、問題のある表現を見つけた際にはご連絡ください。
WordPressのテーマ作成やカスタマイズをしたい人には必須のローカル環境。
サイト制作を続けてきた10年弱。PC内のWeb開発環境構築方法はどんどん変わってきました。
最初は、VirtualBoxでPC内に仮想のLinuxサーバーを作るという作業をしていたものです。それからMAMPというMac/Apache/MySQL/PHP環境をまとめて作れるソフトが登場しました。Windowsな方はXAMPPですね。
その後、Local by FryWheelというWordPressの開発環境を数分で自動作成してくれる画期的なアプリが登場。レンタルサーバーでよく用意されているWordPress簡単インストール並に、誰でもWordPressのローカル環境構築ができるように。初めて使った時は感動したものです。「何これ？今までの作業が嘘のように一瞬で準備できちゃう。」
Local by FryWheelでも楽なのに、さらに倍速でWordPressのローカル環境構築が可能な方法があったんです！それは、Docker+wp-envです。
Dockerとwp-envを使ったWordPressローカル環境を作成する手順をご紹介します。
目次（読みたいところへジャンプ！）
そもそもローカル環境ってなんやねん
振り出しに戻って説明させていただきます。
「WordPressを自分のPCだけで作れるようにすること」を「ローカルの開発環境を構築する」と言ったりします。
みなさんきっと、ブログやサイトを運営するのにレンタルサーバーを借りているので、WordPressが動くためにはサーバーが必要なのはご存知のことでしょう。
個人的な趣味ブログを作るだけだったら、ローカル環境なんて用意する必要はないかもしれません。テーマのカスタマイズや新しいプラグインの導入など必要な作業を全部レンタルサーバー上でやってしまえばいいから。ぶっ壊れてもバックアッププラグインで元どおりになるし。
ただ、たとえ副業だとしてもサイト制作を「Webデザイナーやエンジニアとして仕事にしたい」となると話が違ってきます。受注した案件は公開日まで秘密厳守だったり、検索エンジンにインデックスされないように設定していたとしても、Web上にアップロードすることは全世界に向けて公開したと同じこと。作成途中のお客様のサイトを覗き見られてしまったり、思いもよらずウィルスを仕込まれてしまう可能性だって0ではない。もしそんなことになったらショックすぎる・・・公開前にすでに汚染されているなんて(つД<｡
仕事でサイト制作を受注するなら、作成中はローカル環境を作ってPCの中だけで行うのが正しい方法だと思っています。BASIC認証とかIPアドレス制限とか、サイト全体にパスワードをかけるプラグインとかアクセスを制限する方法はありますけど。工事中は完全にシークレットな方が安心できません？
Local by FryWheelとwp-envどっちがおすすめ？
で、冒頭のローカル環境構築方法あれこれな話に戻ってきました。
今なら、WordPressのローカル環境を作る方法は2つに絞られてきます。少しでも楽したいもん。Local by FryWheelかDocker+wp-envという簡単な方法を避けて、VirtualBoxとかMAMPを選ぶ必要がある人なんてほとんどいないはず。
Local by FryWheelとDocker+wp-envのどちらを利用すべきか、おすすめなタイプをこのように分けてみました。（※あくまで個人の感想です）
| Local by FryWheel | wp-env | |
|---|---|---|
| おすすめなタイプ | ・運営中のWordPressサイトのテストに使いたい ・開発はWordPressのみ | ・定期的に受注があるサイト制作を効率化したい ・WordPressだけでなくLaravel,Python,Vue.jsなどを使った開発も実験してみたい |
ローカル環境を必要とするサイト数が多いか少ないか、開発手法が単一か複数かによって、Local by FryWheelが向いている人、wp-envの方がさらに効率化できる人に分かれてくるんじゃないかなと思います。
wp-envを特におすすめしたいのは、ガンガン新しい開発手法や効率化を取り入れていきたいエンジニアの卵な方。実際の業務の現場で使われるのはwp-envの方が多くなってくると予測されますし、すでにDockerやNode.jsがインストールされているんじゃないですか？
ローカルでの開発環境構築準備がすでに整っているなら、wp-envは超っぱやでWordPressを作ってくれますよ。
wp-envでのWordPressローカル環境設定手順
- Docker をインストールする
- Nodeのバージョン管理パッケージをインストールする
- Node.jsをインストールする
- フォルダーを作成する
- 3で作成したフォルダーへ移動
- Package.jsonファイルを作成する（npm initで初期化）
- wp-envをインストールする
- 5で作成したPackage.jsonファイルにwp-envが使用できるよう追記する
- WordPressを起動する
「簡単と言いながら手順多いじゃねーか！」とお怒りな方もいらっしゃることでしょう。
ただ、Localではなくwp-envを選んだあなたは、すでに工程3まで終わっていませんか？ステップ4からなら、コマンドをポンポンポンと打っていくだけ。だから簡単にWordPressを量産できるのです。
1. Dockerインストール
Docker公式サイトから、Docker Desktopをダウンロード後にインストールします。
4種類の中から使っているPCのOSに合うバージョンを選んでください。
①Mac（CPUがインテル製）②M1 Mac, M2 Mac ③Windows ④Linux
Windowsの方は、設定画面でWSL2を有効化しておいてください。
＞＞＞WSL 2 での Docker リモート コンテナーの概要
2. Node.jsのバージョン管理パッケージをインストール
他のパッケージとの相性とかもあり、開発プロジェクトによって使用するNode.jsのバージョンが異なってきます。柔軟にバージョン切り替えができるようにNode.jsのバージョンを管理してくれるパッケージをインストールしておきます。
Macの場合
Macの方で、Homebrewをインストールしていないなら、先にHomebrewをインストールしておきます。HomebrewはMacで動くパッケージマネージャーです。開発環境を構築するのに必要なパッケージをまとめて管理してくれます。こちらの記事のHomebrewインストールの部分を参考にしてみてください。
＞＞＞Python3+Djangoで初心者がMac内に環境構築した手順
Homebrewを使ってNode.jsのバージョン管理パッケージ「nvm」をインストールします。
# homebrewを使ってnvmをインストールするコマンド
brew install nvmインストール完了後に表示されているメッセージ通りに作業を進めて行きます。
①nvmディレクトリを作成する
You should create NVM’s working directory if doesn’t exist:
mkdir ~/.nvm
訳：無いならnvmディレクトリを作ってこのコマンドで
指示通りに.nvmフォルダを作成するコマンドを実行します。
mkdir ~/.nvm②.zshrcファイルを作成し指示されたコードをコピペする
Add the following to ~/.zshrc or your desired shell
configuration file:
export NVM_DIR=”$HOME/.nvm”
[ -s “/usr/local/opt/nvm/nvm.sh” ] && \. “/usr/local/opt/nvm/nvm.sh” # This loads nvm
[ -s “/usr/local/opt/nvm/etc/bash_completion.d/nvm” ] && \. “/usr/local/opt/nvm/etc/bash_completion.d/nvm” # This loads nvm bash_completion
訳：次を~/.zshrcファイルに追加して
# ~/.zshrcファイルを新規作成するコマンド
touch ~/.zshrc
# viエディタでzshrcファイルを開くコマンド
vi ~/.zshrc
# viエディタで指示されたコードを貼り付ける（コピー後右クリックで貼り付けが楽）
# viエディタを保存して終了するコマンド（エスケープキーを押してから）
:wq
# 設定を反映させるコマンド
source ~/.zshrc
# nvmのバージョンを確認（バージョンが帰ってきたらインストール完了）
nvm --versionWindowsの場合
Windowsの方は、nvm-windowsをダウンロードしてインストールすればOKです。
# インストール済のNode.jsバージョン一覧表示するコマンド
nvm list
# バージョンを指定してNode.jsをインストールするコマンド（サンプルは14.0.0を指定）
nvm install 14.0.0
# Node.jsの使用するバージョンを指定するコマンド
nvm use 14.0.0
# コマンドプロンプトを管理者で実行しないとバージョンが切り替えられないので、右クリックしてコマンドプロンプトを管理者で実行する
3. Node.jsのインストール
Macの場合
# nvmを使ってNode.jsの推奨版をインストールするコマンド
nvm install --lts
# Node.jsが正しくインストールされているか確認するコマンド
node -v
# バージョンが返されたらインストール成功Windowsの場合
Node.jsサイトへ行き、左側の「LTS（推奨版）」をダウンロード後にインストールします。Node.jsのサイトにWindowsPCからアクセスするとWindows用の推奨版と最新版がダウンロードできるよう表示されるはずです。
＞＞＞Node.js
4. フォルダを作成
事前準備が終わってやっとここからが本番です。
まずは、好きな場所に作業フォルダを作成します。作成方法はターミナルやコマンドプロンプトでコマンド使ってもいいですし、ファインダーやエクスプローラーで作っても大丈夫です。
5. フォルダへ移動
ここからの作業は、再びターミナル（Mac）またはコマンドプロンプト（Windows）で行います。
まずは、4で作成したフォルダへ移動します。サンプルではlocalwpフォルダ内にtest001フォルダ（今回WordPressサイトを作成したいフォルダ）を作成し、そこへ移動しています。
cd users/user/localwp/test001/6. npm initで初期化
npm init初期化コマンドを実行すると、package.jsonファイルが作成されます。途中、いろいろ聞かれますが、エンターキーを押すだけで大丈夫です（後から変更できるので）。
7. wp-envパッケージをインストール
npm i @wordpress/env --savedev8. Package.jsonファイルに追加
Package.jsonファイルにwp-envが使用できるように下の内容をコピペしておきます。
"scripts": {
"wp-env": "wp-env"
},9. WordPressを起動
コマンドを打つだけで、WordPressが起動します。
npm run wp-env startブラウザーが立ち上がらなかった時は、「http://localhost:8888/」にアクセスしてみましょう。テストサイトが表示されましたか？
ログインURLは、http://localhost:8888/wp-login.php/になります。
初期設定のユーザーIDとパスワードはadmin/passwordです。
実は、この手順でローカル環境を作ると、一度にテストサイトも作成されています。「http://localhost:8889/」がテストサイトのURLです。テーマをカスタマイズして問題ないか、WordPressのメジャーアップデートをしてもエラーが発生しないか比較しながら作業するのに便利に使えます。
終了する時のコマンドはstopです。
npm run wp-env stopこれからWordPressローカルサイトを量産していくなら、4〜6をコマンドラインで繰り返していくだけなので、サイト1つあたり5分もかからないんじゃないでしょうか。
さらに、.wp-env.jsonファイルを作成し、インストールするWordPressのバージョン、wp-configの設定、いつもインストールするプラグインを書き込んでおくと、プラグインのインストールまで含めても5分で完了するようになります。
WordPressでのサイト制作の効率化のお役に立てたら光栄です。
参考リンク
＞＞＞@wordpress/env | WordPress
＞＞＞wp-envでWordPress開発環境を構築する
＞＞＞WordPress開発環境をwp-envで簡単に作る
