Guía Interactiva de Variables de Entorno en Symfony 7.3

Conceptos Clave

Las variables de entorno son la base para una configuración de aplicación segura, flexible y portable. Permiten separar la configuración del código.

🔒

Manejo de Secretos

Mantén datos sensibles como claves API y contraseñas fuera de tu control de versiones.

🔧

Configuración Flexible

Adapta tu aplicación a diferentes entornos (dev, test, prod) sin cambiar una línea de código.

🚀

Portabilidad

Facilita la configuración del proyecto para nuevos desarrolladores y en despliegues automatizados.

Jerarquía de Carga de Archivos `.env`

Symfony busca variables en varios archivos. Los archivos más específicos (como `.env.local`) tienen mayor prioridad. Pasa el cursor sobre cada archivo para ver su propósito.

→

El Flujo de Carga

Entender cómo Symfony carga las variables es clave. Haz clic en cada paso para ver los detalles y el código relevante.

Petición HTTP a `public/index.php`

`autoload_runtime.php` ejecuta `config/bootstrap.php`

El componente `Dotenv` carga los archivos `.env`

El Kernel y el Contenedor de Dependencias se construyen

Uso Práctico e Interactivo

Explora cómo acceder a las variables de entorno en diferentes partes de tu aplicación. ¡Intenta cambiar el valor en el campo de texto y observa cómo se actualiza el código!

Simulador de `.env`

MI_CUSTOM_VAR

APP_BASE_URL

En `config/services.yaml`

Esta es la forma recomendada. Defines "parámetros" que toman su valor de las variables de entorno. Luego, Symfony los inyecta automáticamente en tus servicios.

# config/services.yaml
parameters:
    app.base_url: '%env(APP_BASE_URL)%'
    app.custom_message: '%env(MI_CUSTOM_VAR)%'

services:
    App\Service\MyExampleService:
        arguments:
            $message: "Hola desde .env"
            $baseUrl: "https://mi-sitio.com"
                            

Integración con Frontend (Vue.js)

Tu aplicación Vue se ejecuta en el navegador, por lo que no puede leer `.env` directamente. Aquí tienes las dos formas principales de pasarle datos desde Symfony.

Método 1: Inyección en la Plantilla Twig

Ideal para configuración que Vue necesita al cargar. Symfony la inyecta como una variable global de JavaScript.

Ventaja: Simple y disponible inmediatamente.

Desventaja: Expuesto en el código fuente, no apto para secretos.

{# templates/base.html.twig #}
<script>
    window.VUE_CONFIG = {
        appEnv: "{{ app.environment }}",
        customVar: "{{ parameter('app.custom_message') }}"
    };
</script>

// assets/app.js (Vue)
const appEnv = window.VUE_CONFIG.appEnv; // 'dev'
                    

Método 2: Endpoint de API

Perfecto para datos sensibles o dinámicos. Creas una ruta en Symfony que Vue puede consultar.

Ventaja: Más seguro y permite datos dinámicos.

Desventaja: Requiere una petición HTTP adicional.

// src/Controller/ApiController.php
#[Route('/api/config')]
public function getConfig(): JsonResponse
{
    return $this->json(['apiKey' => $this->getParameter('app.public_api_key')]);
}

// En un componente de Vue
async function fetchConfig() {
    const response = await fetch('/api/config');
    const data = await response.json();
    // data.apiKey contiene la clave
}
                    

Las Tripas: El "Cómo" Interno (Avanzado)

Para los verdaderos "maestros bicicleteros". Así es como los componentes principales de Symfony trabajan juntos.

1. El Kernel y el Arranque

El `Kernel` es el corazón de la aplicación. Su método `boot()` orquesta todo el proceso de arranque, incluyendo la carga de la configuración y la construcción del Contenedor de Dependencias.

App\Kernel

2. El Contenedor de Inyección de Dependencias (DIC)

El DIC es un registro inteligente de todos tus servicios. Lee `services.yaml`, resuelve las variables de entorno para crear "parámetros", y luego inyecta ("autowires") estos parámetros y otros servicios en las clases que los necesitan.

'%env(VAR)%'

↓

Parámetro en el DIC

↓

Inyección en Servicio