Docker Setup for Local WordPress Development
Summary
TLDRIn 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
🛠 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.
🖥️ 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.
🔌 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.
🌐 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.
🛠️ 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.
🔄 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.
Mindmap
Keywords
💡WordPress
💡Docker
💡Local Development
💡Environment Variables
💡Docker Compose
💡Nginx
💡MySQL
💡phpMyAdmin
💡FastCGI
💡Version Control
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
تصفح المزيد من مقاطع الفيديو ذات الصلة
Install Flowable with Docker | How-To | Flowable
2 | How to Install a Local Server for PHP | 2023 | Learn PHP Full Course for Beginners
#03 💻 Membuat Project Laravel Baru menggunakan Docker Container
Introduction to WordPress Theme Development in Hindi #1 - WsCube Tech
How To Install PHP & What Are Web Servers - PHP 8 Tutorial
Khoá học lập trình PHP&MYSQL - Bài 48: Upload File PHP
5.0 / 5 (0 votes)