Ubuntu 20.04, WSL2, VSCode y Drupal 8 solución de problemas

Microsoft finalmente ha entregado una solución fantástica para desarrollar aplicaciones de Linux en Windows.  El subsistema de Windows para Linux, WSL2, es bastante fácil de instalar y poner en marcha, 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.

Desarrollar aplicaciones PHP de Linux usando VSCode en Windows 10 es una experiencia tan estable y fluida que uno puede obtener. Aún así, varios "errores" con los que me encontré no se describieron en ninguno de los artículos que encontré sobre la configuración de LAMP en Ubuntu y WSL2.

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 llevaron la mayor parte del camino, encontré varios problemas para ejecutar Drupal 8 sin errores y la depuración funcionaba en VSCode.  Las soluciones se encontraron en las secciones de comentarios de 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 Remote - Paquetes WSL y PHP Debug de Felix Becker.  Estoy ejecutando WSL desde Powershell dentro de la Terminal de Windows.

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 utilizando WSL Export and Import. Como con cualquier sistema, es recomendable mantener siempre una copia de seguridad actualizada.

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

La instalación de Mariadb fue bien.  Sin errores ni advertencias.  Cuando intenté verificar el estado, recibí un error con respecto al sistema.

$> estado de systemctl mysql
El sistema no se ha iniciado con systemd como sistema de inicio (PID 1). No puedo operar.

El motivo de este error es que Microsoft no es compatible con systemd en WSL.  Afortunadamente, Arkane Systems creó un paquete system-genie para habilitar systemd .  Sugiero leer su página web detenidamente antes de probar las siguientes instrucciones, que fueron tomadas de esa página. Hay instrucciones ligeramente diferentes para distribuciones distintas de Ubuntu.

Primero, necesita instalar el .Neto 5.0 tiempo de ejecución

$> sudo apt-fast update
$> sudo sudo apt-fast install -y apt-transport-https
$> sudo apt-fast update
$> sudo apt-fast install -y dotnet-sdk-5.0

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

$> sudo apt-fast install apt-transport-https
$> wget -O / etc / apt / confiable.gpg.d / wsl-transdebian.gpg https: // arkane-systems.github.io / wsl-transdebian / apt / wsl-transdebian.gpg
$> chmod a + r / etc / apt / confiable.gpg.d / wsl-transdebian.gpg
$> gato << EOF > / etc / apt / sources.lista.d / wsl-transdebian.lista
$> deb https: // arkane-systems.github.io / wsl-transdebian / apt / bullseye principal
$> deb-src https: // arkane-systems.github.io / wsl-transdebian / apt / bullseye principal
$> actualización apt-fast

Ahora podemos instalar el paquete system-genie.

sudo apt-fast install -y systemd-genie

Salga de su shell de Linux y luego apague WSL desde Power Shell

PS C: \ Users \ UsrName> wsl --shutdown

Reinicie WSL con un genio desde el indicador de Powershell.

PS C: \ Users \ UsrName> wsl genie --s

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 systemd… !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Se agotó el tiempo de espera para que systemd entre en estado de ejecución.
Esto puede indicar un error de configuración de systemd.
Intentando 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 cerrar su sesión de WSL genie con wsl -shutdown.  Esto liberará toda la memoria utilizada por WSL en Windows.

Drupal se instala pero no se carga CSS

Después de ejecutar 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 estaban cargando archivos CSS. Me tomó dos días resolver esto, pero la historia corta es que Drupal asume que apache2 está usando el directorio / tmp, pero no.  De forma predeterminada, apache2 está configurado para usar un directorio tmp privado.  Curiosamente llamando, sys_get_temp_dir () desde php return / tmp, pero eso no es lo que apache2 está usando.  Cuando Drupal crea sus archivos css y js optimizados, primero intenta escribirlos en la carpeta / tmp, luego los mueve a la carpeta de destino, generalmente sitios / default / files / css y / js. Pero apache2 no usa / tmp, por lo que este proceso falla y ninguno de los archivos css o js. Desmarcar los archivos CSS y Javascript agregados evitará esto, pero luego se cargan todos los archivos css y js individuales, por lo que esta no es una solución.

Puede confirmar que no se puede acceder a este problema / tmp con el siguiente archivo php simple. Crea un tmpfile y muestra el nombre del archivo.  Inicialmente, el nombre del archivo estará en blanco porque la llamada a tmpfile () devuelve NULL.  Pongo el siguiente código en prueba.php y lo llamé desde mi sitio, localhost / mysite / test.php

