headless wp starter

Postlight의 Headless WordPress + React 스타터 키트는 세 가지를 회전시키는 자동화 된 도구 세트입니다.

1. WP REST API 및 GraphQL을 통해 데이터를 제공하는 WordPress 백엔드.
2. 게시물, 페이지, 카테고리, 메뉴, 검색 및 사용자 로그인을 지원하는 WP GraphQL API로 구동되는 샘플 반응 프론트 엔드.
3. WP REST API에 의해 구동되는 Next.js를 사용하여 다른 샘플 서버 측면 렌더링 된 React Frontend.

이 편리한 소개에서 그것에 대한 모든 것을 읽을 수 있습니다.

내부 :

• 확립 된 안정적인 REST API를 제공하는 핵심 WordPress 설치를 부트 스트랩하는 자동화 된 설치 프로그램.
• WordPress에 대한 최신 정보를 제공하지 않는 GraphQL API를 노출시키는 플러그인.
• WordPress 플러그인 사용자 정의 게시물 유형 및 사용자 정의 필드 (고급 사용자 정의 필드 및 사용자 정의 게시물 유형 UI)를 설정해야합니다.
• WP REST API (ACF에서 WP API 및 WP-REST-API V2 메뉴)에 해당 사용자 정의 필드 및 WordPress 메뉴를 노출시키는 플러그인.
• JWT 인증 플러그인 : JWT WP REST 및 JWT WP GraphQL.
• 예쁜 퍼머 링크, CORS Allow-Origin 헤더 및 유용한 디버깅을위한 유용한 로깅 기능을 포함하여 모든 스타터 워드 프레스 테마 코드 및 설정 헤드리스 요구 사항.
• WP Migrate DB Pro와 함께 제공되는 플러그인 (라이센스 필수)을 사용하여 웹의 어느 곳에서나 기존 WordPress 설치에서 데이터를 쉽게 가져 오는 메커니즘.
• 샘플, 스타터 프론트 엔드 반응 앱이 GraphQL로 구동됩니다.
• WP REST API로 구동되는 Next.js를 통해 렌더링 된 다른 샘플 인 Starter Frontend React App.
• Docker 컨테이너 및 스크립트를 관리하기 위해 Frontend React Apps를 쉽게 실행하고 로컬로 백엔드하거나 Docker 지원을받은 호스팅 제공 업체에 배포 할 수 있습니다.

시작합시다.

설치하다

전제 조건 : 시작하기 전에 Docker를 설치해야합니다. Linux에서는 Docker-Compose를 별도로 설치해야 할 수도 있습니다.

Docker Compose는 기본적으로 4 개의 컨테이너 frontend frontend-graphql 하고 wp-headless 합니다 db-headless

 docker-compose up -d

Docker가 처음으로 서비스를 구축하기 위해 몇 분 동안 기다리십시오 . 초기 빌드 후 시작은 몇 초 밖에 걸리지 않아야합니다.

Docker 출력을 따라 건물 진행 상황 및 로그를 볼 수 있습니다.

 docker-compose logs -f

또는 Kitematic 및 / 또는 VScode Docker 플러그인과 같은 유용한 Docker 도구를 사용하여 로그를 따르고 컨테이너 및 이미지를 시작 / 중지 / 제거 할 수 있습니다.

선택 사항 : WordPress는 여전히 Docker에서 실행되는 동안 프론트 엔드를 로컬로 실행할 수 있습니다.

 docker-compose up -d wp-headless
cd frontend && yarn && yarn start

컨테이너가 실행되면 브라우저에서 React Frontends 및 백엔드 WordPress 관리자를 방문 할 수 있습니다.

프론트 엔드

이 스타터 키트는 두 개의 프론트 엔드 컨테이너를 제공합니다.

• WP REST로 구동되는 frontend 컨테이너 API는 Next.js를 사용하여 서버 측면 렌더링되며 포트 3000 에 노출됩니다 : http : // localhost : 3000
• frontend-graphql 컨테이너 GraphQL로 구동되는 Port 3001 에 노출됨 : http : // localhost : 3001

프론트 엔드의 모습은 다음과 같습니다.

Docker-Compose logs 명령을 실행하여 컨테이너 이름을 실행하여 yarn start 출력을 따라갈 수 있습니다. 예를 들어:

 docker-compose logs -f frontend

해당 프로세스를 다시 시작 해야하는 경우 컨테이너를 다시 시작하십시오.

 docker-compose restart frontend

추신 : 다음 페이지를 찾는 것은 개발 모드에서 JS Frontend를 찾는 것은 페이지가 주문형으로 구축되고 있다는 사실 때문에 비교적 느립니다. 생산 환경에서는 페이지로드가 크게 향상 될 것입니다.

백엔드

wp-headless 컨테이너는 호스트 포트 8080 에 Apache를 노출시킵니다.

