主婦の働き方・生き方 

VirtualBox,MAMP,XAMPP,Local by flywheel…WordPressローカル環境を一番簡単に作れる方法は?

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 FryWheelwp-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ローカル環境設定手順

  1. Docker をインストールする
  2. Nodeのバージョン管理パッケージをインストールする
  3. Node.jsをインストールする
  4. フォルダーを作成する
  5. 3で作成したフォルダーへ移動
  6. Package.jsonファイルを作成する(npm initで初期化)
  7. wp-envをインストールする
  8. 5で作成したPackage.jsonファイルにwp-envが使用できるよう追記する
  9. WordPressを起動する

「簡単と言いながら手順多いじゃねーか!」とお怒りな方もいらっしゃることでしょう。
ただ、Localではなくwp-envを選んだあなたは、すでに工程3まで終わっていませんか?ステップ4からなら、コマンドをポンポンポンと打っていくだけ。だから簡単にWordPressを量産できるのです。

1. Dockerインストール

Docker公式サイトから、Docker Desktopをダウンロード後にインストールします。
4種類の中から使っているPCのOSに合うバージョンを選んでください。
①Mac(CPUがインテル製)②M1 Mac, M2 Mac ③Windows ④Linux

>>>Get Started | Docker

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 --version

Windowsの場合

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 --savedev

8. 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で簡単に作る

WordPressサイト開発 ローカル環境を一番簡単位作れる方法
Twitterで最新情報をお知らせ
記事がお役に立てたらシェアお願いします♪

今さらながらブログ村に参加しました。アラフィフ・40代・派遣社員・主婦・シンプルライフなど趣味の近い方と繋がりたいのが目的です。

読者登録しておくと、同じジャンルのブログの新規投稿を見逃さずに読めます。

きむおばブログ - にほんブログ村

にほんブログ村 主婦日記ブログへにほんブログ村 受験ブログ 中学受験終了組(本人・親)へにほんブログ村 就職バイトブログ 派遣社員へ