Ubuntu 20.04, WSL2, VSCode e Drupal 8 - Consertando as “pegadinhas”

A Microsoft finalmente entregou uma solução fantástica para o desenvolvimento de aplicativos Linux no Windows.  O subsistema do Windows para Linux, WSL2, é bastante fácil de instalar e colocar em funcionamento, especialmente se você já estiver familiarizado com o Linux.  Mesmo se você não estiver, existem muitos artigos muito bons sobre como fazer uma instalação básica e funcionar.

O desenvolvimento de aplicativos Linux PHP usando VSCode no Windows 10 é a experiência mais estável e contínua que se pode obter. Ainda assim, várias “pegadinhas” que encontrei não foram descritas em nenhum dos artigos que encontrei sobre a configuração do LAMP no Ubuntu e WSL2.

Eu tinha experiência limitada com Linux e dependia muito de artigos escritos por aqueles que vieram antes de mim.  Enquanto eles me levaram até lá, encontrei vários problemas para fazer o Drupal 8 rodar sem erros e depurar funcionando no VSCode.  As soluções foram encontradas nas seções de comentários das perguntas postadas na internet. Isso levou muitas horas de pesquisa e espero salvar pessoas apresentando as soluções que encontrei neste artigo.

Meu ambiente é Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows Terminal, VSCode com Remoto - pacotes WSL e PHP Debug de Felix Becker.  Estou executando o WSL do Powershell no Terminal do Windows.

Antes de começarmos, aqui estão algumas recomendações que podem economizar seu tempo.

Instalar e usar o apt-fast em vez do apt pode realmente acelerar as instalações e atualizações.  Onde eu moro, a internet tem baixa largura de banda e é lenta, e o apt-fast é muito mais rápido que o apt.

Você pode “fazer backup e restaurar” sua distribuição Linux usando WSL Export and Import. Como acontece com qualquer sistema, é aconselhável sempre manter um backup atualizado.

Mariadb instala corretamente, mas não pode reiniciar ou obter status

A instalação do Mariadb correu bem.  Sem erros ou avisos.  Quando tentei verificar o status, obtive um erro em relação ao sistema.

$> systemctl status mysql
O sistema não foi inicializado com systemd como sistema init (PID 1). Não pode operar.

O motivo desse erro é que a Microsoft não oferece suporte a systemd em WSL.  Felizmente, a Arkane Systems criou um pacote system-genie para habilitar o systemd .  Sugiro ler a página da web completamente antes de tentar as instruções a seguir, que foram tiradas dessa página. Existem instruções ligeiramente diferentes para distribuições diferentes do Ubuntu.

Primeiro, você precisa instalar o .Rede 5.0 tempo de execução

$> 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

Em seguida, precisamos configurar o repositório wsl-transdebian

$> sudo apt-fast instale apt-transport-https
$> wget -O / etc / apt / trusted.gpg.d / wsl-transdebian.gpg https: // arkane-systems.github.io / wsl-transdebian / apt / wsl-transdebian.gpg
$> chmod a + r / etc / apt / trusted.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 main
$> deb-src https: // arkane-systems.github.io / wsl-transdebian / apt / bullseye main
$> atualização rápida do apt

Agora podemos instalar o pacote system-genie.

sudo apt-fast install -y systemd-genie

Saia do shell do Linux e desligue o WSL do Power shell

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

Reinicie o WSL com um gênio do prompt do Powershell.

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

Você verá “Waiting for systemd… .!!!!!!!!!!!!!!!”.  Demora 180 segundos para carregar totalmente.  Apenas espere terminar.  Quando estiver pronto, sua nova janela de shell deve ficar assim:

Aguardando systemd… !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Tempo limite esgotado ao esperar que o systemd entre no estado de execução.
Isso pode indicar um erro de configuração do systemd.
Tentando continuar.

Confirme se o genie está instalado e se o systemd está funcionando:

systemctl status mariadb

Você deve obter a saída de status para mariadb.  Observe que systemctl status mysql também funciona.

A Arkane Systems recomenda encerrar sua sessão WSL genie com wsl -shutdown.  Isso irá liberar toda a memória usada pelo WSL no Windows.

