Docker Setup for Local WordPress Development

Summary

In this tutorial video, the host guides viewers through setting up a local WordPress development environment using Docker. The process includes creating a Docker Compose file, setting up Nginx with PHP-FPM, MySQL, and phpMyAdmin, and configuring environment variables. The video also covers installing WordPress, creating a local file mirror for plugin and theme development, and emphasizes the benefits of version control for custom work while keeping WordPress core files unchanged.

Takeaways

• 😀 The video provides a tutorial on setting up a local WordPress development environment using Docker.
• 📂 It starts by creating a new folder and an environment variables file for sensitive data that shouldn't be checked into source control.
• 🔧 The tutorial includes step-by-step instructions for configuring a Docker Compose YAML file to set up services for Nginx (engine X), MySQL, PHPMyAdmin, and WordPress.
• 🌐 It explains how to set up Nginx to serve as the web server for the local WordPress development environment.
• 🔑 The video demonstrates creating environment variables for the database, including name, user, and password, and how to use these in Docker configurations.
• 💾 It shows how to create a Docker volume for the MySQL database and how to ensure that the database service is running and accessible.
• 📝 The script includes instructions for setting up PHPMyAdmin to manage the MySQL database within the Docker environment.
• 📦 The process of adding WordPress to the Docker setup is detailed, including configuring the WordPress container to connect to the MySQL database.
• 🔄 The video explains how to create a local file mirror with the WordPress container, allowing for local development of plugins and themes.
• 🛠️ It discusses the importance of using a `.dockerignore` file to manage which files are included in version control during local development.
• 🔍 The tutorial concludes with a demonstration of how to access the WordPress admin panel, install plugins, and activate themes within the Dockerized environment.

Q & A

What is the main topic of the video?

The main topic of the video is setting up a local WordPress development space using Docker.

Why is the presenter creating an environment variables file?

The presenter is creating an environment variables file to store sensitive information and settings that should not be checked into git or any source control.

What is the purpose of the Docker Compose file in this setup?

The Docker Compose file is used to define and run multi-container Docker applications, specifying the services, networks, and volumes needed for the WordPress development environment.

Which web server is used in the video for the local WordPress development?

The web server used in the video is Nginx, specifically the Nginx 1.15.2 Alpine version.

How does the presenter ensure the Nginx configuration is updated for local development?

The presenter maps a local 'enginex' folder to the Nginx configuration directory within the Docker container to overwrite the default configuration with a custom one.

What is the significance of the 'fpm' in the WordPress Docker image?

The 'fpm' stands for FastCGI Process Manager, which is used to handle PHP processing for WordPress, allowing Nginx to serve PHP files properly.

How is the MySQL database service configured in the Docker Compose file?

The MySQL service is configured with environment variables for the database name, user, and password, a health check to ensure the database is running, and a volume for data persistence.

What is the purpose of the PHPMyAdmin service in the setup?

The PHPMyAdmin service is used for a web interface to manage the MySQL database, allowing the presenter to verify the creation of the WordPress database and manage its tables.

How does the presenter handle the local development of WordPress plugins and themes?

The presenter sets up a local file mirror between the 'src' folder in the project and the 'wp-content' folder in the WordPress Docker container, allowing for local development and version control of plugins and themes.

What is the advantage of using Docker for local WordPress development as shown in the video?

Using Docker for local WordPress development allows for an isolated environment that mimics production, easy setup and teardown of the development space, and the ability to work with different versions of WordPress and tools like Nginx and MySQL.

Outlines

00:00

🛠 Setting Up Local WordPress Development with Docker

The video introduces a tutorial on setting up a local WordPress development environment using Docker. It mentions a previous video on the topic and the intention to expand on it with additional features. The process begins with creating a new folder and an environment variables file to store sensitive information not meant for source control. The video then delves into constructing a Docker Compose script, starting with defining a web server using the Nginx image, setting up environment variables for the database, and mapping volumes for the Nginx configuration.

05:01

🖥️ Configuring Nginx and MySQL Services in Docker

This paragraph continues the setup process by detailing the configuration of the Nginx service within the Docker environment. It describes the steps to download the Nginx image, expose it on port 8080, and map local configuration files to overwrite the default ones in the Docker image. The video then moves on to setting up a MySQL database service, including defining environment variables for database access, creating a health check, and setting up a network for internal Docker communication. Additionally, it explains how to create a volume for MySQL data storage and the process of testing database connectivity using phpMyAdmin.

