Web開発 未分類

【簡単】DockerでWordPress開発環境を爆速構築

更新日:

こんにちは、ケースケ(@keisuke555_eng)です!

先日、Dockerについてざっくり勉強しました。

今回はその復習としてWordPress環境の構築手順を整理しておきます。

今回参考にしたサイトはDocker-docs-jaのWordPressクイックスタートです。

先に言っておきます!

めっちゃ爆速で構築できます!(確認まで含めて5分程度)

  • WordPressでWebサイト制作したいけど環境構築が面倒…
  • 開発用PCにいろんな環境が混在してワケわからん!

こんなお悩みを抱えた方の助けになればと思います。

それでは、実際に手順をご紹介していきます!

前提条件

まずはいくつか前提条件をお伝えしておきます。

  1. 今回紹介するのはMacでの構築手順
  2. Docker for Macをインストール済み
  3. Visual Studio Codeをインストール済み

Docker for Macのインストール

Docker for Macは、docker公式からダウンロードできます。

「Docker Desktop」のダウンロードリンクが表示されると思うので、「Download for Mac」をクリックしてダウンロード&インストールしてください。

Visual Studio Codeのインストール

Microsoftの公式ページから入手可能です!

Visual Studio Codeのダウンロードページへ移動し、「Mac」のダウンロードリンクからダウンロード&インストールしてください。

Docker Composeを使ったWordPress環境の構築手順

それでは、WordPress環境の構築手順をひとつずつ解説していきます。

以下の手順に沿って作業を進めます。

  1. ターミナルを起動
  2. 空ディレクトリを作成
  3. 作成したディレクトリに移動
  4. docker-compose.ymlを作成
  5. docker-composeコマンドを実行
  6. ブラウザで動作確認

1. ターミナルを起動

Mac用のコマンド実行ツールであるターミナルを起動します。

※僕のPCの場合は、Launchpadの「その他」の中にターミナルが格納されていました。

DockからLaunchpadを選択して…
「その他」の中にありました!

2. 空ディレクトリを作成

任意のディレクトリでプロジェクト用の空ディレクトリ(フォルダ)を作成します。

ターミナルを使う場合は、次のコマンドを実行してください。

mkdir wordpress

※コマンドの意味:「wordpress」というディレクトリを作成

3. 作成したディレクトリに移動

ターミナルにて、手順2で作成したディレクトリへ移動します。

cd wordpress

※コマンドの意味:カレントディレクトリを「wordpress」というディレクトリに設定

ちなみに…

ターミナル上でディレクトリを指定する際、Finderから対象のディレクトリをドラッグ&ドロップすると簡単に指定できます。あとはReturnキーを押すだけ!

Finderの「wordpress」フォルダを右下のターミナルにドラッグ&ドロップ!

4. docker-compose.ymlを作成

対象のディレクトリにdocker-compose.ymlを作成します。

ファイルに記述する内容は次のとおりです。(コピペして作成してみてください)

version: '3'

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

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

db:のポートフォワーディング(ports:)と、wordpress:のボリュームバインド(volumes:)の設定を追加しました。

僕はまだvimに慣れてないので、VSCode上で作成しました。

VSCode上で docker-compose.ymlを記述できます。

記述内容のざっくり説明

version:'3'は、docker-composeのバージョン指定になります。

とりあえず3を指定しておけば現状問題なさそうです。

services:には、db:wordpress:の記述がありますが、任意の名前指定なので、他の文字列でも構いません。

db:は、使用するイメージがmysql:5.7で、データを/var/lib/mysqlに格納する。(今回作成したディレクトリ配下のdb_dataフォルダ内にデータが格納されます)

environmentにはDB接続用のユーザやパスワードを指定しています。

wordpress:は、depends_on:でサービス起動の順序を指定しています。

※この場合、wordpressサービスはdbサービスに依存するので、先にdbサービスを立ち上げてくださいという指定になります。

あとは起動イメージにwordpress:latest、ポートを8000に指定して、environmentでdbへの接続情報を設定しているという感じ。

docker-compose.ymlって何よ?

Docker Composeを使用して仮想環境を立ち上げる際に、「どんなソフトのどんなバージョンをどんな設定で立ち上げるか」を記述した設定ファイルです。

次の手順のコマンドを実行した際に、このファイルを参照してDockerイメージのダウンロードや設定処理が行われます。

このファイルはyml(ヤムル)形式で記述されており、あまり慣れないとは思いますが、階層構造で記述しているのでなんとなく分かるようにはなっていると思います。

5. docker-composeコマンドを実行

設定ファイルの作成が完了したら、ターミナルで次のコマンドを実行して仮想環境を立ち上げます。

docker-compose up -d

※コマンド実行時、ディレクトリ内のdocker-compose.ymlファイルを参照して仮想環境を構築します。

この場合、docker-compose.ymlに記述したとおり、MySQL5.7とWordPress最新版のコンテナが起動します。

コマンド実行すると↑の感じで文字がズラーっと流れて処理が完了します。

6. ブラウザで動作確認

WordPress環境が正常に動作したか、ブラウザからアクセスして確認します。

URLは次のとおりです。

http://localhost:8000

さっそくアクセスしてみると…

ブラウザで「localhost:8000」にアクセス

うおっ!!ちゃんと表示できた!感動ですね!

言語を「日本語」で選択してContinueをクリック↓

サイトのタイトルや管理ユーザーの情報を設定します。

WordPressの初期設定画面が出ました!

必要情報を入力して続行↓

「成功しました!」の表示が出てくれて嬉しい!

「成功しました!」どうやら成功したみたいですw

あのログイン画面です。

続いて、ブロガーならお馴染みのログイン画面でユーザー名とパスワードを入力して進むと↓

ブロガーなら皆が知ってる画面!

おめでとうございます!!

WordPressの管理コンソールまで到達しました!

とりあえずWordPress環境構築としては完成、かな?

WordPress環境を終了するには…

立ち上げたWordPress環境を終了したい場合は、ターミナルで次のコマンドを実行します。

docker-compose down

※WordPressデータベースは残るので、設定した内容は保持されます。

まとめ

docker-composeでWordPress環境を爆速構築できました!

正直、ここまで簡単に立ち上がるとは想像してなかった。

けっこう感動しません?僕はめっちゃ感動しました!

新人時代、環境構築だけで1日、さらに悪ければ数日かかって泣きながら作業してたあの頃が懐かしい…良い時代になったものです。(しんみり)

WordPressで開発する上で、あと必要になりそうなのはDB接続用のツールとかかな?

phpMyAdminとか、MySQL Workbenchとか、今度そちらの設定方法もご紹介しますね。

それでは、また。

-Web開発, 未分類
-, , ,

Copyright© みちのくBASE , 2021 All Rights Reserved