We use Docker, Docker-compose and Webpack to build a local environment for a php site. Recently I was tasked with adding a blog to the local setup using wordpress. I have been able to get everything up and running almost how I intended however there have been some issues with live reloading of the site. I can not for the life of me get the setup to work so that both the site root files and the blog sub-directory files will live-reload when saved. I can get either or too work but just not both. We use the browser sync plugin in webpack to reload any change it sees to the dist folder.
I believe the issue comes from the volume mount in the docker-compose file. If I mount only the wordpress wp-content files:
volumes:
- ./dist/blog/wp-content/uploads:/var/www/html/blog/wp-content/uploads
- ./dist/blog/wp-content/plugins:/var/www/html/blog/wp-content/plugins
- ./dist/blog/wp-content/themes:/var/www/html/blog/wp-content/themes
The wordpress blog gets updated upon save but any files not under blog/ do not. If I have the root folder mounted in volumes all files but the WordPress files reload. volumes: - ./dist:/var/www/html
And when I exec into the blog folder it has erased or overwritten the entire wordpress installation so they the WP site can no longer be used. If I have all four lines in same result. I am not sure if anyone can help me but I hope someone has ran into this issue before and I appreciate any help you can give. I have tried to include my relevant file info. LEt me know If I need to add more
dist folder structure
dist/
blog/
wp-content/
themes/
custom-themes/
.... theme-files
index.php
contactus.php
about.php
... etc
dockerfile
FROM php:7.0-apache
# Run Linux apt (Advanced Package Tool) to and install any packages
RUN apt-get update && \
apt-get install -y --no-install-recommends
RUN docker-php-ext-install mysqli && docker-php-ext-enable mysqli
# Enable mod_rewrite in apache modules
RUN a2enmod rewrite
# Manually set up the apache environment variables
ENV APACHE_RUN_USER www-data
ENV APACHE_RUN_GROUP www-data
ENV APACHE_LOG_DIR /var/log/apache2
ENV APACHE_LOCK_DIR /var/lock/apache2
ENV APACHE_PID_FILE /var/run/apache2.pid
# Expose apache.
EXPOSE 80
ADD ves-apache-config.conf /etc/apache2/sites-enabled/000-default.conf
WORKDIR /var/www/html/
COPY ./dist /var/www/html/
WORKDIR /var/www/html/blog/
# Set our wordpress environment variables
ENV WORDPRESS_VERSION 5.2.2
ENV WORDPRESS_SHA1 3605bcbe9ea48d714efa59b0eb2d251657e7d5b0
# Download and unpack wordpress
RUN set -ex; \
curl -o wordpress.tar.gz -fSL "https://wordpress.org/wordpress-${WORDPRESS_VERSION}.tar.gz"; \
echo "$WORDPRESS_SHA1 *wordpress.tar.gz" | sha1sum -c -; \
# upstream tarballs include ./wordpress/ so this gives us /usr/src/wordpress
tar -xzf wordpress.tar.gz -C /var/www/html/blog; \
rm wordpress.tar.gz; \
chown -R www-data:www-data /var/www/html/blog
RUN cp -r /var/www/html/blog/wordpress/. /var/www/html/blog/
RUN rm -rf /var/www/html/blog/wordpress.tar.gz
RUN rm -rf /var/www/html/blog/wordpress
CMD ["apache2-foreground"]
docker-compose.yml
version: "3"
services:
server:
# Name our container
container_name: corporate-site
environment:
- COMPOSE_CONVERT_WINDOWS_PATHS=1
depends_on:
- database
build:
context: ./
volumes:
# - ./dist:/var/www/html
- ./dist/blog/wp-content/uploads:/var/www/html/blog/wp-content/uploads
- ./dist/blog/wp-content/plugins:/var/www/html/blog/wp-content/plugins
- ./dist/blog/wp-content/themes:/var/www/html/blog/wp-content/themes
restart: always
ports:
- "8080:80"
# Logging Control
logging:
driver: none
### MYSQL DATABASE ###
database:
container_name: blog-database
build:
context: ./config/docker/database
volumes:
- datab:/var/lib/mysql
restart: always
ports:
- "3306:3306"
volumes:
datab:
Webpack file
module.exports = merge(base, {
mode: 'development',
devtool: 'inline-source-map',
watch: true,
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
proxy: 'http://localhost:8080',
port: 3200,
open: true,
files: [
'./dist/*.php',
'./dist/blog/wp-content/themes/blog/*.php',
'./dist/blog/wp-content/themes/blog/*.css'
]
}),
]
})
