1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Docker
  6. »
  7. M1 Mac対応。DockerでWordPress開発環境を構築する方法

M1 Mac対応。DockerでWordPress開発環境を構築する方法

みなさんこんにちは。@It_is_Rです。

ローカルにWordPressの開発環境を作りたいとき、Dockerを使うと、とても簡単に構築することができます。
しかし、実際に運営しているWordPressサイトと同じ状態にしようと思うと、すこし難しい手順を踏む必要があります。

今回は、Apple Siliconに対応したDocker Desktopを使った、M1 MacでのWordPressローカル開発環境の構築方法、そして実際に運営しているサイトと同じ状態にする方法を紹介します。

目次
  1. Apple Chip 対応 Docker Desktop for Mac について
  2. Apple Chip対応のDockerで、WordPressのローカル開発環境を構築
  3. 運営しているWordPressサイトの内容をローカルサイトに反映させる
  4. Dockerで、phpMyAdminを使う方法
  5. まとめ

Apple Chip 対応 Docker Desktop for Mac について

DockerはWindows、Mac、Linuxで、仮想環境を構築できる仮想化ツールです。
2021年4月15日、Docker Desktop 3.3.1でM1 Macにも正式に対応しました。

Apple Chip対応Docker Desktop for Macは、Docker公式サイトGet Started with Dockerのページからダウンロードできます。

上記ページ(Get Started with Docker)にアクセスしたら、「Download for Mac – Apple Chip」をクリックしてダウンロードします。

Apple Chip対応のDockerで、WordPressのローカル開発環境を構築

では、M1 Macに対応したDockerを使って、WordPressのローカル開発環境を構築してみましょう。
まずは以下のコマンドを実行し、開発用のディレクトリを用意します。

$ mkdir mywpsite
$ cd mywpsite 

docker-compose.ymlファイルを用意します。

$ touch docker-compose.yml

docker-compose.ymlの内容は以下のようにしましょう。

version: '3'

services:
  wp:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - 80:80
    volumes:
      - ./wordpress/wp-content:/var/www/html/wp-content
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wp_user
      WORDPRESS_DB_PASSWORD: p455w0rd

  db:
    image: mariadb
    volumes:
      - ./db_data:/docker-entrypoint-initdb.d
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wp_user
      MYSQL_PASSWORD: p455w0rd
      MYSQL_ROOT_PASSWORD: r00+p455w0rd

volumes:
  db_data:

保存したら、以下のコマンドを実行します。

$ docker-compose up

また、以下のコマンドを使う方法もありますが、こちらはまだ実験段階とのことです。

$ docker compose up

エラーが表示されたり、うまく環境を立ち上げられないときは、docker-compose upを使いましょう。

しばらく待ったら、http://localhost/にアクセスします。
このような画面が表示されれば成功です。

あとは通常の方法でWordPressのインストールを行いましょう。

運営しているWordPressサイトの内容をローカルサイトに反映させる

つづいて、実際に運営しているWordPressサイトの内容を、ローカルサイトに反映させてみましょう。

db_dataに、sqlファイルを追加します。
さらに、wp-contentディレクトリ以下を、運営しているサイトのものに置き換えます。

