Cheat-sheet of setting Up Multiple WordPress Sites Using Docker and Vagrant Locally

Let’s see how Setting Up Multiple WordPress Sites Using Docker and Vagrant Locally

Designing a WordPress site locally before launching it live is a smart approach. It allows you to customize, debug, and perfect your site without affecting live users. Using Docker and Vagrant together provides a flexible and replicable environment where you can create multiple websites on different machines and access each via unique IPs and ports.

This blog will walk you through the entire process of setting up multiple WordPress websites locally using Docker and Vagrant. But first,

Why Use Docker and Vagrant Together?

Before diving into the technicalities, let’s briefly touch upon why you might want to use both Docker and Vagrant:

• Docker: Docker allows for lightweight containerisation. You can package your WordPress site along with its dependencies into a container, ensuring the environment is consistent across your development machine and any future deployments.
• Vagrant: Vagrant is a tool that helps you manage virtual machines (VMs). Each WordPress site can be spun up in its own isolated VM using Vagrant, making it easier to simulate multiple machines or environments on your local machine.

By combining Docker and Vagrant, you can create isolated environments for each WordPress site you work on, easily switching between different configurations, and controlling how they interact with your local network via IP addresses and ports.

Prerequisites

• Docker and Docker Compose installed on your system.
• Vagrant and VirtualBox installed on your machine.
• Basic knowledge of the command line, Docker, and Vagrant.

Step-by-Step Guide to Setting Up Multiple WordPress Sites

1. Install Docker, Docker Compose, Vagrant, and VirtualBox

Install Docker:

For Ubuntu:

sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io

For Windows/Mac: You can download Docker Desktop from the official website.

Install Docker Compose:

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

Install Vagrant:

sudo apt-get install vagrant

For Windows/Mac, visit the Vagrant download page.

Install VirtualBox:

You can download VirtualBox from here.

2. Setting Up Your Project Structure

Let’s create a directory to organize your Vagrant and Docker configurations:

mkdir wordpress-multisite-setup
cd wordpress-multisite-setup

Within this directory, we will create subdirectories for each WordPress site and their respective configurations.

mkdir site1 site2

3. Setting Up Vagrant for Multiple Sites

Vagrant allows you to define virtual machines for each site. Navigate to the root folder of each site and create a Vagrant configuration:

For Site 1:

cd site1
vagrant init

Edit the generated Vagrantfile to include the following configurations:

Vagrant.configure("2") do |config|
  config.vm.box = "ubuntu/bionic64"
  
  # Assign a private IP address to the VM
  config.vm.network "private_network", ip: "192.168.33.10"

  # Forward port 8081 on the host to port 80 on the guest (VM)
  config.vm.network "forwarded_port", guest: 80, host: 8081

  # Set up Docker in the VM
  config.vm.provision "docker"
end

For Site 2:

Similarly, in the site2 folder:

cd ../site2
vagrant init

Edit the Vagrantfile to assign a different IP and port:

Vagrant.configure("2") do |config|
  config.vm.box = "ubuntu/bionic64"
  
  # Assign a private IP address to the VM
  config.vm.network "private_network", ip: "192.168.33.11"

  # Forward port 8082 on the host to port 80 on the guest
  config.vm.network "forwarded_port", guest: 80, host: 8082

  # Set up Docker in the VM
  config.vm.provision "docker"
end

4. Setting Up Docker to Host WordPress

Now, let’s create a docker-compose.yml file for each site to configure the Docker containers:

For Site 1:

Inside the site1 directory, create a docker-compose.yml file:

version: '3'

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

  wordpress:
    image: wordpress:latest
    ports:
      - "80:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: user
      WORDPRESS_DB_PASSWORD: password
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wp_data:/var/www/html

volumes:
  db_data: {}
  wp_data: {}

For Site 2:

Inside the site2 directory, create a similar docker-compose.yml file:

version: '3'

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

  wordpress:
    image: wordpress:latest
    ports:
      - "80:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: user
      WORDPRESS_DB_PASSWORD: password
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wp_data:/var/www/html

volumes:
  db_data: {}
  wp_data: {}

5. Boot Up the Virtual Machines

To spin up the VMs for both sites, run the following commands in each respective site folder:

For Site 1:

cd site1
vagrant up

For Site 2:

cd ../site2
vagrant up

6. Running WordPress with Docker

Once the VMs are up and running, SSH into the VMs and start the Docker containers:

For Site 1:

vagrant ssh
cd /vagrant
docker-compose up -d

For Site 2:

vagrant ssh
cd /vagrant
docker-compose up -d

7. Accessing the WordPress Sites

Now you can access your local WordPress sites using your browser.

• Site 1: Open http://192.168.33.10:8081
• Site 2: Open http://192.168.33.11:8082

Each WordPress site runs in its own isolated environment, with its own database and files. You can now develop these sites locally before moving them to a live environment.

Conclusion

By leveraging the power of Docker for containerization and Vagrant for VM management, you can easily set up and manage multiple WordPress websites locally. This setup not only simulates a real-world environment with isolated IPs and ports but also ensures a smooth transition from local development to production deployment.

With the configuration described in this blog, you can add more sites by simply replicating the process for each new WordPress site you want to create. This approach gives you full control over your local environment, minimising any potential issues when pushing your sites live. Happy coding!

Visit my other blogs if you are interested in reading something that you never knew before.