前回の続きです。
[Mac+DockerでphpStormを使いWordPressテーマを一から作る（1/3）][1]
[1]:https://qiita.com/jszk/items/13bc63bf9d206cc342c1
ここまでに以下のステップを踏んできました。
- XCodeのインストール(1/3)
- Homebrewのインストール(1/3)
- node(npm)+node-sassのインストール(1/3)
それではさっそく、続きを行ってみましょう。
ゴール
Docker Desktop for Mac でWordpress環境を作り、スターターテーマのunderscores(_S)を使ったテーマ開発ができるようにする。
cssはSassを使い、phpStorm側でコンパイルが出来るようにする。
ついでにphpMyAdminも使えるようにする。
前提条件
- MacOS Catalina(10.15) ※セットアップとデータ移行が済んだ状態
- phpStorm(2020.1)
#ステップ
XCodeのインストール(1/3)Homebrewのインストール(1/3)node(npm)+node-sassのインストール(1/3)- Docker Desktop for Mac のインストール（(2/3)
- Docker-composeによるコンテナの構築（2/3）
- underscores(_s)でのスターターテーマの作成とファイルの設置(3/3)
- phpStormでのSassウォッチャーの登録(3/3)
Docker Desktop for Mac のインストール
DockerのサイトにアクセスしてDocker Desktopをダウンロードします。
アクセスするとアカウント登録が求められるのでまずはアカウントの作成から。
アカウントの作成が完了し、サインインすると以下のような画面が表示されます。
Win用とかMac用といったアーキテクチャ毎のダウンロードボタンは出ないので、そのままダウンロードボタンをクリック。
するとDocker.dmgのダウンロードが開始されるので、ダウンロードが完了したらマウントします。
マウントしたら以下のようなウインドウが開くので、Applicationsフォルダにそのままポイっと。
その後、Applicationsフォルダ、またはLaunchpadから起動。
起動したらメニューバーにクジラのアイコンが出現します。ドロップダウンメニューからSign In メニューから再度ログイン。
これでDockerのインストールはひとまず完了です。
docker-composeによるコンテナの構築
Docker Desktopをインストールしたら付随してdocker-composeも一緒にインストールされます。
Docker-composeについては
[「さくらのナレッジ」のこちらのページで詳しくご説明いただいているので一読される事をお勧めします。][2]
[2]:https://knowledge.sakura.ad.jp/16862/
このdocker-composeを使うと、"docker-compose.yml" という名称のYAML形式のファイルを指定する事で指定内容に沿ったコンテナがコマンド一つで一気に作られます。
とても便利。
さて私は当初はnginxまたはApacheのコンテナとphp、MySQLのコンテナを創り、phpの展開ディレクトリにWordPressを配置すればいいんじゃ無いか？と思っていました。
今回は /Users/<ユーザー名>/Documents/ の下に環境を作ろうとしていました。
具体的にはこんな感じ。（※細かいところは割愛しています）
<dockerコンテナを格納するディレクトリ名>/
+docker-compose.yml
+php/
| +html/
| +wordpress/
+Mysql/
+nginx/
php/html をドキュメントルートとしてその配下にオフィシャルからダウンロードしてきたWordPress最新版を設置。
そう考えていたのですが、何度やってもDBとの接続が出来ない。。
phpini() を見たところ、PDOが無い事が分かったのでそのインストールも試しましたが結果は変わらず。
そこで他の事例を見てみるとどの事例でも Docker-hub で提供されている WordPressを使っている。
どうやらそちらが正解らしい.
と気がつくまでにはそこそこの時間を消費していました。。
そして最終的には以下のディレクトリ構成となりました。
<dockerコンテナを格納するディレクトリ名>/
+docker-compose.yml
+db/
+www/
+html/
+配下にWorPress関連ファイル一式
そして docker-compose.yml の内容は以下の通りです。
version: '3.7'
services:
wordpress:
image: wordpress:latest
ports:
- 80:80
volumes:
- ./www/html:/var/www/html
depends_on:
- db
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
WORDPRESS_DB_NAME: wordpress
db:
image: mysql:5.7
container_name: mysql
ports:
- 3306:3306
volumes:
- ./db:/var/lib/mysql
environment:
MYSQL_ROOT_PASSWORD: secret
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
phpmyadmin:
image: phpmyadmin/phpmyadmin:latest
ports:
- 8888:80
depends_on:
- db
phpやnginxに関する記述はありませんが、Wordpressのコンテナを立ち上げる事で自動的に一緒に用意がされるようです。
services: の次にある wordpress: やｄｂ： はコンテナ名を表しています。
それぞれの image: で展開する内容を指定します。具体的なバージョンを指定する事も出来ますし、
wordpressコンテナにあるように:latest と付けると最新版を自動的に展開してくれます。
volumes： では展開する場所を指定します。
depends_on： では依存するコンテナ名を指定します。ここではWordPressのDBとしてMySQL5.7のコンテナを作成し、
そのコンテナ名を db としているので、コンテナ名には db を指定します。
あとは字の通り、MySQLの設定などになります。
そして重要なのは ports: の部分。私の環境では特に他で80番をしようしていないので 80:80 としていしました。
これで http://127.0.0.1/ にアクセスすると、WordPressが展開されます。
ついでにphpMyAdminも入れておこうと、こちらも docker-hub から最新版を取得し、展開させています。
こちらは ports: を 8888:80 としったので http://127.0.0.1:8888 でアクセスが可能になっています。
あとｄｂのディレクトリにはコンテナを起動するとMySQL関連のファイルが配置されます。
ここまで来たら、あとは起動だけ。
ターミナルで docker-compose.yml が配置されたディレクトリに移動し以下のコマンドを実行します。
docker-compose up -d
初回は諸々のダウンロードで少し時間を要しますが、それでも数分で終わります。
あとは http://127.0.0.1/ にアクセスしてWordPressのセッティング画面が表示できたらOKです。
ついでに今回は phpMyAdmin も入れているので http://127.0.0.1:8080 の確認も行いましょう。
docker-compose.yml で既にWordPress用のDBおよびユーザーが作成されているはずです。
初回の起動は先述のコマンドで行いますが、２回目以降はメニューバーにあるDockerアイコンから "Dashbord" を選択すると
一度作成したコンテナが表示されるので、そこからでも実行が可能です。
今回はここまで。
次回はwordpressのunderscoresにsassifyオプションを付けて、phpStormでSassのウォッチャーを設定し、自動コンパイルの環境を創ります。
※2020/7/16 16:20 続きをアップしました。
[Mac+DockerでphpStormを使いWordPressテーマを一から作る（3/3）][3]
[3]:https://qiita.com/jszk/items/66c2aafbb3e556f30768