【WordPress】ローカル環境からテスト環境へ｜wp-envとLightsailで作る開発ワークフロー

はじめに

この記事で紹介するツールはnpmを使います。npmはNode.jsというソフトウェアをインストールすると、自動的に使えるようになります。Node.jsは公式サイトからダウンロードしてインストールしてください。

WordPressでテーマやプラグインを開発する際、自分のパソコンでコードを書き、その進捗をクライアントやチームメンバーに共有したい時がありますよね。そんな時に役立つのが、ローカル環境とテスト環境を使い分けるワークフローです。

この記事では、僕が実際に試している、効率的なWordPress開発のワークフローをご紹介します。

1. wp-envでローカル開発環境を構築
2. 開発したものをAmazon Lightsailでテスト環境に移行

この手順を踏むことで、誰でも確認できるテスト環境を簡単に用意できます。

【ステップ1】wp-envでローカル開発環境を構築

まずは、あなたのパソコンで開発を進めるためのローカル環境を構築しましょう。wp-envは、Dockerを使ってWordPressの開発環境をコマンド一つで立ち上げられる、とても便利なツールです。

wp-envで構築するメリット

• とにかく手軽：数行のコマンドで、すぐに開発環境が立ち上がります。
• 完全に無料：Dockerを使用するため、費用は一切かかりません。
• 開発に特化：WordPressのバージョンを簡単に切り替えたり、テスト環境を素早く用意したりできます。

具体的な構築手順

1. Dockerのインストール：まず、Docker DesktopをPCにインストールします。
2. wp-envのインストール：コマンドラインで以下のコマンドを実行し、wp-envをグローバルインストールします。

npm install -g @wordpress/env

WordPressのテーマやプラグインを開発するディレクトリに移動し、以下のコマンドを実行します。

wp-env start

補足：開発ディレクトリに移動する方法

wp-envでローカル環境を立ち上げるには、まずWordPressのテーマやプラグインが入っている「ルートディレクトリ」に移動する必要があります。コマンドライン（Macでは「ターミナル」、Windowsでは「コマンドプロンプト」または「PowerShell」）でこの作業を行います。

1. プロジェクトのルートディレクトリを確認する

• あなたが開発しているテーマやプラグインが保存されているフォルダを開いてみてください。
• そのフォルダの中に、wp-contentやwp-includesといったWordPressのコアファイル群が入っているはずです。この場所が「ルートディレクトリ」です。

2. cdコマンドでディレクトリに移動する

• コマンドラインを開き、以下の「cd」コマンドを使って、先ほど確認したルートディレクトリに移動します。
• 「cd」は「change directory」の略で、ディレクトリを移動するためのコマンドです。

cd /Users/あなたのユーザー名/Documents/my-wordpress-project

/Users/あなたのユーザー名/Documents/my-wordpress-projectの部分は、あなたのPCでプロジェクトが保存されている実際のパスに置き換えてください。

これで、wp-env startコマンドを実行する準備が整います。

wp-env 公式ドキュメント

【ステップ2】ローカル環境をLightsailに移行する

ローカル環境で開発がある程度進んだら、クライアントやチームメンバーに確認してもらうために、オンラインのテスト環境に移行しましょう。

ここでは、Amazon Lightsailを使います。Lightsailは、本番環境に近いサーバーを簡単に構築できるサービスです。

Lightsailをテスト環境に使うメリット

• 本番環境に近い：本番と同じWordPressの環境でテストできるため、予期せぬエラーを防げます。
• アクセス可能：固定IPアドレスを持つため、URLを共有するだけで誰でもアクセスして確認できます。

具体的な移行手順

1. Lightsailインスタンスの作成：Lightsailのコンソールで、WordPressがインストールされたインスタンスを作成します。
2. プラグインで移行：ローカル環境とLightsailの両方に、All-in-One WP Migrationのような移行プラグインをインストールします。
3. エクスポートとインポート：ローカル環境でプラグインを使ってWordPressのデータをエクスポートし、Lightsailの環境でインポートします。

応用編：管理画面（wp-admin）にBasic認証をかける

この設定方法は、以下のブログ記事を参考にしています。

Amazon Lightsail の WordPress インスタンスで Basic 認証を使いたい

外部に公開するテスト環境は、Basic認証をかけてセキュリティを強化することをおすすめします。

htpasswdファイルの作成

Basic認証で使用するユーザー名とパスワードを保存するための.htpasswdファイルを作成します。Bitnamiには便利なユーティリティがあるので、以下のコマンドで簡単に作成できます。

sudo /opt/bitnami/apache/bin/htpasswd -cb /opt/bitnami/apache/wordpress_admin_users USERNAME PASSWORD

USERNAMEとPASSWORDは、あなたが設定したいユーザー名とパスワードに変更してください。このコマンドを実行すると、指定したパスに暗号化されたパスワードが保存されます。

設定ファイルの編集

次に、Apacheの設定ファイルを編集して、Basic認証を追加します。以下のコマンドで設定ファイルを開きましょう。

sudo vi /opt/bitnami/apache/conf/vhosts/htaccess/wordpress-htaccess.conf

ファイルの末尾に、以下の内容を追記してください。

  <Directory "/opt/bitnami/wordpress/wp-admin">
   AuthType Basic
   AuthName "Authentication required"
   AuthUserFile "/opt/bitnami/apache/wordpress_admin_users"
   Require valid-user
  </Directory>

Apacheの再起動

設定を有効にするために、Apacheを再起動します。

sudo /opt/bitnami/ctlscript.sh restart apache

これで、WordPressの管理画面にアクセスする際に、Basic認証のユーザー名とパスワードが求められるようになります。

Amazon Lightsail

まとめ：開発からテストまでをスムーズに

今回は、wp-envとLightsailを組み合わせた、WordPress開発の効率的なワークフローをご紹介しました。

• 開発は、手軽で無料のwp-envで
• テストは、本番環境に近いLightsailで

この流れをマスターすれば、よりスムーズに開発を進められるようになります。ぜひ、今後の開発に役立ててみてください。