Dockerメモ書き

WordPress

異なるドライブのテーマを反映させる

docker-componse.yml

version: '3.8'

# docker-compose up -d
# http://localhost:8000/wp-login.php
# docker-compose down

services:
  wordpress:
    image: wordpress:latest
    ports:
      - "8000:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: user
      WORDPRESS_DB_PASSWORD: password
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wordpress:/var/www/html
      - d:/web_project/241002project/wordpress/themes/mytheme:/var/www/html/wp-content/themes/sayama  # Mount external theme

  db:
    image: mysql:5.7
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: user
      MYSQL_PASSWORD: password
      MYSQL_ROOT_PASSWORD: rootpassword
    volumes:
      - db_data:/var/lib/mysql

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    ports:
      - "8080:80"
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: rootpassword

volumes:
  db_data:

異なるドライブのファイルが更新された時にホットリロードさせる

Dockerプロジェクトの方でgulpを使う

gulp.js

const gulp = require('gulp');
const browserSync = require('browser-sync').create();

gulp.task('serve', function() {
    browserSync.init({
        proxy: "localhost:8000",  // DockerコンテナでWordPressが動いているURL
        files: [
            "./wordpress/wp-content/**/*.html",
            "./wordpress/wp-content/**/*.php",
            "./wordpress/wp-content/**/*.css",
            "./wordpress/wp-content/**/*.js",
            "d:/web_project/241002myproject/wordpress/themes/mytheme/**/*.html",
            "d:/web_project/241002myproject/wordpress/themes/mytheme/**/*.php",
            "d:/web_project/241002myproject/wordpress/themes/mytheme/**/*.css",
            "d:/web_project/241002myproject/wordpress/themes/mytheme/**/*.js"
        ]
    });
});

gulp.task('default', gulp.series('serve'));