Using volumes in Docker to access container filesystem - docker

Question

I'm new to using Docker and am attempting to get a volume working, but something isn't quite right.
I've installed Wordpress on Docker as explained in Docker's tutorial: https://docs.docker.com/compose/wordpress/
Using Docker Desktop I've managed to get the image up and running and followed through Wordpress's installation wizard. So far so good.
Now, I want to be able to access the Wordpress files on my local machine so I can edit them in vscode.
I've found several articles, e.g. Access running docker container filesystem, which all allude to the same thing: If you set the volumes: property in docker-compose.yml to map your local project directory to the webroot in the container it should "just work". But it doesn't.
My local directory on my Mac is on my Desktop and is called wordpress-docker. Inside this directory lives my docker-compose.yml.
I've edited docker-compose.yml so it has this:
wordpress:
volumes:
- ~/:/var/www/html
I know /var/www/html is correct because if I ssh into the container through Docker Desktop and then run pwd it gives me that directory. I also can see that's exactly where the Wordpress files after running ls -l:
All I'm trying to do is get the files listed above accessible in my wordpress-docker directory on my Desktop. Given that docker-compose.yml is in the same directory I've tried both ~/ and ./ as the part preceding /var/www/html.
No error messages are being shown when restarting the container. But the only file that I have inside wordpress-docker on my Desktop is the docker-compose.yml. It is not showing any of the files on the screenshot above, which is what I want and expect.
Why is it not showing the files that are in the container? All tutorials I've found seem to suggest it's this simple - you map a local directory to the one in the container and then it just works. In my case it does not.
Docker engine 20.10.0, Docker Desktop 3.0.0 on macOS Catalina.

Answer 1

I find that rule of thumb with wordpress dev is that wp core files should be never changed or accessible when using docker local environments.
Every time you docker-compose up -d a docker wordpress environment, docker will re-build a the current installed docker wordpress version.
So rather than mapping the entire wordpress volume, why not use persistent mapping for files and data which is dynamic for your current local project.
Essentially you will have a folder for each local wordpress project on your mac which you can docker up and down at any time. And you commit each folder as repo to git.
Make sure you .gitignore uploads, plugins, database, node_modules
etc...
For example, create a project folder anywhere on your mac and add a docker-compose.yml into the folder with this config code below...
version: '3.7'
networks:
wordpress:
ipam:
config:
- subnet: 172.25.0.0/16
services:
# here is our mysql container
db:
image: mysql:5.7
volumes:
- ./db:/var/lib/mysql:delegated
ports:
- "3306:3306"
restart: always
environment:
MYSQL_ROOT_PASSWORD: somewordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
networks:
- wordpress
# here is our wordpress container
wordpress:
depends_on:
- db
image: wordpress:latest
volumes:
# our persistent local data re routing
- .:/var/www/html/wp-content/themes/testing:delegated
- ./plugins:/var/www/html/wp-content/plugins
- ./uploads:/var/www/html/wp-content/uploads
- ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
ports:
- "80:80"
restart: always
networks:
- wordpress
environment:
# our local dev environment
WORDPRESS_DEBUG: 1
DEVELOPMENT: 1
# docker wp config settings
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
WORDPRESS_DB_NAME: wordpress
WORDPRESS_AUTH_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
WORDPRESS_SECURE_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
WORDPRESS_LOGGED_IN_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
WORDPRESS_NONCE_KEY: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
WORDPRESS_SECURE_AUTH_SALT: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
WORDPRESS_LOGGED_IN_SALT: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
WORDPRESS_NONCE_SALT: 5f6ede1b94d25a2294e29eeba929a8c80a5ac0fb
WORDPRESS_CONFIG_EXTRA: |
/* development parameters */
define('WP_CACHE', false);
define('ENVIRONMENT', 'local');
define('WP_DEBUG', true);
/* configure mail server */
define('WORDPRESS_SMTP_AUTH', false);
define('WORDPRESS_SMTP_SECURE', '');
define('WORDPRESS_SMTP_HOST', 'mailhog');
define('WORDPRESS_SMTP_PORT', '1025');
define('WORDPRESS_SMTP_USERNAME', null);
define('WORDPRESS_SMTP_PASSWORD', null);
define('WORDPRESS_SMTP_FROM', 'whoever#example.com');
define('WORDPRESS_SMTP_FROM_NAME', 'Whoever');
/* add anymore custom configs here... */
# here is our mail hog container
mailhog:
image: mailhog/mailhog:latest
ports:
- "8025:8025"
networks:
- wordpress
Now in this folder, run the command docker-compose up -d which will build a brand new installation which looks like this in your ide...
Before accessing and setting this local wordpress install via http://locolhost you need to replace the uploads.ini folder with a true uploads.ini config file. Replace folder with this .ini config code...
file_uploads = On
memory_limit = 2000M
upload_max_filesize = 2000M
post_max_size = 2000M
max_execution_time = 600
So you will now have...
Before you access the site again it's probably a good idea to put some basic theme files in so your theme will run when you visit the site and admin...
For mailhog to work and receive outgoing mail from your local wordpress environment you will need to add this to your functions.php...
// add the action
add_action('wp_mail_failed', 'action_wp_mail_failed', 10, 1);
// configure PHPMailer to send through SMTP
add_action('phpmailer_init', function ($phpmailer) {
$phpmailer->isSMTP();
// host details
$phpmailer->SMTPAuth = WORDPRESS_SMTP_AUTH;
$phpmailer->SMTPSecure = WORDPRESS_SMTP_SECURE;
$phpmailer->SMTPAutoTLS = false;
$phpmailer->Host = WORDPRESS_SMTP_HOST;
$phpmailer->Port = WORDPRESS_SMTP_PORT;
// from details
$phpmailer->From = WORDPRESS_SMTP_FROM;
$phpmailer->FromName = WORDPRESS_SMTP_FROM_NAME;
// login details
$phpmailer->Username = WORDPRESS_SMTP_USERNAME;
$phpmailer->Password = WORDPRESS_SMTP_PASSWORD;
});
Now these urls below will work...
http://locolhost - your site
http://locolhost/admin - your site wp admin (once site is setup)
http://localhost:8025 - mailhog for viewing outgoing mail from site
So every time you docker-compose down and docker-compose up -d on this project, your environment will boot up exactly where you left off.
You can add database data, uploads and plugins and all this data will be persistent without the need to edit core files.
You can add any extra wp-config.php settings to this docker-compose.yml file. But you need to docker-compose down and up -d for these configs to take effect.
This theme folder is called testing in the docker container files, but if you modify the style.css file with the code below, this activated theme will display in the admin with what ever you set...
/*
Theme Name: Project Name
Author: joshmoto
Description: Project Description
Version: 1.0
License: Private
*/
As per you comment. You can try persistent mapping the whole wp-content from your volumes by using this in your existing docker-compose.yml...
# here is our mysql container
db:
image: mysql:5.7
volumes:
- ./db:/var/lib/mysql:delegated
# here is our wordpress container
wordpress:
depends_on:
- db
image: wordpress:latest
volumes:
- ./wp-content:/var/www/html/wp-content
- ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
You will probably need to use persistent db mapping and uploads.ini still if you want your local environment to restart with same theme settings and data from previous session.

Answer 2

Change your docker compose volumes section to -
wordpress:
volumes:
- ~/Desktop/wordpress-docker:/var/www/html
Whatever folder you've mapped from your local to your remote is where the files will go. So wordpress-docker will not have a folder called /var . It will directly have index.js and other files present inside /var/www/html of your container.