headless wp starter
v2.0
O kit de partida WordPress + React sem cabeça do PostLight é um conjunto de ferramentas automatizado que aumentará três coisas:
Você pode ler tudo sobre isso nesta introdução útil.
O que está dentro:
Allow-Origin e funções úteis de registro para facilitar a depuração.Vamos começar.
Pré -requisito: Antes de começar, você precisa do Docker instalado. No Linux, pode ser necessário instalar o Docker-Compose separadamente.
O Docker compõe compra e inicia quatro contêineres por padrão: db-headless , wp-headless , frontend e frontend-graphql :
docker-compose up -d
Aguarde alguns minutos para o Docker construir os serviços pela primeira vez. Após a construção inicial, a startup deve levar apenas alguns segundos.
Você pode seguir a saída do Docker para ver o progresso e os logs da criação:
docker-compose logs -f
Como alternativa, você pode usar algumas ferramentas úteis do Docker, como kitematic e / ou plug -in do Docker do VSCODE para seguir logs, iniciar / parar / remover contêineres e imagens.
Opcional: você pode executar o front -end localmente enquanto o WordPress ainda é executado no Docker:
docker-compose up -d wp-headless
cd frontend && yarn && yarn start
Depois que os contêineres estiverem em execução, você pode visitar os front -ends react e o administrador do WordPress de back -end em seu navegador.
Este kit inicial fornece dois recipientes de front -end:
frontend alimentado pela API REST WP é o lado do servidor renderizado usando o Next.js e exposto na porta 3000 : http: // localhost: 3000frontend-graphql alimentado pelo GraphQL, exposto na porta 3001 : http: // localhost: 3001Aqui está como é o front -end:
Você pode acompanhar a saída yarn start executando o comando Docker-Compose logs seguido pelo nome do contêiner. Por exemplo:
docker-compose logs -f frontend
Se você precisar reiniciar esse processo, reinicie o contêiner:
docker-compose restart frontend
PS: Navegue no Frontend do Next.js no modo de desenvolvimento é relativamente lento devido ao fato de que as páginas estão sendo construídas sob demanda. Em um ambiente de produção, haveria uma melhoria significativa na carga da página.
O contêiner wp-headless expõe o Apache na porta host 8080 :
postlight / postlight )Este contêiner inclui algumas ferramentas de desenvolvimento:
docker exec wp-headless composer --help
docker exec wp-headless phpcbf --help
docker exec wp-headless phpcs --help
docker exec wp-headless phpunit --help
docker exec wp-headless wp --info
Os logs Apache/PHP estão disponíveis via docker-compose logs -f wp-headless .
O contêiner db-headless expõe o MySQL na porta host 3307 :
mysql -uwp_headless -pwp_headless -h127.0.0.1 -P3307 wp_headless
Você também pode executar um shell MySQL no contêiner:
docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless
Para reinstalar o WordPress do zero, execute:
docker exec wp-headless wp db reset --yes && docker exec wp-headless install_wordpress
Para importar dados de um mysqldump com mysql , execute:
docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless < example.sql
docker exec wp-headless wp search-replace https://example.com http://localhost:8080
Você pode usar um plug -in chamado WP Migre DB Pro para se conectar a outra instalação do WordPress e importar dados dele. (Uma licença profissional será necessária.)
Para fazer isso, primeiro defina MIGRATEDB_LICENSE & MIGRATEDB_FROM in .env e recrie contêineres para aprovar as alterações.
docker-compose up -d
Em seguida, execute o script de importação:
docker exec wp-headless migratedb_import
Se você precisar de uma funcionalidade mais avançada, consulte os comandos WP-CLI disponíveis:
docker exec wp-headless wp help migratedb
Nesse ponto, você pode começar a configurar campos personalizados no administrador do WordPress e, se necessário, criando pontos de extremidade da API de REST personalizados no tema Postlight Headless WordPress Starter.
O código temático primário está localizado no wordpress/wp-content/themes/postlight-headless-wp .
Você também pode modificar e estender a API do GraphQL, um exemplo de criação de um tipo personalizado e registro de um resolvedor está localizado em: wordpress/wp-content/themes/postlight-headless-wp/inc/graphql .
Para dar aos usuários do WordPress a capacidade de fazer login através do aplicativo front-end, use algo como o gerador de sal do WordPress para gerar um segredo para o JWT e depois definá-lo em wp-config.php
Para a API REST:
define('JWT_AUTH_SECRET_KEY', 'your-secret-here');
Para a API do GraphQL:
define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-here');
Leia a documentação JWT REST e JWT GraphQL para obter mais informações.
Lembre -se de fingir seu código à medida que avança.
Para fazer modificações de temas do WordPress, você pode usar php_codesniffer como este:
docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcs -v .
Você também pode tentar erros de phpcs automaticamente:
docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcbf -v .
Para fingir e formatar os aplicativos JavaScript, os arquivos de configuração mais bonitos e ESLint estão incluídos.
A maioria dos hosts do WordPress também não hospeda aplicativos de nós; portanto, quando é hora de ir ao ar, você precisará encontrar um serviço de hospedagem para o front -end.
É por isso que embalamos o aplicativo de front -end em um contêiner do Docker, que pode ser implantado em um provedor de hospedagem com suporte ao Docker, como a Amazon Web Services ou o Google Cloud Platform. Para uma alternativa rápida e fácil, confira agora.
Alerta de mudança de quebra - Docker
Se você já tivesse configurado o projeto e atualizado para um comprometimento mais recente de 99b4d7b , precisará passar pelo processo de instalação novamente porque o projeto foi migrado para o Docker. Você também precisará migrar dados MySQL para o novo contêiner MySQL DB.
Docker cache
Em alguns casos, você precisa excluir a imagem wp-headless (não apenas o contêiner) e reconstruí-la.
Erros de cors
Se você implantou sua instalação do WordPress e está tendo problemas de CORS, certifique-se de atualizar /wordpress/wp-content/themes/postlight-headless-wp/inc/frontend-origin.php com o URL de origem frontend.
Veja mais alguma coisa que você gostaria de adicionar aqui? Por favor, envie uma solicitação de tração!
? Um projeto de laboratórios de seus amigos no Postlight. Codificação feliz!