10:01

🔌 Integrating WordPress with Dockerized Services

The script proceeds with the integration of WordPress into the Docker setup. It outlines creating a new service for WordPress, specifying dependencies on the database service, and using a WordPress image with PHP FPM support for better integration with Nginx. The paragraph covers setting environment variables for WordPress database connection, defining volumes for WordPress content, and ensuring the WordPress service is on the same internal network. It also discusses the importance of correct hostname references to maintain communication between services.

15:03

🌐 Launching and Accessing the WordPress Local Installation

The video demonstrates launching the Docker containers for the local WordPress development environment and accessing the WordPress installation screen. It shows the initial setup of a WordPress site, including configuring the site title, admin username, and password. The viewer is guided through logging into the WordPress dashboard and installing a plugin to verify the functionality of the local setup. The paragraph highlights the successful launch of the WordPress environment and the viewer's ability to interact with it.

20:03

🛠️ Developing Plugins and Themes with Local WordPress

The tutorial shifts focus to developing plugins and themes locally within the WordPress Docker environment. It explains how to access the file structure within the WordPress Docker container and suggests creating a local file mirror between the working WordPress folder and the WP-content folder in the Docker image. This setup allows for version control of actively developed plugins and themes while ignoring the rest of the WordPress files. The paragraph also advises on the use of a .dockerignore file to manage files within the Docker environment effectively.

25:05

🔄 Final Thoughts on Local WordPress Development with Docker

The final paragraph wraps up the tutorial by summarizing the local WordPress development setup with Docker, which includes WordPress, Nginx, MySQL, and phpMyAdmin. It emphasizes the flexibility of working with different WordPress versions and the ability to locally develop and test plugins and themes before publishing. The video concludes with an invitation for feedback and suggestions for improvement, as well as a prompt to subscribe for more content and a mention of the creator's other channel.

Keywords

💡WordPress

WordPress is a popular open-source content management system (CMS) used for building websites and blogs. In the video, WordPress serves as the core platform for setting up a local development environment, allowing for the creation and testing of plugins and themes. The script mentions installing WordPress within a Docker container and using it for local development, highlighting its flexibility and the ease of use it offers for developers.

💡Docker

Docker is a platform that uses containerization technology to simplify the deployment of applications. In the context of the video, Docker is used to create a local WordPress development environment, encapsulating all the necessary components like the web server, database, and PHP support. The script details setting up Docker containers for WordPress, the database, and phpMyAdmin, showcasing Docker's role in streamlining development workflows.

💡Local Development

Local development refers to the process of developing and testing software on a personal computer rather than on a remote server. The video focuses on setting up a local WordPress development space using Docker, which allows for a self-contained environment to build and test WordPress plugins and themes. The script demonstrates creating a local folder structure that mirrors the WordPress installation within the Docker container for seamless development.

💡Environment Variables

Environment variables are dynamic values that can be set and used in a computing environment. In the video, environment variables are created for database names, usernames, and passwords to keep sensitive information out of source control. The script mentions defining variables like 'database_name', 'database_user', and 'database_password' in an '.env' file, which are then used in the Docker Compose configuration.

💡Docker Compose

Docker Compose is a tool for defining and running multi-container Docker applications. The video script describes using Docker Compose to set up services for Nginx, MySQL, and WordPress, along with their respective configurations. Docker Compose YAML files are created to manage the services, networks, and volumes needed for the local development environment.

💡Nginx

Nginx, often pronounced 'engine-x', is a popular open-source web server software. In the video, an Nginx container is set up to serve as the web server for the local WordPress development environment. The script includes configuring Nginx to handle PHP files through FastCGI, demonstrating its role in serving web content and handling server requests.

💡MySQL

MySQL is a widely used open-source relational database management system. The video script discusses setting up a MySQL container within the Docker environment to manage the database for the WordPress installation. It explains configuring environment variables for the MySQL database and setting up health checks to ensure the database service is operational.

💡phpMyAdmin

phpMyAdmin is a free, open-source administration tool for managing MySQL databases via a web interface. The video mentions setting up a phpMyAdmin container in Docker to facilitate the management and inspection of the WordPress database. It is used to verify that the database has been created and to manage database tables and schemas.

