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

スポンサードリンク

関連コンテンツ

オススメ記事

Pythonのtkinterで、画像つきのおみくじゲームを作ろう!

さて、今日《きょう》も楽《たの》しくプログラミングを学《まな》んでいきましょう。 今回《こんかい》はPython《パイソン》のtkinterを使《つか》って、本格的《ほんかくてき》なおみくじゲ

carousel

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。 サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。 Bootstrap4には、カルーセルを

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell ) の

Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボタンの

Pug

PugでPHPが使える! gulpfile.jsをちょっと工夫するだけだよ

HTMLを書くときPugを使うととても便利なのですが、PHPを書きたいと思ったときは少し工夫が必要になります。 PugでPHPを書くためのプラグインを使う方法もありますが、使うプラグインが増えれば増

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更、そし

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

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

【Unity】Addressableを使って画像をスクリプトから表示する方法

こんにちは。私が執筆した小説「ELENA 人魚と過ごした時間」をベースとしたノベルゲームを現在Unityにて開発中です。まだまだ、時間はかかりそうですが、完成したときはよろしくお願いいたします。

homebrew

Homebrewのインストール方法を分かりやすく解説(M1 Macも対応)

みなさんこんにちは。@It_is_Rです。 Homebrewは、Mac、Linuxで使うことができる、パッケージマネージャというものです。パッケージマネージャを使うことで、ソフトウェアのインス

WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

最近SNSシェアボタンを作り直した@It_is_Rです。 せっかく作ったんだから、シェアするのだよ、みんな。 そこで今回は、Twitter や Facebook、GooglePlus、はてな

コメントを残す(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。