Ubuntu 20.04, WSL2, VSCode y Drupal 8:solucionando los "problemas"

Microsoft finalmente ha entregado una solución fantástica para desarrollar aplicaciones Linux en Windows. El subsistema de Windows para Linux, WSL2, es relativamente fácil de instalar y configurar, especialmente si ya está familiarizado con Linux. Incluso si no es así, hay muchos artículos muy buenos sobre cómo poner en marcha una instalación básica.

El desarrollo de aplicaciones PHP de Linux con VSCode en Windows 10 es lo más estable y fluido posible. Aún así, ninguno de los artículos que he encontrado sobre la configuración de LAMP en Ubuntu y WSL2 ha descrito varios "impactos" que he encontrado.

Tenía una experiencia limitada con Linux y dependía en gran medida de los artículos escritos por quienes me precedieron. Si bien me ayudaron la mayor parte del camino, me encontré con varios problemas para que Drupal 8 funcionara sin errores y para la depuración en VSCode. Las soluciones se encontraron en los comentarios a las preguntas publicadas en Internet. Esto tomó muchas horas de búsqueda y espero salvar a la gente presentando las soluciones que encontré en este artículo.

Mi entorno es Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows Terminal, VSCode con paquetes Remote – WSL y PHP Debug Felix Becker. Estoy ejecutando WSL desde Powershell en Windows Terminal.

Antes de comenzar, aquí hay algunas recomendaciones que pueden ahorrarle tiempo.

Instalar y usar apt-fast en lugar de apt realmente puede acelerar las instalaciones y actualizaciones. Donde vivo, Internet tiene poco ancho de banda y es lento, y apt-fast es mucho más rápido que apt.

Puede "hacer una copia de seguridad y restaurar" su distribución de Linux con la exportación e importación de WSL. Como con cualquier sistema, es recomendable mantener siempre una copia de seguridad actualizada.

Mariadb se instala bien pero no puede reiniciar ni obtener el estado

La instalación de Mariadb salió bien. Sin errores ni advertencias. Cuando traté de verificar el estado, recibí un error sobre el sistema.

$>systemctl-status mysql

El sistema no se inició con systemd como init-system (PID 1). puede que no funcione.

El motivo de este error es que Microsoft no admite systemd en WSL. Afortunadamente, Arkane Systems creó un paquete llamado System Genius para habilitar systemd. Sugiero leer su página web detenidamente antes de probar las instrucciones a continuación, extraídas de esa página. Las instrucciones para las distribuciones que no son de Ubuntu son ligeramente diferentes.

Primero necesita instalar el tiempo de ejecución .Net 5.0

$>sudo apt-actualización rápida

$>sudo sudo apt-instalación rápida -y apt-transport-https

$>sudo apt-actualización rápida

$>sudo apt-instalación rápida -y dotnet-sdk-5.0

A continuación, debemos configurar el repositorio wsl-transdebian

$>sudo apt-quick Instalar apt-transport-https

$>wget -Ö /etc/suitable/Trusted.gpg.d/wsl-transdebian.gpg https://arkane-systems.github.io/wsl-transdebian/suitable/wsl-transdebian.gpg

$>chmod a+r /etc/adecuado/Trusted.gpg.d/wsl-transdebian.gpg

$>Gato << FEO > /etc/suitable/Quellen.liste.d/wsl-transdebian.list

$>deb-https://arkane-systems.github.io/wsl-transdebian/suitable/bullseye main

$>deb-src https://arkane-systems.github.io/wsl-transdebian/suitable/bullseye main

$>actualización apt-rapid

Ahora podemos instalar el paquete System Genius.

sudo apt-instalación rápida y systemd-genius

Salga de su shell de Linux, luego apague WSL usando el shell de energía

PS C:UsersUsername>wsl - apagar

Reinicie WSL usando un genio desde el indicador de PowerShell.

PD C:Usuariosnombre de usuario>wsl-genie –p

Verá "Esperando systemd....!!!!!!!!!!!!!!!!". Tarda 180 segundos en cargarse por completo. Solo espera a que termine. Cuando haya terminado, su nueva ventana de shell debería verse así:

Esperando el systemd....!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!! !!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Se agotó el tiempo de espera de systemd para entrar en el estado de ejecución.

