[コピペでOK!!]WordPressのローカル環境をDockerで!![M1Mac対応]

Progateやドットインストールを始め、Web制作で案件を受けてみたい！と言う方は多いかと思いますが、WordPressでのテーマの作り方などの勉強はどのようにしていますか？

この記事では上記のように思っている方に向けて自分のPCに使い捨てのWordPressの環境を作成する方法を解説していきます！

今回の大まかな手順です。

また、自分で現在運用しているWordPressサイトと同じ見た目、データの環境をローカルでも扱いたい場合は、別の手順が必要になります。そちらについても追加で解説しています。

ソースコードをgithubで公開しています。

①Dockerをインストールする

まずはご自身のPCにDockerをインストールしていきましょう。すでにインストール済みの方はこの章は飛ばしてしまって構いません。

Docker公式サイト

上記からご自身のPCの環境に合ったものをインストールしましょう。

もし手順が分からない場合は、Macの方はこちらのサイト、Windowsの方はこちらのサイトを参照してください。

DockerをインストールしたらDockerを起動をしておきましょう。

Dockerがしっかりとインストールされており、起動している場合、

$ docker version

としてDockerのバージョンが返答されてきます。

②Dockerファイルを作成

次にwordpressディレクトリにdocker-componse.ymlというファイルを追加し、それを修正していきます。

以下をコピペしてください。

• M1 Mac以外を利用している方

version: '3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
volumes:
    db_data:

 

• M1 Macを利用している方

version: '3.3'

services:
  wordpress:
    image: wordpress:latest
    container_name: wp
    depends_on:
      - db
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./:/var/www/html

  db:
    image: mariadb
    container_name: wp_mysql
    ports:
      - "4306:3306"
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

volumes:
    db_data:

 

M1とそれ以外の違いはデータベースのイメージをmysqlを利用しているか、mariadbを利用しているかです。

M1 Macではmysqlのイメージを利用するとエラーが発生し対処方法が少しややこしいのでmariadbで置き換えているという感じです。こちらのサイトでわかりやすく解説されています。

それでは準備が完了しました。

以下のコマンドを打って見てください！

$ docker-compose up -d

 

これを打つだけです！実際に、

http://localhost:8000/

にアクセスしてみてください。以下のような画面になっていると思います！！

ユーザー名などの情報を入力することでWordPressの管理画面へログインすることができます。ここからはローカルの環境なので、自由に扱ってしまって大丈夫です！

もしWordPressのテーマをいじりたいときは、

wp-content > themes > twentytwenty のように辿ってください。

例 twentytwentyテーマのヘッダーを修正する場合

まずは外観→テーマからtwentytwentyのテーマに変更しておいてください。

VScodeなどのエディタやvimなどを利用して以下のように修正してください。

上記のように新たに、

<meta name=”description” content=”テスト”>

という文言を追加してみてください。

ブラウザで検証ツールを利用すると、しっかりと即時反映されていることがわかります！

 

ローカル環境をやり直したいとき(削除するとき)

まず、以下のコマンドでコンテナを終了します。

$ docker-compose down

その後、また

$ docker-compose up -d

を行うことでもう一度環境をやり直すことができます！！

自分のWordPressサイトと同じ環境を作りたい方

今までは真っ新なWordPress環境を作る方法について述べてきましたが、自分でWordPressサイトを運用していて、それのコピーをローカルサイトに反映したいということもありますよね？

その場合にどうするかについてここから解説していきます！！

ディレクトリの準備

次にPCの適当な場所に今回環境構築をするためのディレクトリを作成しておきましょう。今回はmylocal-wordpressというディレクトリの中で作業していきます。

docker-compose.ymlを作成し、コマンドを打つところまでは一緒です。

docker-compose.ymlファイル

version: "3.3"

services:
  wordpress:
    image: wordpress:latest
    container_name: wp
    depends_on:
      - db
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wordpress:/var/www/html

  db:
    image: mariadb
    container_name: wp_mysql
    ports:
      - "4306:3306"
    volumes:
      - ./db_data:/docker-entrypoint-initdb.d
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

volumes:
  db_data:

 

