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

 

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

目次

事前準備

今回は

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

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

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

Dockerを起動

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

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

 

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

Dockerでコンテナを動かすためにコードをエディタにコピペする

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

Dockerが正常に動作している

 

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

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

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

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

Visual Studio Codeのサイトで「Download now」をクリック

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

Mac用のVisual Studio Codeをダウンロード

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

インストーラーをクリックして開く  

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

Finderでアプリケーションフォルダにドラッグ

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

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

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

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

Visual Studio Codeにコードを記述

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

スポットライトでVisual Studio Codeを検索

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

「開く」をクリック

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

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

Visual Studio Codeで新規ファイルを作成・保存

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


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で見るとこんな感じです。

作成したファイルをFinderで表示

ターミナルを実行

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

作成したファイルをVisual Studio Codeで表示

 

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

Visual Studio Codeで新しいターミナルを開く

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

ローカル環境構築のためのターミナルを実行

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

Visual Studio Codeでターミナルを実行中

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

ターミナルの完了画面

WordPressに接続

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

ブラウザでWordPressに接続

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

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

WordPressの言語選択画面

WordPressの初期画面になる

 

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

サービスメニュー

Postscript執筆後記

今回のDockerを使う方法はここ最近ずっと試行錯誤していました。
なかなか上手くいかず、今日ようやくWordPressに接続することができました。
今までできなかったことができるようになると、達成感がありますね。

Something New一日一新

解散申告の別表作成
DockerでWordPressに接続

\本を出版しました/

\セルフマガジン無料送付/

Seiji Aihara / 相原 征爾

Seiji Aihara / 相原 征爾

お金・時間・やりがいなどのバランスを取り人生を楽しむことをサポートする、東京の30代税理士。ひとり社長。
ブログ「FAVPRESSO」は平日毎日更新。

得意な仕事はクラウド会計の導入・ペーパーレス化・経理業務効率化・各種シミュレーション・独立支援など。
遠方・オンライン・スポット対応可能です。
簿記がわからなくても、一から経理ができるようにお伝えします。
Windows・Mac両対応。

音楽、映画、インターネット、カレー、クラフトビールが大好き。
名刺、ロゴ、WordPressテーマ、本の表紙から音楽まで自作する、自称超クリエイティブ。

詳しいプロフィールはこちら
税理士事務所のHP・サービス一覧はこちら

著書 『独立して人生を楽しむ方法』