Drupal instala, mas nenhum CSS é carregado

Depois de executar a instalação básica do Drupal 8, as páginas não tinham formatação.  A visualização do código-fonte da página mostrou que nenhum arquivo CSS estava sendo carregado. Levei dois dias para descobrir isso, mas a história curta é que o Drupal assume que apache2 está usando o diretório / tmp, mas não está.  Por padrão, o apache2 é configurado para usar um diretório tmp privado.  Estranhamente chamando sys_get_temp_dir () de php return / tmp, mas não é isso que o apache2 está usando.  Quando o Drupal cria seus arquivos css e js otimizados, ele primeiro tenta gravá-los na pasta / tmp e, em seguida, move-os para a pasta de destino, normalmente sites / default / files / css e / js. Mas o apache2 não está usando / tmp, então esse processo falha e nenhum dos arquivos css ou js. Desmarcar arquivos CSS e Javascript agregados irá ignorar isso, mas todos os arquivos css e js individuais serão carregados, portanto, esta não é uma solução.

Você pode confirmar que este problema / tmp não está acessível com o seguinte arquivo php simples. Ele cria um arquivo tmp e exibe o nome do arquivo.  Inicialmente, o nome do arquivo ficará em branco porque a chamada para tmpfile () retorna NULL.  Eu coloquei o seguinte código em teste.php e chamei do meu site, localhost / mysite / test.php

echo "\ n ";
echo "\ n ";
echo "\ n ";
echo "\ n ";
echo "\ n ";
echo "

Se você visualizar o código-fonte da página \ r \ n, você encontrará uma nova linha nesta string.";
 
echo "

testando

";
$ tmpDir = sys_get_temp_dir ();
echo "

Diretório TMP = '$ tmpDir'

";
$ file = tmpfile ();
$ path = stream_get_meta_data ($ file) ['uri'];
echo "

Caminho do arquivo tmp = '$ path'

";
 
echo "\ n ";
echo "\ n ";
?>
 
Isso resultou em "Caminho do arquivo tmp ="

Eu encontrei uma solução para isso nos comentários da pergunta Stackoverflow feita pelo usuário Um em um milhão de aplicativos.  Esta solução altera a configuração do apache2 de PrivateTmp = true para PrivateTmp = false. Observe que alterar o apache2 para usar um diretório tmp privado foi feito por razões de segurança, e a maioria dos aplicativos pode ser configurada para usar uma pasta tmp diferente.  Eu tentei isso com o Drupal, mas não consegui fazer funcionar. Esta é minha primeira tentativa de executar o Drupal no Linux, e eu queria que as coisas "simplesmente funcionassem" no meu laptop com pouca preocupação com a segurança.

Primeiro, procure o arquivo que contém PrivateTmp usando isso do diretório / lib:

%> sudo find / -mount -tipo f -exec grep -e "PrivateTmp" '' ';' -impressão

Isso me deu uma longa lista de correspondências.  Procure aquele que contém o arquivo apache2.serviço.  No meu caso, foi encontrado em / usr / lib / systemd / system / apache2.serviço.  copie este arquivo para o / etc. diretório. Editar / etc / apache2.serviços e altere PrivateTmp = true para PrivateTmp = false, salve e reinicie o serviço apache2.

systemctl restart apache2

Execute novamente o teste.página php novamente, e você deve obter o arquivo tmp nomeado exibido, confirmando o acesso à pasta / tmp.

Limpe todos os caches Drupal e recarregue as páginas.  Eles agora devem ser exibidos corretamente. Não sei por que, mas a função Drupal Clear Cache nem sempre funciona para mim.  Excluir manualmente todos os arquivos em sites / default / files / css js e, em seguida, usar PhpMyAdmin para esvaziar as tabelas de cache sempre funciona.

Configurando a depuração de VSCode

Configurar o Xdebug

Primeiro, instale os pacotes Remote - WSL e PHP Debug de Felix Becker no VSCode.

Então instalei o Xdebug

sudo apt-fast php7.3-xdebug

Esta versão instalada 3.02 de Xdebug.