💡FastCGI

FastCGI is a standard that allows applications to communicate with web servers that support the FastCGI protocol. In the context of the video, FastCGI is configured in the Nginx server to interface with the WordPress PHP code, enabling dynamic web content processing. The script specifies setting 'fastcgi_pass' to communicate with the WordPress container, illustrating the integration of PHP processing within the web server.

💡Version Control

Version control is a system that records changes to a file or set of files over time, allowing developers to track and manage changes. The video script suggests using version control to manage the 'plugins' and 'themes' folders within the local WordPress development environment. It highlights the importance of ignoring unnecessary files in the version control system to maintain an organized and clean repository.

Highlights

Introduction to setting up a local WordPress development space using Docker.

Creating a new folder for the local development environment.

Explanation of creating an environment variables file for sensitive data.

Building a Docker script incrementally for the development environment.

Configuring Nginx (engine X) as the web server for local WordPress.

Setting up port mappings for Nginx in the Docker configuration.

Creating a custom Nginx configuration for local WordPress development.

Launching the Nginx container and verifying its operation.

Creating a MySQL database service for the WordPress environment.

Establishing a health check for the MySQL service.

Setting up a network for internal Docker container communication.

Configuring PHPMyAdmin for database management within Docker.

Verifying the MySQL database and PHPMyAdmin setup through the browser.

Adding WordPress to the Docker environment with specific versioning.

Configuring WordPress to work with the Nginx server and MySQL database.

Launching the WordPress container and accessing the installation screen.

Exploring the process of installing and activating plugins in the local WordPress.

Setting up a local file mirror for plugin and theme development.

Demonstrating live editing of plugins and themes within the Dockerized WordPress.

Conclusion and summary of the local WordPress development setup with Docker.

Invitation for feedback and suggestions for future video content.

Transcripts

hey everyone Wu here and this is going

to be one exciting video yeah I've got a

lot of cool things planned out in this

video we're going to be taking a look at

setting up your own local WordPress

development space I've done a previous

video on this topic and I thought it

would be a good time to provide a little

bit of a follow-up there's a few other

things that we can tack on to that

original work and make it really extra

special in terms of being able to give

you a lot more options and freedom for

developing your own plugins your own

themes everything you want to do with

WordPress all self-contained within

Docker all right so let's get going

first of all let's just create a new

folder for us to work in I'm just going

to call mine WordPress local

development as you can see I've opened

vs code and we've got a fresh new

project here and we are going to get

started

with some exciting stuff all right first

we're going to create an environment

variables file called

MV just write in the root of this folder

and all we're going to have in there is

just things that we don't want to check

into git or any kind of source control

I'm just going to be creating some

variables here and then we are going to

be building up a a Docker script A

Docker compos script bit by bit all

right here we go so in our end file I'm

going to have a variable called

container name and this will just make

it easier to see our images in the

docker desktop app so I'm just going to

call it my app and then we are going to

have some database related environment

variables database name and I've just

given it a name of Wordpress database

user is user database unor password is

password and database _ rotor password

is just root uncore password all right

let's go ahead and save that and then

let's create our Docker compose yaml

file

okay so first things first we are going

to get started with a proper web

server we are going to be taking look at

engine X so let's go ahead and create a

Services key

and we'll give it a name of engine

X and for the container name key we'll

just use the container name that we

defined in the

environment in the EnV

file container

name- engine

X

okay let's see if we

can there we go one down all right and

then for an image we're going to be

using Gen X

1.15.2 D

Alpine and for a restart command uh

we're only going to restart it unless

it's

stopped for an environment file we're

going to use our

EnV okay and our ports we are going to

Define as we're going to expose port

8080 and internally into the docker

image it's going to be listing on Port

80

okay and then we're going to set

up uh some

volumes so the first one is going to be

to our engine X configuration so let's

saygin X and then colon

SLC slin X SL com

D.D colon RW

and I will explain what this means all

right so we are going to be now creating

a folder in the root of this same

project just call it engine

X and then within that create a file

called default.

comp Co

NF and let's take a look at this okay so

this will be just a basic engine X

configuration for us to work locally

with WordPress and all these images that

we're going to create in

Docker so we're going to define a

server and then have a a listen on Port

