VSCodeのdevcontainerでwordpressを使うメモ

VSCodedevcontainerwordpressを使うメモ

単純に追加するだけになるけど、メモを残す。

VSCodeのバージョンは 1.47.0

devcontainerの初期設定

devcontainerの作成時は、PHP7 & mariaDBを選ぶ。これにwordpressを追加するだけで済むので、らく。

.devcontainerフォルダに自動で生成されるファイルを少しいじっていく。

devcontainer.jsonの設定

まずは、devcontainer.jsonから。

ユーザをrootでなくしておくだけ。(別にrootのままでもいいけど一応変える。).devcontainer/devcontainer.jsonの一番下の行をアンコメント。

{
    "name": "PHP 7 & MariaDB",
    "dockerComposeFile": "docker-compose.yml",
    "service": "php",
    // Set *default* container specific settings.json values on container create.
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },
    // Add the IDs of extensions you want installed when the container is created.
    "extensions": [
        "felixfbecker.php-debug",
        "felixfbecker.php-intellisense",
        "mtxr.sqltools"
    ],
    "workspaceFolder": "/workspace",
    // Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
    // ここのコメントを外す
    "remoteUser": "vscode",
}

docker-compose.ymlの設定

次はdocker-compose.ymlを調整する。

大まかにはwordpressコンテナを追加して、ポート設定をいじるだけ。 データベースはvolumeを利用する。

version: "3"

services:
    php:
        build: .
        volumes:
            - ..:/workspace:cached
        # phpコンテナではアクセスしないのでポートはEXPOSEしない。
        # EXPOSEするときはポート重複に気をつける。
        # ports:
            # For use with PHP (e.g. `php -S localhost:8080`)
            # - "8080:8080"
        command: sleep infinity
    wordpress:
        image: wordpress:5
        ports:
            - "8080:80"
        environment:
            WORDPRESS_DB_HOST: mariadb:3306
            WORDPRESS_DB_PASSWORD: 秘密パスワード
        volumes:
            # wordpressのディレクトリは、ルートのwprootディレクトリにする。(ローカルを使う)
            - ../wproot:/var/www/html
    mariadb:
        image: mariadb:10.4
        environment:
            MYSQL_ROOT_PASSWORD: 秘密パスワード
        volumes:
            - db:/var/lib/mysql

volumes:
    db:

することをまとめれば、

  • phpコンテナの設定はポートだけコメントアウト。
  • mariadbコンテナはvolumesの設定を追加。追加しないとDBがコンテナと一蓮托生になってしまう。
  • wordpressコンテナは新規追加。

という形になる。(と思う。デフォルトを失念したため少し違うかもしれない。)

Dockerfileはそのまま

devcontainerを作成すると、Dockerfileも生成されるが、これはPHPコンテナのビルドファイルなのでそのままでいい。

devcontainerをリビルド

VSCodeのウィンドウ左下のリモート接続のアイコンからdevcontainerをリビルドすれば、wordpressも含まれた状態でリビルドされる。

リビルドが終了後、localhost:8080などでアクセスすればWordpressの初期設定画面が開かれる流れになる。しかし、ここで問題が発生した。

DBと接続できないエラー

ページにアクセスすると、Error establishing a database connectionなどというエラーが表示されていた。(表記に揺らぎがあるかも)

コンテナのログを見ると、確かにDBへの接続がうまく行っていないように見えた。

そこで、docker-compose.ymlを色々と調整したりしたが、いくら調整してリビルドしてもうまくいかない。

wordpressコンテナの再起動で直る

そこで、ビルド後の走っている状態で、wordpressコンテナをリスタートすると、DBの接続はうまく行った。おそらく、リトライの回数制限前に接続に成功したためか?

コンテナの再起動は、Docker Desktopのダッシュボードを開いて、対象コンテナを探し、マウスオーバーでリスタートのようなボタン(こんなの-->🔄)が表示されるので、それをクリックするだけで再起動できる。

とりあえず、普通にwordpressの初期設定画面にいけた。

2回目以降のcompose起動時にはリスタートさせずにDBの接続に成功しているのでよくわからない。

後書き

とりあえず構築はできた。もっと他の方法があるような気もするが、まぁよし。

wordpressのプラグインを作ろうかと思ったのだが、違う解決法の方がいい気がしたので、これは環境構築だけのメモとなる。

以上。

広告

WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第3版] 〈WordPress 5.x/Gutenberg対応〉 | 水野 史土 |本 | 通販 | Amazon
Amazonで水野 史土のWordPressユーザーのためのPHP入門 はじめから、ていねいに。 〈WordPress 5.x/Gutenberg対応〉。アマゾンならポイント還元本が多数。水野 史土作品ほか、お急ぎ便対象商品は当日お届けも可能。またWordPressユーザーのためのPHP入門 はじめから、ていねいに。 ...
タイトルとURLをコピーしました