BLOG MENU

【入門】Dockerで環境構築｜WordPress環境をローカルPCに作ろう！

Webサイトの制作を進めるために必要なのが「ローカル環境」。

今回は、Dockerを使用してローカル環境を構築する手順を説明します。この手順を実行すると、5分程度で環境構築は完了です。ぜひ、手元のPCで実際に試しながら読んでください。

それでは、始めましょう！

Dockerで構築する環境の概要

今回、Dockerを使用して立てる環境は「LAMP&Wordpress&phpMyAdmin」が揃った環境となっています。

詳細情報は以下の通りです。

PHP 8.0.28
Apache 2.4.56 (Debian)
mysql 8.0
Wordpress 6.2

環境構築手順

Dockerによる環境構築は以下の6ステップです。

Docker Desktopをインストール
Docker Desktopを立ち上げる
docker-compose.ymlファイル入れるディレクトリを作る
環境構築を始めるコマンドを実行
「docker-compose up -d」コマンドを実行
完成した環境の確認

Step1　Docker Desktopをインストールする

Docker docsから、お使いのOSに合ったDocker.dmgファイルをダウンロードしてください。Mac、Windows、Linuxのいずれかですね。

Docker.dmgファイルがダウンロードできたら、インストールします。Macの場合は、ファイルをダブルクリックして開いて、Dockerのアイコンをドラッグ＆ドロップするだけです。

Step2　Docker Desktopを立ち上げる

インストールができたら、Dockerのアイコンがあるはずです。これをクリックして、Dockerを立ち上げてください。

設定はデフォルトでOK。「Finish」をクリックします。

以下の画面になったら、起動完了です。

Step3　docker-compose.ymlファイル入れるディレクトリを作る

WordPress環境を立ち上げるために新しくディレクトリ（フォルダ）を用意します。WordPress環境に必要な各種ファイルと、docker-compose.ymlファイルが格納される場所です。

docker-compose.ymlファイルとは？

ワードプレス環境を作るための命令が書かれているファイルです。このファイルの内容を実行して環境構築を行います。

どこに作ってもいいですが、Cドライブに近いところがおすすめです。今回は「Macintosh HD > ユーザー > user > パブリック」に作りました。

フォルダの名前はなんでもいいですが、あとで見てわかるようにしておきましょう。下の画像では「docker_test」としてあります。

Step4　docker-compose.ymlファイルを作る

作成したディレクトリ（フォルダ）内に「docker-compose.yml」ファイルを用意します。

お使いのテキストエディタを使って、新しくファイルを作成。名前を「docker-compose.yml」とします。VScodeでやるとこんな感じ。

ディレクトリ内にファイルが入りました。びっくりマークがついていますが、気にせずでOKです。

ここまでできたら、今作った「docker-compose.yml」ファイルに以下のコードをコピペして「保存」してください。

version: "3.7"
services:
 db:
  image: mysql:8.0
  container_name: mysql8
  restart: always
  environment:
    MYSQL_ROOT_PASSWORD: password # rootユーザのパスワード
    MYSQL_DATABASE: db_local # WordPress用データベース名
    MYSQL_USER: wp_user # WordPress用データベース接続ユーザ名
    MYSQL_PASSWORD: password # WordPress用データベース接続パスワード
 WordPress:
  image: wordpress:latest
  container_name: wordpress
  restart: always
  depends_on:
     - db
  ports:
     - 10090:80
  environment:
    WORDPRESS_DB_HOST: db:3306 # データベースサーバ名：ポート番号
    WORDPRESS_DB_USER: wp_user # WordPress用データベース接続ユーザ名(dbの内容に合わせる)
    WORDPRESS_DB_PASSWORD: password # WordPress用データベース接続パスワード(dbの内容に合わせる)
    WORDPRESS_DB_NAME: db_local # 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

Step5　「docker-compose up -d」コマンドを実行

コマンドプロンプトを開いてください。「コマンドプロンプトって何？」という方のために、開き方を書いておきます。

Macの場合：Finder で「アプリケーション」＞「ユーティリティ」フォルダ内の「ターミナル」をダブルクリック
Windowsの場合：スタートボタンからアプリ一覧の「Windows システムツール」内の「コマンドプロンプト」をクリック

コマンドを実行していきましょう。まずはymlファイルのあるディレクトリに移動します。コマンドは以下のとおり。

cd [新規作成したディレクトリへのパス]

ここで注意するのは「ディレクトリへのパスの書き方」。今回は「cd /Users/user/Public/docker_test」となります。cdの後ろに半角スペースがあるので注意。

Macでのディレクトリパスの取得方法

Macでディレクトリパスを取得するには、対象のディレクトリ（フォルダ）を開いた状態で「command + option + c」でコピーできます。コピーしたら「command + v」で貼り付けてください。

実行してうまくいくと、下の画像のように移動先のフォルダの名前が表示されます。

ここまでできたら、以下のコマンドを実行。環境構築が始まります。

docker-compose up -d

うまくいかなかったら？

Dockerを起動してあるかチェックしてください。起動していないと命令が実行されません。私はこれで1時間悩みました。

正常に動くと、コマンドプロンプトは以下のようになります。

環境構築には時間がかかりますので待ちましょう。完了するとDockerは以下のようになります。

ディレクトリにはWordPress環境に必要なファイルが格納されています。下の画像では「html」です。

Step6　完成した環境の確認

上のような状態になったら、phpMyAdminのURLにアクセスします。次のURLにアクセスしてください。
phpMyAdmin：http://localhost:10099

以下のようなページが開けばOKです。

次にWordPressの画面をチェックします。以下のURLにアクセスしてください。
WordPress：http://localhost:10090

下のページが表示されれば環境構築は完了です。おつかれさまでした！

まとめ

以上、DockerでWordPressのローカル環境を構築する方法をお伝えしました。

Dockerはローカル環境を作成するのに非常に便利なツールです。使い方さえ覚えてしまえば、Wordpressの他にもさまざまな環境を構築することができます。

Dockerをうまく活用して、環境構築を手軽なものにしていきましょう！

Reactの環境を作りたい方はこちらの記事をご覧ください。今回の記事がわかったなら、すんなり理解できるはずです。

【DockerでReactの環境構築】エンジニア1年生と学ぶコンテナ構築までの手順

基本的なプロンプトはこちらの記事にまとめてあります。

【Dockerとは？初心者のためにメリットと基本的な使い方を解説

この記事を書いた人

クーシーブログ編集部

1999年に設立したweb制作会社。「ラスクル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。