80 default unor

server okay and then our rout is going

to be at SLV

VAR SL dubdub duub

HTML and for our

location we're going to put a location

slash basically we're mapping the

default route to

be uh to handle uh an

index PHP and then if there's no index

PHP then look for an

index.html okay so that's all we need to

get started we'll be adding more to this

later on uh but let's go back to our

Docker file so what we're what we're

doing here is we are downloading the

engine x one .1 15.12 Alpine image we

are exposing it on port

8080 and we are creating a mapping

between our local enginex folder into

the Container at

slcg

x.d which is the folder where the

enginex configuration files are so we

will be creating a local configuration

we'll be overwriting the one that's in

the docker image here

okay so let's go ahead and start this

up okay so I'm going to open a new

terminal within vs code and then just

Docker compose up D-

build it should be building by default

since this is the first time we're going

to be running

this okay and you'll notice that it's

using the container name that we've

specified in the EnV

file here is my Docker desktop app

running here and here you can see we've

got the container running WordPress

local development and the my app engine

X image is up and running and so it's

listening right now on Port 880 so we

can click right here and it'll try to

open it up in our local

browser and we're getting a 404 because

as we've defined in our setup for engine

X it is looking for an index.php file we

can confirm that here right in the

logs uh it's looking we made the request

and it's looking for index PHP which is

not found okay so this is a good sign it

means our engine X image is up and

running so let's go ahead and stop

that just use the stop here or Docker

compose

down so good we've got an engine X

container up and running and and now

what we're going to do is we are going

to

be creating our

database so let's go ahead and create a

new service here so make sure it lines

up with the engine X defined service

above and I'm just going to call it

database and I'll give it a container

name container uncore name of container

uncore name-

database and for an image we're going to

be using MySQL

8.0 and for restart we're going to be

using the

same unless

stopped

okay and then our environment file is

going to be EnV as we were using in the

engine X

container and then we're going to set up

some environment variables so we're

going to Define mySQL database as

database name and MySQL unor password

using the database password from theim

file MySQL root password which will

Define in theend file again and finally

MySQL user defined from theend file at

database

user and you'll see here we've defined a

health check and what this is going to

do is every 20 seconds it's going to run

this test command which is basically

just a ping to the Local Host The Local

Host in within this image and uh make

sure that the database is listening and

alive and it's going to retry 10

times we are going to be exposing this

on Port

3306 which is mapped internally into

this Docker image at Port 3306 which is

the default MySQL port

now because we want our images to be

talking to each other our different

Docker images we need to put them all on

the same

network so let's go ahead and Define the

networks and we'll just call it

internal and then down here at the

bottom of our Docker compos file we will

create a

networks internal and then driver

Bridge Okay and while we're here we're

going to define a volume for our

database so

volumes and we'll just call it DB

data okay and then up here back in the

database we are going to create a

volumes

section and we're going to map it to DB

data colon

SLV lib SL MySQL and this is just

setting up a volume for our MySQL data

to be stored

on now just to test our database to be

able to log into it and take a look at

what's going on I usually use PHP my

admin all the time so we are now going

to set up another Docker image for that

so let's create one here called PHP my

admin and we'll give it a container

name of container undor

name PHP my

admin okay and for the image we're going

to be using PHP

myadmin PHP myadmin we're going to be

using that same environment file

definition so enor file

of.in and then we've got some

environment keys that we're defining

here which it will be defined within

ourm file this database root

password is this one right

here okay and we'll be exposing Port 80

81 which will be mapped internally to

Port 80 and finally it will be on the

same network so we just need to make

sure that we're defining it on the same

network now notice here the PMA host is

defined as database so this database is

the actual image name of our database so

if you've

called database something different here

like let's say

database2 then you need to make sure

that this PMA host is using

database2 okay so I'm just going to

leave it as

database and so far everything looks

good good so we're going to go ahead and

run

this okay so we got the log files coming

up here within the docker desktop app so

notice how we have the three images now

of my app database my app engine X and

my app PHP my

admin okay so everything looks okay here

see at the last line of this log we've

got my SQL D ready for connections

okay so what we're going to do now is go

ahead and look at Port 8081 so right

here again we can just click on this it

brings us right to here and we can log

in

with user and

password okay and notice how we have our

local database here now we've got the

