【Windows】Dockerを使ってWordPressの環境を簡単に構築する方法。ローカルで編集した内容をリアルタイムで確認。

WordPress

レンタルサーバー上でWordpressを構築した場合、ファイルの編集はWordpressの管理画面やFTP(FTPS)ですることになる。

この場合、ディレクトリ全体を見渡したりファイルやコードでの検索が不便。emmetの自動補完の恩恵を受けられないことも大変不満。。

エディタとして優秀なVSCodeを使ってWordpressのファイルを編集・管理するために、ローカルでプロジェクトを起動する。Dockerを使うと環境構築がとても簡単にできる。

前提条件

前提条件として、VSCodeがインストール済みで、docker-composeコマンドが実行できること。

プロジェクトディレクトリの作成

WordPressのファイルを置くディレクリを作成し移動する。例として documents > projects に wordpress-testを作成する場合は以下になる。

> mkdir ~/documents/projects/wordpress-test
> cd ~/documents/projects/wordpress-test
documents\projects\wordpress-test>

docker-compose.ymlファイルの作成

dockerコンテナを作成するためのdocker-compose.ymlファイルを作成する。

docker-compose.ymlファイルを作成しvimエディタで開く。

documents\projects\wordpress-test> vim docker-compose.yml

作成したファイルに以下をコピペする。

version: "3.7"
services:
  db:
    image: mysql:5.6
    container_name: wp_mysql
    #restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root # rootユーザのパスワード(任意に指定可)
      MYSQL_DATABASE: wp_db # WordPress用データベース名(任意に指定可)
      MYSQL_USER: wp_user # WordPress用接続ユーザ名(任意に指定可)
      MYSQL_PASSWORD: root # WordPress用パスワード(任意に指定可)

  wordpress:
    image: wordpress:latest
    container_name: wp
    #restart: always
    depends_on:
     - db
    ports:
     - "10090:80"
    environment:
      WORDPRESS_DB_HOST: db:3306 # データベースサーバ名:ポート番号
      WORDPRESS_DB_USER: wp_user # WordPress用接続ユーザ名(dbの内容に合わせる)
      WORDPRESS_DB_PASSWORD: root # WordPress用パスワード(dbの内容に合わせる)
      WORDPRESS_DB_NAME: wp_db # WordPress用データベース名(dbの内容に合わせる)
      WORDPRESS_DEBUG : 1  #デバッグモードON
    volumes:
       - ./html:/var/www/html
       
  phpmyadmin:
    image: phpmyadmin/phpmyadmin:latest
    container_name: phpmyadmin_ingrid
    #restart: always
    depends_on:
      - db
    ports:
      - 10099:80

作成するコンテナは「db」「wordpress」「phpmyadmin」の3つ。重要なポイントは「wordpress」でvolumesを設定していること。

この記述があることで、Docker上で展開したファイルをローカルと同期することができる。

    volumes:
       - ./html:/var/www/html

記述は「ホスト側:コンテナ側」となっており、ホスト側(windowsのローカルのこと)のdocker-compose.ymlがあるディレクトリにあるhtmlディレクトリとコンテナ内のvar/www/htmlディレクトリを同期する

docker-compose upを実行した時に、docker-compose.ymlと同じ階層にWordpressのデータが入ったhtmlというディレクトリが生成される。

htmlを変更すれば、PCに展開するルートディレクトリ名を変更できる。

コンテナの起動

Dockerを起動する準備ができたので、documents > projects > wordpress-testディレクトリでdocker-compose up -d を実行する。

現在のディレクトリにあるdocker-compse.ymlファイルを元にコンテナを作成する。「-d」は「–detatched」のショートオプションでバックグラウンドでコンテナを起動し続ける。

「-d」を付けない場合は、コンテナを操作するために別のターミナルウィンドウを開く必要が出てくる。

> docker-compose up -d
Docker Compose is now in the Docker CLI, try `docker compose up`

Pulling phpmyadmin (phpmyadmin/phpmyadmin:latest)...
latest: Pulling from phpmyadmin/phpmyadmin
6f28985ad184: Pull complete
(省略)
Creating wp_mysql ... done
Creating phpmyadmin ... done
Creating wp  ... done

Windowsのローカルを見てみると、volumesで指定した./htmlディレクトリにDocker上で作成したファイルが同期されているのが確認できる。

ブラウザで起動&Wordpress構築

docker psで起動中のコンテナとアクセスするためのPORTを確認する。

> docker ps
CONTAINER ID   IMAGE                          COMMAND                  CREATED          STATUS          PORTS
        NAMES
8ee52d9ec27c   wordpress:latest               "docker-entrypoint.s…"   31 minutes ago   Up 31 minutes   0.0.0.0:10090->80/tcp   wp
8f227018b458   phpmyadmin/phpmyadmin:latest   "/docker-entrypoint.…"   31 minutes ago   Up 31 minutes   0.0.0.0:10099->80/tcp   phpmyadmin
fd1e349d1bb2   mysql:5.6                      "docker-entrypoint.s…"   31 minutes ago   Up 31 minutes   3306/tcp                wp_mysql

PORTSは「ホスト側のポート番号:コンテナ内のポート番号」となっているので、ここでは左側のホスト側のポートを確認する。

wordpressはlocalhost:10090。phpmyadminはlocalhost:10099でアクセスできる。

localhost:10090にアクセスするとWordpressの構築画面が表示される。

日本語を選択しContinue。

必要な情報を入力して、Wordpressをインストールをクリック。

テストサイトの場合は検索エンジンでの表示で、インデクスしないようにするにチェックを入れておく。

ログインするとWordpressのダッシュボードが開く。

ページも開ける。

ローカルでページを編集する

適用しているテーマ毎に作業するディレクトリが異なるので、まずは現在のテーマを確認する。

外観 > テーマ を選択。

有効となっているテーマ名を確認する。現在は「Twenty Twenty-One」。

使用中のテーマのディレクトリを開く。

html > wp-content > themes > twentytwentyone

ヘッダーの編集

例としてヘッダーを簡単に編集してみる。テーマディレクトリの中のheader.phpを開く。

html > wp-content > themes > twentytwentyone > header.php

<head>
	<!-- 追加 -->
	<meta name="description" content="テスト">
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<?php wp_head(); ?>
</head>

<meta name=”description” content=”テスト”>を追加。

ブラウザで確認してみるとローカルで編集した内容が反映されている。

ローカルのエディタで編集した内容が即時反映できることが確認できた。

phpMyAdmin


phpMyAdminも使える状態になっている。アクセスするには、docker-compose.ymlで指定した、ホスト側のポート番号にアクセスする。ここでは、localhost:10099。

アスセスすると以下のようにログイン画面が表示される。

ユーザー名とパスワードはdocker-compose.ymlで指定したものを使う。

phpmyadminにログイン

ログイン後はテーブルを確認・編集することができる。

初期状態では、このログインユーザーが操作できるのは、docker-compose.ymlで作成したデータベースのみ(ここではwp_db)になる。データベースを新たに生成する権限が与えられていない。

データベースを作成する権利など、現在ログインしているユーザーの権限を変更したい場合は以下を参照。

【MySQL】ユーザーにDB作成権限を付与する方法。対話モードへのログイン方法と権限の変更方法|データベースを作成する権限がありませんの対処法

タイトルとURLをコピーしました