すぐ忘れるのでメモ。node環境はコンテナ内のものを使用する。
- Docker をインストール済
- VS-Code に以下の拡張機能をインストール済
- Dev Containers
- ESLint
- WordPress Playground for VS Code
Gutenberg
- Gutenbergリポジトリをフォークして、ローカルにクローンする。
- ブランチを切る。
- docker-compose.yml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
version: "3" services: node: image: node:20.11.0 container_name: node tty: true volumes: - /Users/atachibana/atachibana/wordpress/patch/gutenberg:/home/node/gutenberg ports: - 3000:3000 - 8080:8080 working_dir: /home/node/gutenberg |
- docker-compose up -d
- VS-Codeの「リモートエクスプローラー」で「node node」を選択し、「新しいウィンドウでアタッチする」をクリック。新しいウィンドウが開く。
- コンテナ内の「/home/node/gutenberg」を開く
- ターミナルを開き、npm install、そして npm run dev を実行して、しばらく待つ。
- コードを編集する。lint が効いているので、構文を間違うと波線とエラーが表示され、「問題」タブにも同じエラーが表示される。逆に言うとこれが出ない場合は、7. が終わっていないので待つ(恐らく末尾のステータスエリアに何か出ている)。
- コードをpushする際はここでは行わず、別ウィンドウでローカルにgutenbergワークスペースを開き、作業する。このとき「core」が変更されていると表示されるので無視して、git add しないようにする。
ブロック
- ディレクトリ = /Users/atachibana/atachibana/docker-block
- docker-compose.yml
|
1 2 3 4 5 6 7 8 9 10 11 |
version: "3" services: node: image: node:20.11.0 container_name: node-block tty: true volumes: - /Users/atachibana/atachibana/docker-block/plugins:/home/node/plugins ports: working_dir: /home/node/plugins |
- docker-compose up -d
- VS-Codeの「リモートエクスプローラー」で「node-block」を選択し、「新しいウィンドウでアタッチする」をクリック。新しいウィンドウが開く。
- コンテナ内の「/home/node/plugins」を開く
- ターミナルを開き、npx create-block 等を実行する。
- 新しい VS-Code を開き、ブロックのディレクトリを開き、WordPress Plyaground を開始する。