$ mkdir mylocal-wordpress
$ cd mylocal-wordpress
$ touch docker-compose.yml
$ mkdir db_data
$ mkdir wordpress

 

そして、新たに「db_data」というフォルダを作成しましょう。現在のディレクトリの状況は以下のようになっているかと思います。

.mylocal-wordpress
├── db_data
├── wordpress
└── docker-compose.yml

自分のWordPressサイトのデータを持ってくる

次に「wp-content」、「wp-config.php」を自分のWordPressサイトのものに置き換えます。

やり方は利用しているレンタルサーバーにもよるのですが、mixhost場合、

「cPanel」にログイン後、「ファイルマネージャー」→「public_html」として、「wp-content」を右クリックします。

「Compress」を押し、「wp-content」をzipファイルとして圧縮します。zipファイルにしたのち、このzipファイルをダウンロードします。

また、「wp-config.php」もダウンロードしておきます。

自分のpcにダウンロードしたら先ほど作成していたディレクトリの「wordpress」へ置きます。

今のディレクトリ状況は以下のようになっているはずです。

.mylocal-wordpress
├── db_data
├── wordpress
│   ├── wp-content
│   └── wp-config.php
└── docker-compose.yml

 

次に、「db_data」の中身を自分のサイトのものに置き換えましょう。

ご自身が契約しているレンタルサーバーから「phpMyAdmin」へアクセスしましょう。mixhostの場合は「cPanel」からアクセスできます。

「実行」を押しエクスポートされたファイルを「db_data」へおきます。

現在のディレクトリ構造は以下のようになっているはずです。

.mylocal-wordpress
├── db_data
│    └── exportしてきたsqlファイル名.sql
├── wordpress
│   ├── wp-content
│   └── wp-config.php
└── docker-compose.yml

wp-config.phpを編集する

ダウンロードしてきた「wp-config.php」を少し編集します。

上記のように、

DB_NAME, DB_USER, DB_PASSWORD, DB_HOST

を編集してください。

この状態で一旦、

$ docker-compose up -d

をしましょう。

このように

http://localhost:8000/

へアクセスすると、自分のサイトと同じような見た目のWordPressサイトがローカル環境に建てられました！！

URLを書き換える

しかし、上記のサイトの状態だとリンクをクリックした際に本番環境の実際の自分のサイトにアクセスしてしまいます。

そこで、「Search-Replace-DB」というツールを利用してリンクをローカルのものに入れ替えます。

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

とし、

docker-compose.ymlファイルに少し加筆します。

version: "3.3"

services:
  wordpress:
    image: wordpress:latest
    container_name: wp
    depends_on:
      - db
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wordpress:/var/www/html
      - ./wordpress/Search-Replace-DB:/var/www/html/Search-Replace-DB  ### ここを付け加える

  db:
    image: mariadb
    container_name: wp_mysql
    ports:
      - "4306:3306"
    volumes:
      - ./db_data:/docker-entrypoint-initdb.d
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

volumes:
  db_data:

 

この状態で、

$ docker-compose down
$ docker-compose up -d

をしたあと、

http://localhost:8000/Search-Replace-DB/

へアクセスします。

とします。

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

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

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

おまけ: ローカルでもphpMyAdminを利用したい場合

ローカルでもphpMyAdminを利用したいという場合も補足で解説しておきます。phpMyAdminをローカルで利用したい場合は、

version: "3.3"

services:
  wordpress:
    image: wordpress:latest
    container_name: wp
    depends_on:
      - db
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wordpress:/var/www/html
      - ./wordpress/Search-Replace-DB:/var/www/html/Search-Replace-DB

  db:
    image: mariadb
    container_name: wp_mysql
    ports:
      - "4306:3306"
    volumes:
      - ./db_data:/docker-entrypoint-initdb.d
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

### 以下を追加

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=db
      - PMA_USER=wordpress
      - PMA_PASSWORD=wordpress
    ports:
      - 3000:80
    volumes:
      - ./phpmyadmin/sessions:/sessions

volumes:
  db_data:

 

上記のように追記し、

http://localhost:3000

へアクセスしてみてください！

これで完成です！！！！

自由にローカル環境のWordPressで遊びましょう！！