mywpsite
|-- db_data/
|   `-- ogc.sql
|-- docker-compose.yml
`-- wordpress/
    `-- wp-content/

docker-compose downでいったん終了し、もういちどdocker-compose upで立ち上げてみましょう。

$ docker-compose down
$ docker-compose up

http://localhost/にアクセスし、運営中のサイトが表示されれば成功です。

しかしこのままでは、リンクをクリックしたとき、実際に運営しているサイトへ行ってしまいます。
そこで「Search-Replace-DB」を使いましょう。

Search-Replace-DBは、wp-contentと同じ階層に配置して使います。
以下のコマンドでwordpressディレクトリにSearch-Replace-DBをダウンロードしましょう。

$ cd wordpress/
$ git clone https://github.com/interconnectit/Search-Replace-DB.git

docker-compose.ymlに、以下のように追加します。

version: '3'

services:
  wp:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - 80:80
    volumes:
      - ./wordpress/wp-content:/var/www/html/wp-content
      - ./wordpress/Search-Replace-DB:/var/www/html/Search-Replace-DB
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wp_user
      WORDPRESS_DB_PASSWORD: p455w0rd

  db:
    image: mariadb
    volumes:
      - ./db_data:/docker-entrypoint-initdb.d
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wp_user
      MYSQL_PASSWORD: p455w0rd
      MYSQL_ROOT_PASSWORD: r00+p455w0rd

volumes:
  db_data:

コンテナを起動したら、http://localhost/Search-Replace-DB/へアクセスしてみましょう。

この画面からデータベースを書き換え、リンク先のURLをローカルのものになおします。

Warning
The network connection you are using is transmitting your password unencrypted.
Consider using an https:// connection, or change your database password after using the script

188

というのは、httpsを使っていないよ、という警告です。ローカルの開発環境ですので、気にしなくてもいいでしょう。
私は以下のように入力しました。

  • replace 「https://original-game.com」 with 「http://localhost」
  • database name 「wordpress」
  • username 「root」
  • pass 「r00+p455w0rd」
  • host 「db」
  • port 「3306」

「Test connection」をクリックすることで、データベースに接続できるかどうかが分かります。

「Let’s go」の項目の、「Do a safe test run」をクリックすると、サイトのURLがどのように変更されるのかがわかります。

下の方を見ると、各テーブルごとに変更される部分が表示されます。
変更があるテーブルには、view changesというリンクが表示されているので、それをクリックすると、どのように変更されるのかを見ることができます。

変更に問題がなければ、「Search and Replace」をクリックします。

これでサイト内のリンクがすべて、ローカルのものに書き換えられます。

Dockerで、phpMyAdminを使う方法

つづいてphpMyAdminを使ってみましょう。
phpMyAdminはMySQLデータベースをブラウザで管理することができるツールです。

では実際に使ってみましょう。
まずdocker-compose.ymlに、以下のように追加しましょう。

version: '3'

services:
  wp:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - 80:80
    volumes:
      - ./wordpress/wp-content:/var/www/html/wp-content
      - ./wordpress/Search-Replace-DB:/var/www/html/Search-Replace-DB
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wp_user
      WORDPRESS_DB_PASSWORD: p455w0rd

  db:
    image: mariadb
    volumes:
      - ./db_data:/docker-entrypoint-initdb.d
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wp_user
      MYSQL_PASSWORD: p455w0rd
      MYSQL_ROOT_PASSWORD: r00+p455w0rd

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=db
      - PMA_USER=root
      - PMA_PASSWORD=r00+p455w0rd
    ports:
      - 3000:80
    volumes:
      - ./phpmyadmin/sessions:/sessions

volumes:
  db_data:

コンテナを起動したら、http://localhost:3000/にアクセスしましょう。

これでphpMyAdminが使えるようになりました。

まとめ

ローカルにWordPress開発環境を整えてテーマを作成するとき、やはり本来のサイトとローカルのサイトは同じものにしたいです。しかしそのためには、すこし難しい手順が必要になります。
今回は、Dockerを使って、リモートのWordPressサイトを、ローカルの環境にそのまま反映させる方法を紹介しました。

もしローカルにWordPress環境が必要な場合は、ぜひお試しください。

スポンサードリンク

関連コンテンツ

オススメ記事

【初心者向けJavaScrip入門】変数を使いこなすための、かなり詳しい解説

変数は、数値や文字列などのデータを入れておける箱です。プログラミングをはじめて、最初のほうで覚えるものですが、変数は意外と奥が深いものです。 そこで今回は、JavaScriptにおける変数の使

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

Chrome拡張機能の作り方。誰でもかんたんに開発できる!

Webサイトを見るとき、ブラウザはなにを使っていますか? Edge、Safari、Opera、firefox、色々ありますが、やはりChromeを使っている、という方はとても多いと思います。ほ

webpackでSass(SCSS)をCSSにコンパイルする最もシンプルな方法

webpackを使うと、JavaScriptをまとめることができて便利です。しかし、webpackにはたくさんの機能があり、パッケージをインストールすることで、様々な機能が使えるようになります。

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

【Unity 2D】画像のアスペクト比を固定して画面全体に表示する方法

こんにちは。私が執筆した小説「ELENA 人魚と過ごした時間」をベースとしたノベルゲームを現在Unityにて開発中です。 さて、今回はUnity2Dでのゲーム開発において、アスペクト比を固定し

【Git】リモートリポジトリへPushする方法

こんにちは、@It_is_Rです。 前回「【Git】ブランチを使って履歴を分岐させる方法」では、ブランチを使うことの便利さを学びました。第五回目の今回は、GitHubのリモートリポジトリを作成

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。管理画面をカスタマイズするこ

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です