information schema and performance

schema which are defaults in MySQL we've

got the WordPress database and of course

it's all empty right now we have no

tables but at least we can verify that

it's here and it's been created so again

this is a really good

sign okay so let's go back and shut

everything down

again okay so finally we are going to be

taking a look at adding

WordPress and we're going to be adding

it in several stages here just

to give you a understanding of of how

we're delivering the WordPress content

locally as well as within Docker so

let's go ahead and create a new section

here called

WordPress and it's going to depend

on-

database okay we're going to be using

container name of container

name dword press

for an image we're going to be making

use of

Wordpress Colon

6.5.2 dfpm D Alpine now this fpm is very

crucial for what we need in our local

setup we can also use the Alpine version

of this image which is available in

Docker but all it is going to download

and set up for us is is a

WordPress Docker

image which is fine except in order to

hook it up to engine X we need to

configure some PHP support so that

engine X knows how to run PHP when it's

being requested from the

browser so to handle this instead of

worrying about a lot of this

configuration stuff on our own we can

make use of a Docker image that has all

that available for us already and this

is in the

fpm Alpine image for a restart flag

we'll set it to unless stopped for the

environment

file we're going to be using the

EnV and then for our environment

variables we've got a few here WordPress

DB host WordPress DB name WordPress DB

user and WordPress DB password and again

we're going to be using our parameters

that we've set up in the EnV file of

database unor name database uncore user

and database unor password and again

notice here for the host name we've got

database Port

3306 so again the same warning that I

provided last time that if you change

this database image name then just make

sure those same changes are reflected

throughout the rest of your Docker

compos file otherwise nothing will be

able to talk

together okay okay we're going to define

a

volume of we're going to be calling it

WordPress at SLV VAR www

HTML so we're going to be creating a

WordPress volume similar to what we just

did with DB data so let's add another

one down here called

WordPress and we also need to make it

available at the engine X level

so back in our engine X section in the

volumes here let's create a new one here

called

WordPress and with the same mapping to

slf far

slw dubd

dhtml we will put it on the same

network

internal and everything here looks good

okay so let's start this up and and

we'll check it out okay again startup

Docker with Docker compose up--

build okay so it looks like the images

have started up now and everything looks

to be available the logs look

okay everything is still green over here

so let's go ahead and open up port 8080

on our engine

X okay so we open up we're trying to

look open up the Local Host Port 8880

and notice how it's still showing us

this not found and you may have also

been noticing that it is trying to just

download the PHP file because we never

set up the configuration of enginex to

talk to the

WordPress fpm image so let's go ahead

and fix that now so go back here and

let's contrl C to stop Docker so back in

our engine X configuration yes so we

haven't set up anything for engine X to

talk

to Wordpress in terms of handling the

PHP so we are going to be creating a new

section here underneath location fast

CGI is built into the fpm docker image

that WordPress is using so basically all

we're doing is engine X will talk to

that Docker image it'll try to hand over

the PHP file that we're requesting and

it'll hand it over through fast CGI and

so right here is the important one fast

CGI pass and we're sending it to the

WordPress host Port 9000 which is the

default fpm

host if you change this container name

from WordPress then just make sure you

remember to change this WordPress name

here within the fast CGI pass section

okay so with that defined I think we're

all we're looking good let's go ahead

and restart

things okay so everything looks to be up

and running everything is still green on

here and let's go ahead and get

into the engine X page again at port

8080 and Tada we have our WordPress

installation screen so let's go ahead

and set up a

WordPress

configuration okay so site title I'm

just going to call it my

WordPress and a username of admin and

let's copy this key or this password

sorry okay and I'll just use an email of

admin

home.com okay so let's log in with

admin and then that key that we

copied and we're in welcome to Wordpress

we're using version

6.5.2 okay so let's take a look at our

basic WordPress setup here and let's go

ahead and just install a

plug-in so we're going to install the

classic editor plugin just to basically

show that we can still work with

plugins as you would expect to in any

other WordPress

installation except now we've got it

locally all right

so we've got a new plugin here it shows

up in the list classic editor okay and

we can choose a theme we've got the 2024

one currently active but we can go

through the existing list and activate

whatever theme we want so we've set up a

locally running WordPress image through

Docker which gives us the ability

to pull down the version of Wordpress

that we're interested in using and work

