ロリポップ!サーバーにWordPressをインストールし、Localアプリを使用して、テーマ開発、プラグイン開発、Wordpressアップデートの事前確認用のローカル開発環境の作り方を説明する。
Localアプリ(旧local by flywheel)について
MAMP、Vagrant、Dockerなどを使って、ローカルにWebサーバー、PHP, MySQLをインストールしてWordpressのローカル環境を構築している人も多いと思う。
Localアプリを使用することで、超簡単にWordpressのローカル環境を立ち上げることができる。
Localアプリのいいところは、Webサーバー、PHP, MySQLがデフォルトで含まれていること。また、複数のWordPressサイトの開発環境を同時に起動することができ、それぞれのWordPressサイトのWebサーバー、PHP, MySQLの種類、バージョンを個々に設定できること。ローカルサイトのhttpsの設定もできる。
Live Link機能を使用することで、ローカル環境をグローバルに公開し、iPhoneなどの外部デバイスから確認できる。
Xdebugを使用したデバック環境をVS Code, PhpStormなどのIDEで簡単に構築ところがいい。(ブレイクポイントを張って、ステップ実行できるので開発中重宝する)
macOSだけでなく、Windowsでも利用可能。
個々のサイトで、WP-CLIが設定されたターミナルを立ち上げることができるのも便利。
前提条件
- サーバーは、ロリポップ!
- 開発環境は、macOS
- ドメインは、サブドメイン(test2.webkei.dev)
- ドメインの管理は、ムームードメイン
- WordPressは非公開設定で作成する
- ロリポップ!のWordPress簡単インストールを使用する(自分で設定するよりセキュリティがしっかりしてそうだから)
- ロリポップ!にWordpressをインストール直後にロリポップ同等のローカル環境を作成
- ローカル環境はLocalアプリを使用
- Duplicatorプラグインを使用してデータを移行する(Duplicatorプラグインを選んだのは、色々試してみで簡単だったから)
ロリポップ!サーバーにWordPressをインストールする
サブドメインの設定
- ロリポップにログイン
- サブドメイン設定 > 新規作成
- 各項目を入力(公開フォルダは、サブドメイン名)
- アクセラレーターは、無効にする(アクセス制限を使うため)
- 作成をクリック
- ネームサーバー認証で、ムームードメインにログイン
- ネームサーバー認証をクリック
- 設定をクリック
ロリポップへのWordpressのインストール
- ロリポップにログイン
- サイト作成ツール > WordPress簡単インストール
- 各項目を入力
- 利用データベースは新規自動作成
- 検索エンジンによるサイトのインデックスを無効にする(公開前なので)
- 入力内容確認をクリック
- 承諾するにチェック
- インストールをクリック
独自SSLの設定
- セキュリティ > 独自SSL証明書導入
- ドメインを選択
- 独自SSL(無料)を設定する
- WordPressの管理画面にログイン(https://test2.webkei.dev/wp-admin/)
- 設定 > 一般
- URLをhttp -> httpsに変更
- 変更を保存
- インストール完了
アクセス制限の設定
- セキュリティ > アクセス制限
- 新規作成
- インストールしたディレクトリ名を入力
- ベージック認証用のID, PWを入力
- 作成ボタンをクリック
サイトにアクセスすると、ID, PWが求められるようになる。
ロリポップからアクセス制限をした場合「.htaccess」が上書きされるので、WordPressにログインして、再設定する。
- 設定 > パーマリンク
- 変更を保存
ローカル開発環境にWordPressをインストールする
Local(local by flywheel)のインストール
- Localのサイトを開く
- 画面右上の「DOWNLOAD」をクリック
- platformを選択
- 各項目を入力する
- GET IT NOW!!をクリック
- ダウンロードした、ファイルをクリックして、画面の説明にしたがってインストールする。
Local(local by flywheel)へWordPressをインストールする
- 画面左下の「+」ボタンをクリック
- ドメイン名を入力
- CONTINUEボタンをクリックする
- Customを選択、ロリポップ!の環境に合わせて、環境を設定する。
- PHP Versionは、7.4系を選択
- Web ServerはApacheを選択(ロリポップ!のハイスピード、エンタープライズプランは、Apache互換のLiteSpeedサーバーなので、Apacheを選択)
- MySQLは5系を選択
- CONTINUEをクリックする
- WordPressのログインユーザーを作成
- ADD SITEをクリックする
- インストール完了(
http://test2webkei.local/
でアクセスできるようになる) - ~Local Sites/test2webkei > をクリックすると、インストールディレクトリが開く、web rootは、
app/public
ディレクトリ - OPEN SITEで、WordPressの画面が開く
- ADMINクリックでWordPressの管理画面が開く
WordPressの日本語設定
- Settings > General をクリック
- Site languageで日本語を選択
- TimezoneでTokyoを選択
- Save Changesをクリック
- プラグイン > 新規追加
- WP Multibyte Patchで検索
- WP Multibyte Patchを今すぐインストール
- 有効化
SSLの設定
- Localを開く
- SSLの左のTRUSTをクリック
- WordPressを開く
- http -> httpsに変更
- 変更を保存
- httpsでサイトが表示できるようになる。(
https://test2webkei.local/
)
ロリポップサーバーから、ローカル環境へ移行する
文字コードについて
Duplicatorを使って、ロリポップサーバーから、ローカル環境へ移行すると文字化けが発生します。データベースの文字コードの違いロリポップ(utf8)ローカル環境(utf8mb4)があると思います。Duplicatorを使った移行の解決方法はわかりません。Duplicatorは最初1回だけ使って、移行したあとは、別の方法でロリポップサーバー <-> ローカル環境を同期しています。
もっと調べると解決方法があるかもしれません。
以下、データベースの文字コードを調べた結果です。
show variables like "chara%"
ロリポップ!サーバー
Variable_name | Value |
---|---|
character_set_client | utf8 |
character_set_connection | utf8 |
character_set_database | utf8 |
character_set_filesystem | binary |
character_set_results | utf8 |
character_set_server | utf8 |
character_set_system | utf8 |
Local
Variable_name | Value |
---|---|
character_set_client | utf8mb4 |
character_set_connection | utf8mb4 |
character_set_database | latin1 |
character_set_filesystem | binary |
character_set_results | utf8mb4 |
character_set_server | latin1 |
character_set_system | utf8 |
Duplicatorプラグインを使った移行
準備
- ロリポップのWordPressとローカル環境のWordpressにDuplicatorプラグインをインストールする
- Duplicatorを有効にする
- ロリポップのWordPressのWP Multibyte Patchプラグインを有効にする
ロリポップサーバーからデータをエクスポート
- ロリポップのWordPressで、Duplicator > パッケージを開く
- 新規作成ボタンをクリック
- ステップに従って進める
- 次へボタンをクリック
- 「はい。ビルドプロセスを続行します。」にチェック
- ビルドをクリック
- ダウンロード画面が表示される
- インストーラとアーカイブをダウンロード
エクスポートしたデータの削除
- ロリポップのWordPressで、Duplicator > パッケージを開く
- エクスポートしたパッケージを選択
- 一括処理で削除を選択して、適用をクリック
ロリポップサーバーからローカル環境にデータをインポート
- ダウンロードした、インストーラーとアーカイブデータをローカル環境の
app/public
の直下に移動
- ブラウザを開き、https://{ローカルサーバーのドメイン}
/installer.php
にアクセスする - ステップに従って進める
- Continue with site overwrite mode、I have read and accept all team & noticesをチェック
- Nextをクリック
- Applyをクリック
- Test Databaseをクリック
- Nextをクリック
- Nextをクリック
- Admin Loginをクリック
- ロリポップサーバーのID, PWでログインする(データベースがロリポップサーバーのものと入れ替わったので)
- ログインするとインストールに使用したファイルが削除される。
- ロリポップのWordPressとローカル環境のWordpressにDuplicatorプラグインを無効にする
不要なファイルを削除
- ローカルの
app/public
ディレクトリを開く - Finderで不可視ファイルを表示(
shift + ⌘ + .
) .htpasswd
は不要なので削除htaccess-{ランダムな文字列}-duplicator.bak
は不要なので削除- Finderで不可視ファイルを非表示(
shift + ⌘ + .
) - 移行完了!
まとめ
今回は、ロリポップのWordPress簡単インストールを使用し、同等の環境をLocalアプリを使用してローカルに作成する流れを紹介した。次回は、ロリポップサーバー <-> ローカル環境の同期方法を説明する。黒い画面になるが、文字化けを回避しデータベースを同期できる方法も説明する。
【更新】WordPressの本番サーバーとローカル開発サーバーの同期方法の記事を書いた!