前回、MacにDockerをインストールする方法を紹介しました。

WordPressの開発に便利なDocker（ドッカー）をMacにインストールする方法。

今回は、こちらのDockerを使ってWordPressの仮想開発環境を作っていきます。

目次

事前準備

今回は

• macOS Big sur バージョン 11.5.1
• エディタはVisual Studio Code

という環境で作っていきます。

すでに別のエディタを使っている場合は、そちらを使っていただいても構いません。

Dockerを起動

最初にDockerを立ち上げておきます。

Macであれば、Spotlight（⌘+スペース）から「Docker」と入れてReturnを押せば起動できます。

このような画面が出る場合は、黒い領域のコードを後述するVisual Studio Codeにコピペし、ターミナルで実行します。

以下の画面に変われば大丈夫です。

次に、エディタでファイルを作ります。

今回はVS Code（Visual Studio Code）を使いますので、初めて使う方は以下の手順でインストールしていただければと思います。

Visual Studio Codeのインストール方法

こちらの公式サイトにアクセスし、「Download now」をクリックします。

「Mac」をクリックします。

ダウンロードしたインストーラーをクリックします。

以下のようにFinderに表示されますので、こちらのファイルをアプリケーションフォルダにドラッグします。

これでVS Codeのインストールは完了です。

ローカル環境を作るためのファイルを用意

初めに、今回使うファイルを入れるフォルダを作っておきます。

フォルダ名は何でも構いませんが、僕は「Docker-wp」としました。

Visual Studio Codeにコードを記述

Spotlightで「V」と検索すると先ほどダウンロードしたVisual Studio Codeが出てくるかと思いますので、クリックして開きます。

「開く」をクリックします。

Visual Studio Codeを開いたら、⌘+Nで新規ファイルを作成し、⌘+Sで名前をつけて保存します。

今回は「docker-compose.yml」というファイル名で先ほど作ったフォルダの中に保存します。

作ったファイルに、以下のコードを記述します。

version: '3'

services:
   db:
    platform: linux/x86_64 # M1チップ対応のための記述
    image: mysql:5.7
    container_name: app_db
    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:
       - .:/var/www/html # ファイルの変更を反映
volumes:
    db_data:

コピペしたら、⌘+Sで保存します。

なお、「platform: linux/x86_64」という部分は、M1チップのMacでエラーが出たため追記したものです。

M1チップ以外の場合はなくても大丈夫かと思います。

後ほど、カスタマイズするテーマファイルをymlファイルが入っている先ほど作成したフォルダに入れていきます。

今回は仮のファイルとして

• index.html
• test.php

という2つのファイルを作り、「test」というフォルダに入れ、格納しました。

（今は何も入れなくても大丈夫です）

Finderで見るとこんな感じです。

ターミナルを実行

再び、Visual Studio Codeに戻ります。

上のメニューから「ターミナル」→「新しいターミナル」とクリックします。

下の方にターミナルを実行する領域が出てきますので、「docker-compose up -d」と入力し、Returnを押します。

このように実行されますので、少し待ちます。

以下のような画面になれば完了です。

WordPressに接続

ブラウザ（今回はChrome）で、「localhost:8000」と入力し、Returnを押します。

以下のページが表示されます。

日本語を選択し、下の「continue」をクリックするとWordPressの開始画面になります。

次回は、実際にDockerとエディタを使い、テーマをカスタマイズする具体的な方法をお伝えします。