Esto puede indicar un error de configuración de systemd.

Intenta continuar.

Confirme que genie está instalado y systemd está funcionando:

systemctl-status mariadb

Debería obtener la salida de estado para mariadb. Tenga en cuenta que systemctl status mysql también funciona.

Arkane Systems recomienda finalizar su sesión de WSL Genie con wsl --shutdown. Esto libera toda la memoria utilizada por WSL en Windows.

Drupal instalado pero sin carga de CSS

Después de la instalación básica de Drupal 8, las páginas no tenían formato. Ver la fuente de la página mostró que no se cargaron archivos CSS. Me tomó dos días darme cuenta de esto, pero la historia corta es que Drupal asume que Apache2 está usando el directorio /tmp, pero ese no es el caso. De forma predeterminada, Apache2 está configurado para usar un directorio tmp privado. Extrañamente, la llamada de PHP a sys_get_temp_dir( ) devuelve /tmp, pero eso no es lo que usa Apache2. Cuando Drupal crea sus archivos css y js optimizados, primero intenta escribirlos en la carpeta /tmp y luego los mueve a la carpeta de destino, generalmente sites/default/files/css y /js. Pero apache2 no usa /tmp, por lo que esta operación falla y ninguno de los archivos css o js. Deshabilitar los archivos CSS y Javascript agregados solucionará este problema, pero luego se cargarán todos los archivos CSS y js individuales, por lo que esta no es una solución.

Puede confirmar este problema con el siguiente archivo PHP simple que indica que no se puede acceder a /tmp. Crea un archivo tmp y muestra el nombre del archivo. Inicialmente, el nombre del archivo está vacío porque llamar a tmpfile() devuelve NULL. Puse el siguiente código en test.php y lo llamé desde mi sitio, localhost/mysite/test.php

Eco "n";

Eco "n";

Echo “ n";

Eco "n";

Eco "n";

eco “

Si ve la fuente de la página Rn, encontrará una nueva línea en esta cadena.";

eco “

Prueba

“;

$tmpDir =sys_get_temp_dir( );

eco “

Directorio TMP ='$tmpDir'

“;

$archivo =tmpfile();

$ruta =stream_get_meta_data($archivo)['uri'];

eco “

Ruta del archivo tmp=”$ruta”

“;

Eco "n";

Eco "n";

?>

Esto resultó en "Ruta del archivo tmp ="

Encontré una solución a esto en los comentarios de la pregunta Stackoverflow del usuario One In a Million Apps. Esta solución cambia la configuración de Apache2 de PrivateTmp=true a PrivateTmp=false. Tenga en cuenta que el cambio de Apache2 para usar un directorio tmp privado se realizó por razones de seguridad y la mayoría de las aplicaciones se pueden configurar para usar una carpeta tmp diferente. Intenté esto con Drupal pero no pude hacerlo funcionar. Este es mi primer intento de ejecutar Drupal en Linux y quería que las cosas "simplemente funcionaran" en mi computadora portátil sin preocuparme por la seguridad.

Primero, busque el archivo que contiene PrivateTmp en el directorio /lib:

%>sudo find/mount -type F -exec grep -e “PrivateTmp” ‘{}’ ‘;’ -print

Esto me dio una larga lista de coincidencias. Busque el archivo que contiene el archivo apache2.service. En mi caso se encontró en /usr/lib/systemd/system/apache2.service. copie este archivo a /etc. Directorio. Edite /etc/apache2.services y cambie PrivateTmp=true a PrivateTmp=false, guarde y reinicie el servicio Apache2.

systemctl reiniciar apache2

Vuelva a ejecutar la página test.php y debería ver el archivo tmp llamado que confirma el acceso a la carpeta /tmp.

Borre todos los cachés de Drupal y vuelva a cargar las páginas. Ahora deberían mostrarse correctamente. No sé por qué, pero la función Borrar caché de Drupal no siempre me funciona. Eliminar manualmente todos los archivos en sites/default/files/css js y luego borrar las tablas de caché con PhpMyAdmin siempre funciona.

Configurar la depuración de VSCode

Configurar Xdebug

Primero instale los paquetes Remote – WSL y PHP Debug de Felix Becker en VSCode.

Luego instalé Xdebug

sudo apt-fast php7.3-xdebug