• 대시 보드 : http : // localhost : 8080/wp-admin (기본 자격 증명 postlight / postlight )
• REST API : http : // localhost : 8080/wp-json
• GraphQL API : http : // localhost : 8080/GraphQL

이 컨테이너에는 몇 가지 개발 도구가 포함되어 있습니다.

 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

Apache/PHP 로그는 docker-compose logs -f wp-headless 통해 사용할 수 있습니다.

데이터 베이스

db-headless 컨테이너는 호스트 포트 3307 에 MySQL을 노출시킵니다.

 mysql -uwp_headless -pwp_headless -h127.0.0.1 -P3307 wp_headless

컨테이너에서 MySQL 쉘을 실행할 수도 있습니다.

 docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless

다시 설치/가져 오기

WordPress를 처음부터 다시 설치하려면 실행하십시오.

 docker exec wp-headless wp db reset --yes && docker exec wp-headless install_wordpress

mysql 사용하여 mysqldump에서 데이터를 가져 오려면 실행합니다.

 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

다른 WordPress 설치에서 데이터를 가져옵니다

WP Migrate DB Pro라는 플러그인을 사용하여 다른 WordPress 설치에 연결하고 데이터를 가져올 수 있습니다. (프로 라이센스가 필요합니다.)

이를 위해 먼저 .env 에서 MIGRATEDB_LICENSE & MIGRATEDB_FROM 을 설정하고 컨테이너를 재현하여 변경 사항을 제정하십시오.

 docker-compose up -d

그런 다음 가져 오기 스크립트를 실행합니다.

 docker exec wp-headless migratedb_import

보다 고급 기능이 필요한 경우 사용 가능한 WP-CLI 명령을 확인하십시오.

 docker exec wp-headless wp help migratedb

나머지와 그래프 QL API를 확장하십시오

이 시점에서 WordPress Admin에서 사용자 정의 필드를 설정하고 필요한 경우 Postlight Headless WordPress 스타터 테마에서 사용자 정의 REST API 엔드 포인트를 만들 수 있습니다.

기본 테마 코드는 wordpress/wp-content/themes/postlight-headless-wp 에 있습니다.

또한 사용자 정의 유형을 생성하고 리졸버를 등록하는 예제 인 GraphQL API를 수정하고 확장 할 수도 있습니다. wordpress/wp-content/themes/postlight-headless-wp/inc/graphql .

REST & GraphQL JWT 인증

WordPress 사용자에게 Frontend 앱을 통해 로그인 할 수있는 기능을 제공하려면 WordPress Salt Generator와 같은 것을 사용하여 JWT의 비밀을 생성 한 다음 wp-config.php 에서 정의하십시오.

나머지 API의 경우 :

 define('JWT_AUTH_SECRET_KEY', 'your-secret-here');

GraphQL API의 경우 :

 define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-here');

자세한 내용은 JWT REST 및 JWT GraphQL 문서를 읽으십시오.

일선

갈 때 코드를 보풀을 보는 것을 잊지 마십시오.

WordPress 테마 수정을 보려면 다음과 같은 php_codesniffer를 사용할 수 있습니다.

 docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcs -v .

PHPCS 오류를 자동화하려고 시도 할 수도 있습니다.

 docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcbf -v .

JavaScript 앱을 보풀 및 형식으로 보려면 Pretier 및 Eslint 구성 파일이 모두 포함됩니다.

호스팅

대부분의 WordPress 호스트는 노드 애플리케이션을 호스팅하지 않으므로 라이브로 갈 시간이되면 프론트 엔드 호스팅 서비스를 찾아야합니다.

그렇기 때문에 Amazon Web Services 또는 Google Cloud 플랫폼과 같은 Docker 지원이있는 호스팅 제공 업체에 배치 할 수있는 Docker 컨테이너에 Frontend 앱을 포장 한 이유입니다. 빠르고 쉬운 대안은 지금 확인하십시오.

일반적인 오류 문제 해결

변화 경고 - Docker

프로젝트가 이미 설정 한 다음 99b4d7b 보다 커밋 된 커밋으로 업데이트 된 경우 프로젝트가 Docker로 마이그레이션되었으므로 설치 프로세스를 다시 살펴 봐야합니다. MySQL 데이터를 새로운 MySQL DB 컨테이너로 마이그레이션해야합니다.

도커 캐싱

경우에 따라 wp-headless 이미지 (컨테이너뿐만 아니라)를 삭제하고 재 구축해야합니다.

Cors 오류

WordPress 설치를 배포하고 CORS 문제가있는 경우 /wordpress/wp-content/themes/postlight-headless-wp/inc/frontend-origin.php Frontend Origin URL로 업데이트하십시오.

여기에 추가하고 싶은 것이 있습니까? 풀 요청을 보내주세요!

---

? Postlight의 친구들로부터 실험실 프로젝트. 행복한 코딩!