3度目のブロック開発環境(Docker Desktopとcreate-block)

Cat WEBサイト構築Tag , by cubismer

またまた期間が空いてよくわからなくなったので、メモ的に3度目のブロック開発環境のメモ書きです。久しぶりなのに加えて使うものが少し違うので時間かかりました。

前提

  • WPのブロック開発環境をMacのローカルに作る
  • Docker Desktopを使う
  • @wordpresscreate-blockを使う

ちなみに以前の記事は以下ですが、当然ながら古いです。(※古い順に並んでいます)

  1. ブロック開発の環境構築におけるwp-scriptsとCreate Guten Blockのメモ – WEBUTUBUTU
  2. @wordpress/wp-env と @wordpress/create-block で簡単にブロック開発環境を作る – WEBUTUBUTU

手順

  1. Docker Desktopをインストールして、開発用のディレクトリに移動(WP自体が入る想定のディレクトリ)
  2. docker-compose.ymlを作成
  3. docker-compose up -dで環境構築
  4. Pluginのディレクトリができるのでそこに移動
  5. @wordpress/create-block(Create Guten Block)をインストール
  6. 作成したプラグインのディレクトリに移動して、作業して、$ npm run buildを実行してビルド
  7. http://127.0.0.1:8000にアクセスして確認
  8. docker-compose downで終了

今回手順的に重要なのは以下2点。

  • docker-compose.ymlでGUIとして扱えるプラグイン用のフォルダを作り、その中に@wordpress/create-block(Create Guten Block)をインストール
  • wp-envは不要(多分)

Docker Desktopに関してはいろいろなページで説明されているので省きます。
@wordpress/create-blockに関しては前出の記事の通りなのでこちらも省きます。

docker-compose.ymlを作成

上記2ページを参考して作成させていただきました。


version: '3.1'

services:
  db:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - db:/var/lib/mysql

  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
      WORDPRESS_DEBUG: "true"
    volumes:
      - wordpress:/var/www/html
      - ./themes/:/var/www/html/wp-content/themes/
      - ./plugins:/var/www/html/wp-content/plugins

volumes:
  wordpress:
  db:

ほとんど1つ目のままですが、プラグインとテーマ用のディレクトリが必要だったので(ブロック開発専用であればテーマはなくても良いのですが)2つ目のページを参考にしてそれぞれディレクトリを作っています。

起動と終了

  • docker-compose.ymlを入れたディレクトリに移動
  • $ docker-compose up -dで起動
  • $ docker-compose downで終了

なお、docker-compose up(-dオプションなし)で起動した場合は、上記ではなくターミナルで停止時に使うControal+Cのキーを押します。

wp-envの必要性

当初の記憶ですとwp-envを使っていたのですが、一応確認をと調べましたらwp-envが出てこない記事などをいくつか発見。いろいろ調べて試行錯誤した結果以下のように理解しています。

  • wp-envは専用のDockerのコンテナを作っている
  • docker-compose.ymlを使えば、結局同様のことをしている

docker-compose.ymlを使っている時点でwp-envによる開発環境立ち上げはいらないですよね…。
「Wordpress Docker ブロック開発」あたりで検索して出てくる情報にはwp-envの記述がセットで出てきますが、その中でdocker-compose.ymlには触れていないことに気が付くべきでした。

wp-envを使えばその時点での最新の状態で環境が構築されるので、こちらを使う方が正式(?)かなとは思います。調べていませんがいろいろ関連ファイルもあるかもしれません。docker-compose.ymlは指定次第になります。

ただdocker-compose.ymlを使う方がシンプルと言いますか扱いが楽な感じもします(特に根拠はないですが)。

1プラグイン1ブロック

[追記:2022.9.14]
複数ブロックにできる方法に関する記事を書きました。

block.jsonを使って構築する場合、1プラグインに複数のブロックは作成できない模様です。block.json自体が1つのブロックを定義するためのものなので、当然と言えば当然ではありますが。

結果として、以下の問題が発生すると考えています。

  1. ブロックの数だけ、プラグインを作って入れなければならない
    ※対応策があるかもしれないが探しても見つけられず
  2. ブロックの数だけ、node_modules(約380MB)が増えて行く

1は仕組み的にどうにもならないのと、ページ表示時にJSやPHPを動かすタイプでなければ表示速度に大きな影響は出ないと思われるため、まだ諦めがつきます。

しかし2に関しては作業環境を圧迫する要因ですし、可能ならどうにかしたいと考え、以下のような方法を思いつきました。

  • 複数のプラグインの内、1つを除きnode_modulesを全て削除する/li>
  • 作業を行う場合は、該当のプラグインにnode_modulesを移動させて用いる

毎回多少手間がかかるものの、400MB近いデータが増え続けることを考えれば妥協点になるのではと考えています。
実際サーバーにプラグインをアップロードする際にはnode_modulesは除外しますし、node_modulesが必要なのは構築時のみなので常にプラグイン内に存在している必要性はありません。

結び

実際どうするかまだ決めかねてますが、とりあえず疑問は解けたので多少スッキリしました。

1人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