Esta instalada la versión 3.02 de Xdebug.

Intenté configurarlo siguiendo los muchos ejemplos en la web. Nada funcionó. Resultó que la mayoría de los ejemplos son para Xdebug 2.x, y estos ajustes de configuración ya no funcionan con 3.x

Finalmente conseguí que funcionara con la siguiente configuración de php.ini.

Necesitaba agregar lo siguiente a /etc/php/7.3/apache2/php.ini y /etc/php/7.3/cli/php.ini en mi sistema

Puede encontrar la ubicación de su xdebug.so yendo al archivo de directorio /lib y luego ejecutando

encontrar -nombre xdebug.so [xdebug]

zend_extension =./lib/php/20180731/xdebug.so

xdebug.start_with_request =Activar

xdebug.mode =depurar

xdebug.discover_client_host =1

xdebug.log =/tmp/xdebug_remote.log

xdebug.puerto_cliente =9003

Configurar código VSC

La depuración remota en VSCode utiliza un archivo launch.json almacenado en la raíz del directorio de su proyecto en .vscode/launch.json.

Puede crear el archivo launch.json usando la interfaz de usuario de VSCode, pero me resulta más fácil crearlo manualmente. Vaya a la raíz de su sitio web y cree un directorio .vscode. Cree un archivo launch.json y cárguelo en VSCode.

$>mkdir .vscode

$>CD .vscode

$>toque launch.json

$>código de lanzamiento.json

Pegue el siguiente json en el archivo y guárdelo.

{

// Use IntelliSense para conocer los posibles atributos.

// Pase el cursor para ver las descripciones de los atributos existentes.

// Para obtener más información, visite:https://go.microsoft.com/fwlink/?Links=830387

“Ejecución”:“0.2.0”,

“Configuraciones”:[

{

“nombre”:“Escuchar XDebug”,

“tipo”:“php”,

“solicitud”:“lanzamiento”,

“puerto”:9003,

“stopOnEntry”:verdadero,

“registro”:verdadero,

“asignaciones de rutas”:

{

“/var/www/html”:“${raíz del espacio de trabajo}”

},

{

“name”:“Ejecutar el script actualmente abierto”,

“tipo”:“php”,

“solicitud”:“lanzamiento”,

“programa”:“${archivo}“,

"cwd":"${archivoDirname}",

“puerto”:9003

]

}

Tenga en cuenta que en pathMappings, donde tengo "/var/www/html", debe poner la ruta completa a la raíz de su sitio web.

Cierra Código VSC. En el símbolo del sistema de WSL Linux, vuelva a la raíz de su sitio web y cargue el proyecto en VSCode. Suponiendo que todavía esté en el directorio .vscode,

$>CD ..

$>codificar.

Esto debería cargar el proyecto en VSCode y debería ver la estructura de directorios completa de su proyecto a la izquierda. Abra su página de inicio, p. B. index.php y agregue un punto de interrupción. Presione F5 para iniciar la depuración. Vaya a un navegador web y cargue el sitio. Vuelva a VSCode y debería ver que se detuvo en su punto de interrupción.

El código no funciona con zsh shell

De manera predeterminada, WSL está configurado para funcionar con el shell bash y ve la ruta al ejecutable de VSCode en la RUTA. Cambié a zsh y VSCode dejaría de ejecutarse. La solución fue poner un alias en .zshrc. escribir

$>CD~

$>Código .zshrc

Agregue el siguiente alias que apunta a la ruta completa a la carpeta del código ejecutable como se ve desde Ubuntu en WSL. Reemplace YourUserName con su nombre de usuario real de Windows.

alias Code="/mnt/c/Users/YourUserName/AppData/Local/Programs/MicrosoftVSCode/bin/code"

Ahora necesita volver a cargar la configuración de zsh con

$>fuente .zshrc

El código ahora debería cargarse desde el shell zsh.

¡¡Eso es todo!! Estos pasos finalmente hicieron que la depuración de Drupal y VSCode funcionara correctamente para mí. Me tomó dos días darme cuenta de todo esto. ¡Soy un novato! Espero que esto te funcione y te ahorre algo de tiempo.

Solo un recordatorio de mi entorno. Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows Terminal, VSCode con Remote – WSL y paquetes PHP Debug Felix Becker.

¡Feliz codificación!