eco "\norte";
eco "\norte";
eco "\norte";
eco "\norte";
eco "\norte";
eco "

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

pruebas

";
$ tmpDir = sys_get_temp_dir ();
eco "

Directorio de TMP = '$ tmpDir'

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

Ruta del archivo tmp = '$ ruta'

";
 
eco "\norte";
eco "\norte";
?>
 
Esto resultó en "Ruta del archivo tmp ="

Encontré una solución a esto en los comentarios de la pregunta de 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é eso 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 con poca preocupación por la seguridad.

Primero, busque el archivo que contiene PrivateTmp usando esto desde el directorio / lib:

%> sudo find / -mount -type f -exec grep -e "PrivateTmp" '' ';' -impresión

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

systemctl reiniciar apache2

Vuelva a ejecutar la prueba.php nuevamente, y debería mostrar el archivo tmp nombrado, confirmando el acceso a la carpeta / tmp.

Limpia todos los cachés de Drupal y vuelve a cargar las páginas.  Ahora deberían mostrarse correctamente. No sé por qué, pero la función Drupal Clear Cache no siempre me funciona.  Eliminar manualmente todos los archivos en sitios / default / files / css js, luego usar PhpMyAdmin para vaciar las tablas de caché siempre funciona.

Configuración de la depuración de VSCode

Configurar Xdebug

Primero, instale los paquetes Remote - WSL y PHP Debug by Felix Becker en VSCode.

Luego instalé Xdebug

sudo apt-fast php7.3-xdebug

Esta versión instalada 3.02 de Xdebug.

Intenté configurarlo siguiendo los muchos ejemplos en Internet.  Nada funcionó.  Resulta que la mayoría de los ejemplos son para Xdebug 2.x, y esos valores de configuración ya no funcionan con 3.X

Finalmente lo hice funcionar con el siguiente php.configuración de ini.

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

Puedes encontrar la ubicación de tu xdebug.así que moviéndose al archivo de directorio / lib y luego ejecutando

buscar -nombre xdebug.entonces [xdebug]
zend_extension = ./ lib / php / 20180731 / xdebug.entonces
xdebug.start_with_request = disparador
xdebug.mode = depurar
xdebug.discover_client_host = 1
xdebug.log = / tmp / xdebug_remote.Iniciar sesión
xdebug.puerto_cliente = 9003

Configurar VSCode

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

Puedes crear el lanzamiento.json a través de 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. Crea un lanzamiento.json y cárguelo en VSCode.

$> mkdir .vscode
$> cd .vscode
$> lanzamiento táctil.json
$> lanzamiento de código.json

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

// Utilice IntelliSense para conocer los posibles atributos.
// Desplácese para ver las descripciones de los atributos existentes.
// Para obtener más información, visite: https: // go.microsoft.com / fwlink /?linkid = 830387
"versión": "0.2.0 ",
"configuraciones": [

"name": "Escucha XDebug",
"tipo": "php",
"solicitud": "lanzamiento",
"puerto": 9003,
"stopOnEntry": verdadero,
"log": verdadero,
"pathMappings":

"/ var / www / html": "$ workspaceRoot"

,

"name": "Ejecutar el script actualmente abierto",
"tipo": "php",
"solicitud": "lanzamiento",
"programa": "$ archivo",
"cwd": "$ fileDirname",
"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.

Cerrar VSCode. En su indicador de WSL Linux, vuelva a la raíz de su sitio web y cargue el proyecto en VSCode.  Asumiendo que todavía estás en el .directorio vscode,

$> cd…
$> código .

Esto debería cargar el proyecto en VSCode, y debería ver el árbol de directorios completo de su proyecto a la izquierda.  Abra su página de inicio, como índice.php y agregue un punto de interrupción.  Presione F5 para comenzar a depurar.  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 se ejecuta con zsh Shell

De forma predeterminada, WSL está configurado para funcionar con el shell Bash y ve la ruta al ejecutable VSCode en la PATH.  Cambié a zsh y VSCode ya no se ejecutaría.  La solución fue poner un alias en .zshrc

$> cd ~
$> código .zshrc

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

alias code = "/ mnt / c / Users / YourUserName / AppData / Local / Programs / Microsoft \ VS \ Code / 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!!  Estos pasos finalmente lograron 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! Con suerte, esto funciona para usted y le ahorra 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 - Paquetes WSL y PHP Debug de Felix Becker.

Codificación feliz!