Tentei configurá-lo seguindo os muitos exemplos na internet.  Nada funcionou.  Acontece que a maioria dos exemplos são para Xdebug 2.x, e essas configurações não funcionam mais com 3.x

Eu finalmente consegui trabalhar com o seguinte php.configurações ini.

Tive que adicionar o seguinte a / etc / php / 7.3 / apache2 / php.ini e / etc / php / 7.3 / cli / php.ini no meu sistema.

Você pode encontrar a localização do seu xdebug.então, movendo para o arquivo de diretório / lib e executando

find -name xdebug.então [xdebug]
zend_extension = ./ lib / php / 20180731 / xdebug.tão
xdebug.start_with_request = trigger
xdebug.mode = debug
xdebug.discovery_client_host = 1
xdebug.log = / tmp / xdebug_remote.registro
xdebug.client_port = 9003

Configurar VSCode

A depuração remota no VSCode usa um lançamento.arquivo json armazenado na raiz do diretório do seu projeto em .vscode / launch.json.

Você pode criar o lançamento.arquivo json por meio da IU do VSCode, mas acho mais fácil criá-lo manualmente.  Vá até a raiz do seu site e crie um .diretório vscode. Crie um lançamento.arquivo json e carregue-o no VSCode.

$> mkdir .vscode
$> cd .vscode
$> toque em lançar.json
$> lançamento de código.json

Coloque o seguinte json no arquivo e salve-o.

// Use o IntelliSense para aprender sobre os possíveis atributos.
// Passe o mouse para ver as descrições dos atributos existentes.
// Para obter mais informações, visite: https: // go.microsoft.com / fwlink /?linkid = 830387
"versão": "0.2.0 ",
"configurações": [

"name": "Ouça o XDebug",
"tipo": "php",
"pedido": "lançar",
"porta": 9003,
"stopOnEntry": verdadeiro,
"log": verdadeiro,
"pathMappings":

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

,

"name": "Lançar o script atualmente aberto",
"tipo": "php",
"pedido": "lançar",
"programa": "$ arquivo",
"cwd": "$ fileDirname",
"porta": 9003

]

Observe em pathMappings, onde tenho “/ var / www / html”, você deve colocar o caminho completo para a raiz do seu site.

Fechar VSCode. No prompt do WSL Linux, volte para a raiz do seu site e carregue o projeto em VSCode.  Supondo que você ainda esteja no .diretório vscode,

$> cd…
$> código .

Isso deve carregar o projeto no VSCode, e você deve ver a árvore de diretórios completa do seu projeto à esquerda.  Abra sua página inicial, como índice.php, e adicionar um ponto de interrupção.  Pressione F5 para iniciar a depuração.  Vá para um navegador da web e carregue o site. Volte para o VSCode e você verá que ele foi interrompido no seu ponto de interrupção.

O código não funciona com zsh Shell

Por padrão, o WSL é configurado para funcionar com o shell Bash e vê o caminho para o executável VSCode no PATH.  Mudei para zsh e o VSCode não funcionava mais.  A solução foi colocar um alias em .zshrc

$> cd ~
$> código .zshrc

Adicione o seguinte alias, que aponta para o caminho completo para a pasta executável do código, conforme visto pelo Ubuntu em WSL.  Substitua YourUserName pelo seu nome de usuário real do Windows.

alias code = "/ mnt / c / Users / YourUserName / AppData / Local / Programs / Microsoft \ VS \ Code / bin / code"

Agora você precisa recarregar a configuração zsh com

$> fonte .zshrc

O código agora deve carregar do shell zsh.

É isso!!  Essas etapas finalmente fizeram com que a depuração do Drupal e VSCode funcionasse corretamente para mim.  Levei dois dias para descobrir tudo isso. Eu sou um novato! Felizmente, isso funciona para você e economiza algum tempo.

Apenas um lembrete do meu ambiente.  Windows 10 20H2, Ubuntu 20.04, PHP 7.3, MariaDB 10.4.17, Drupal 8.9.13, Xdebug 3.02, Windows Terminal, VSCode com Remoto - pacotes WSL e PHP Debug por Felix Becker.

Happy Coding!