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環境が必要な場合は、ぜひお試しください。

スポンサードリンク

関連コンテンツ

オススメ記事

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

キーボードで画像を動かすよ!

【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回は、りこちゃんの画像をクリックすると、前に一歩動くというのをJavaScri

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

HTML CSS

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

サイトを作る時、円形のパーツを作りたい時ってよくありますよね。 円はCSSで簡単に作ることができます。 さらに今回はCSSで作成した円の中央に文字を置く方法も紹介します。 CSSでの

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。【準備編】

いつもどうもです。@It_is_Rです。 少し前まで、私は FC2ブログ を使っていました。 やはり個性を大切にしたい私にとって、用意されたテンプレートを使うことに抵抗がありました。 「

文字を表示するクラスを作ろう!

【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript講座です。このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。シリーズの一覧はこちらをご覧ください。 さて、ゲーム作成で重要なキ

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

オブジェクトを使ってみよう!

【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう!前回の講座《こうざ》では、HTMLやCSS、JavaScriptを分けて管理《かんり》す

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

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