Crear un proyecto PHP + Docker + MariaDB + phpMyAdmin desde cero

Hola, ¿qué tal? En este vídeo te voy a enseñar, paso a paso y desde cero, cómo montar un entorno completo para trabajar con PHP usando Docker.
Este entorno incluye:

un servidor Apache con PHP,
una base de datos MariaDB,
phpMyAdmin para gestionarla,
y recarga automática del navegador mientras programamos.

Además, vamos a separar correctamente la infraestructura del código, tal y como se haría en un proyecto profesional.

Vamos allá.

Tabla de contenidos

1 ⭐ 1. Estructura inicial del proyecto
2 ⭐ 2. Configuración de Docker
- 2.1 📌 Dockerfile
- 2.2 📌 docker-compose.yml
3 ⭐ 3. Crear el proyecto PHP
4 ⭐ 4. Probar el sitio
5 ⭐ 5. Conclusión

⭐ 1. Estructura inicial del proyecto

Primero vamos a crear una carpeta principal.
Yo la voy a llamar:

proyecto-classe

Y dentro de esta carpeta vamos a crear dos subcarpetas:

docker-env → aquí estará toda la “maquinaria”: Docker, phpMyAdmin, BrowserSync…
proyecto-php → aquí estará el código PHP del proyecto.

Quedaría así:

proyecto-classe/
  docker-env/
  proyecto-php/

Esto es muy importante porque nos permite tener el entorno Docker en un repositorio independiente, y el código PHP en otro.
Los alumnos solo tendrán que clonar la máquina, y luego conectar su propio proyecto.

⭐ 2. Configuración de Docker

Dentro de la carpeta docker-env vamos a crear dos archivos:

📌 Dockerfile

FROM php:8.2-apache

WORKDIR /var/www/html

RUN docker-php-ext-install pdo pdo_mysql
RUN a2enmod rewrite

EXPOSE 80

📌 docker-compose.yml

Aquí definimos los servicios: PHP, MariaDB, phpMyAdmin y BrowserSync para auto-recargar el navegador.

services:
  web:
    build: .
    container_name: php-web
    ports:
      - "8080:80"
    volumes:
      - ../proyecto-php:/var/www/html
    depends_on:
      - db

  db:
    image: mariadb:11
    container_name: mariadb
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: alumnos
      MYSQL_USER: alumno
      MYSQL_PASSWORD: alumno123
    volumes:
      - ./db:/var/lib/mysql
    ports:
      - "3306:3306"

  phpmyadmin:
    image: phpmyadmin/phpmyadmin:latest
    container_name: phpmyadmin
    restart: always
    depends_on:
      - db
    environment:
      PMA_HOST: db
      PMA_USER: alumno
      PMA_PASSWORD: alumno123
    ports:
      - "8081:80"

  browsersync:
    image: node:20-alpine
    container_name: browsersync
    working_dir: /app
    depends_on:
      - web
    volumes:
      - ../proyecto-php:/src
    command: sh -c "npm install -g browser-sync && browser-sync start --proxy 'web:80' --files '/src/**/*.*' --no-ui --host 0.0.0.0 --port 3000"
    ports:
      - "3000:3000"

Una vez lo tengamos, levantamos todo con:

docker compose up -d

Y ya podemos entrar a:

Proyecto con autorrecarga: http://localhost:3000
Proyecto normal: http://localhost:8080
phpMyAdmin: http://localhost:8081

⭐ 3. Crear el proyecto PHP

Ahora vamos a dirigirnos a la carpeta proyecto-php, que será donde guardemos nuestro sitio web.

La estructura será:

proyecto-php/
  index.php
  acerca.php
  includes/
    header.php
    footer.php
  css/
    style.css

Vamos creando los archivos.

📌 header.php

Este archivo contiene la parte superior de la web, el menú y el CSS.

<?php
if (!isset($pageTitle)) {
    $pageTitle = "Mi sitio en PHP con Docker";
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title><?php echo htmlspecialchars($pageTitle); ?></title>
    <link rel="stylesheet" href="/css/style.css?v=<?php echo time(); ?>">
</head>
<body>
<header class="site-header">
    <div class="container">
        <h1 class="logo">Mi sitio PHP</h1>
        <nav class="main-nav">
            <a href="/index.php">Inicio</a>
            <a href="/acerca.php">Acerca</a>
        </nav>
    </div>
</header>
<main class="site-content">

📌 footer.php

</main>
<footer class="site-footer">
    <div class="container">
        <p>&copy; <?php echo date('Y'); ?> Mi sitio PHP con Docker</p>
    </div>
</footer>
</body>
</html>

📌 index.php

<?php
$pageTitle = "Inicio";
require __DIR__ . "/includes/header.php";
?>
<section>
    <h2>Bienvenido</h2>
    <p>Proyecto básico con PHP, Docker y recarga automática del navegador.</p>
</section>
<?php
require __DIR__ . "/includes/footer.php";

📌 acerca.php

<?php
$pageTitle = "Acerca";
require __DIR__ . "/includes/header.php";
?>
<section>
    <h2>Acerca del proyecto</h2>
    <p>Este sitio sirve como ejemplo para trabajar con Docker, PHP, MariaDB y phpMyAdmin.</p>
</section>
<?php
require __DIR__ . "/includes/footer.php";

📌 style.css

/* -----------------------------
   HACK: BORDER-BOX UNIVERSAL
------------------------------ */
html {
    box-sizing: border-box;
    font-size: 62.5%; /* HACK: 1rem = 10px */
}

*, *::before, *::after {
    box-sizing: inherit;
}

/* -----------------------------
   ESTILOS GENERALES
------------------------------ */

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    background: #f5f5f5;
    color: #222;
    font-size: 1.6rem; /* 16px reales */
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.6rem;
}

.site-header {
    background: #111;
    color: #fff;
    padding: 1.6rem 0;
}

.logo {
    margin: 0;
    font-size: 2.4rem;
}

.main-nav a {
    color: #fff;
    margin-right: 1.6rem;
    text-decoration: none;
    font-size: 1.6rem;
}

.main-nav a:hover {
    text-decoration: underline;
}

.site-content {
    padding: 2.4rem 0;
    background: #fff;
}

.site-footer {
    background: #111;
    color: #ccc;
    text-align: center;
    padding: 1.2rem 0;
    font-size: 1.4rem;
}

⭐ 4. Probar el sitio

Entramos a:

http://localhost:3000

Y cada vez que guardes cualquier cambio en el proyecto, el navegador se recarga automáticamente gracias a BrowserSync.

Esto hace que trabajar en clase sea muchísimo más cómodo.

⭐ 5. Conclusión

Con esto ya tienes un entorno completo, profesional y listo para usar tanto en clase como en casa:

PHP funcionando en Docker,
MariaDB con persistencia de datos,
phpMyAdmin,
recarga automática del navegador,
y el proyecto PHP separado correctamente de la infraestructura.

Si quieres, en el siguiente vídeo podemos crear una tabla en MariaDB y hacer un archivo listado.php que muestre datos reales desde la base de datos.

Dime y lo preparo.