with engine X and MySQL for a database

back end

but now what do we want to do when we

want to do some actual work within our

site let's say that we want to develop

some plugins or we want to work at

developing our own themes how do we do

this how do we set this up okay my

friends so what we're going to do here

is we are going

to take a look first of all at our

running Docker container

okay so let's take a look at our Docker

containers

here we are going to be looking at the

file structure of Wordpress so if we

take a look at the my app- WordPress

Docker image if we click on it here

it'll bring us into the image itself and

we can go here we can go over here and

click on

files and then it'll give us a directory

list of all the files that are present

within the docker image so if you scroll

to the

bottom and navigate through VAR and then

dub

dubdub and then HTML you will see the

all the files for

WordPress so they've been copied into

this Docker

image okay so we have our WP admin

folder which just basically contains all

of the admin tooling and configurations

and plugins and all that kind of stuff

uh PHP code for basically this admin

panel stuff this is the stuff that you

should never really be updating unless

of course you're working with the

WordPress development team on updating

uh the admin tooling but normally

everyone using Wordpress is either

creating a plug-in or designing a new

theme everything that users build with

is usually within the WPC content folder

so here we've got a a plugins and a

themes folder and so our plugins folder

has the plugins that are available on

this WordPress install so you see here

we've got the classic

editor and then we have our themes so a

list of we've got a folder list of

themes that are currently installed by

default in this WordPress image so 2024

2023 and 2022

okay so what we can do is with the magic

of Docker we can set up a local file

mirror between our working WordPress

folder and

this WP content folder and then that way

we can just keep in Version Control the

plugins and themes that we're actively

working on and that we care about and we

don't have to store any of this other

stuff that are part of Wordpress

itself so how do we do this okay so

let's go back in our Docker compose

file and down in the WordPress volume

section let's create a new volume

entry and it's going to be

to/ SRC so I just called it

Source we're going to map it internally

to the folder structure of

vwww

HTML wp-content

and then we're going to be appending a

another colon here and then calling it

our

W which basically stands for read

write okay so now what we're going to do

is we are going to restart everything in

Docker okay so all the docker images are

pulled down everything is up and running

and things are still looking green so

let's go ahead and go back into our

WordPress setup okay and we're back in

business now if you go to your

local project folder you'll notice

there's a new folder here that's popped

up called SRC and if you expand it we

have our plugins and

[Music]

themes which are mirrored from within

the docker

image so what this means is that we can

work on a plug-in locally and enable it

in our local WordPress install and we

only care about working with the source

control on that now there is one kind of

thing to remember is that if you add any

other

plugins let's add the classic editor

again okay so we see the new plug-in

here as we would expect and then back in

our

folder under plugins we now see the New

Classic Dash editor showing up here as

well so it is a direct mirroring of

what's going on to the WordPress folder

within that Docker image so you'll have

to make sure that when you're working

with any local plugins that maybe in

your dot you set up an ignore file a dog

ignore file to ignore all these other

plugins that you don't really care about

but you don't want to delete them

because if you delete them here then it

will also delete them within the docker

container and then it it gets a little

bit messy right like if if you've got

them defined in WordPress but then you

delete their physical files on this side

then it acts a little weird

right but this at least gives you a way

of being able to do some local

development on anything that you want to

try out in WordPress then it will be you

can just save that and everything will

work properly with your Docker

configuration you can play with

different WordPress versions if you want

to all it's just a matter of changing

the docker compos yaml file and the

image name that you're using so yeah

that's all I wanted to cover in this

video I thought it was a pretty cool

experiment that we were able to get

things up and running with WordPress

we've got a proper WordPress setup

installed in Docker along with engine X

and MySQL and PHP my admin and there's a

bonus here of being able to edit your

local setup to add an add or config

figure any other plugins that you want

to build locally and test out locally

before you publish them up to Wordpress

or work on themes to do the same thing

there I hope you enjoyed this video give

it a like if you thought it was

worthwhile please leave a comment down

below if it helped you out or

suggestions on what would make it better

and we will see you in the next one

folks take it easy

peace hey everyone I thank you for

watching this video and I hope you

enjoyed it if you want to to see more

please subscribe to this channel I'm

also reading the Bible chapter by

chapter over on my other channel Bible

time with

Wazoo hope to see you there