headless wp starter

ชุด WordPress + React Starter ของ Postlight เป็นชุดเครื่องมืออัตโนมัติที่จะหมุนสามสิ่ง:

1. แบ็กเอนด์ WordPress ที่ให้บริการข้อมูลผ่าน WP REST API และ GraphQL
2. ตัวอย่างตอบสนองส่วนหน้าขับเคลื่อนโดย WP GraphQL API ซึ่งรองรับโพสต์หน้าหมวดหมู่เมนูการค้นหาและการลงชื่อเข้าใช้ผู้ใช้
3. อีกตัวอย่างเซิร์ฟเวอร์ที่แสดงผลส่วนหน้าโดยใช้ next.js ขับเคลื่อนโดย WP REST API

คุณสามารถอ่านทั้งหมดเกี่ยวกับเรื่องนี้ในบทนำที่มีประโยชน์นี้

มีอะไรอยู่ข้างใน:

• ตัวติดตั้งอัตโนมัติที่ bootstraps การติดตั้ง WordPress หลักที่ให้ API REST ที่มั่นคงและมั่นคง
• ปลั๊กอินที่เปิดเผย GraphQL API ที่ใหม่กว่าสำหรับ WordPress
• ปลั๊กอิน WordPress ที่คุณต้องตั้งค่าประเภทโพสต์ที่กำหนดเองและฟิลด์ที่กำหนดเอง (ฟิลด์ที่กำหนดเองขั้นสูงและประเภทโพสต์ที่กำหนดเอง UI)
• ปลั๊กอินที่เปิดเผยฟิลด์ที่กำหนดเองและเมนู WordPress ใน WP REST API (ACF ถึง WP API และ WP-REST-API V2 เมนู)
• ปลั๊กอินการรับรองความถูกต้องของ JWT: JWT WP REST และ JWT WP GraphQl
• รหัสธีม WordPress เริ่มต้นทั้งหมดและการตั้งค่าที่ไม่มีส่วนหัวรวมถึงการลิงก์ถาวรสวยส่วนหัวของ CORS Allow-Origin และฟังก์ชั่นการบันทึกที่มีประโยชน์สำหรับการดีบักง่ายๆ
• กลไกสำหรับการนำเข้าข้อมูลได้อย่างง่ายดายจากการติดตั้ง WordPress ที่มีอยู่ทุกที่บนเว็บโดยใช้ WP โยกย้าย DB Pro และปลั๊กอินประกอบ (จำเป็นต้องใช้ใบอนุญาต)
• ตัวอย่างแอพ React Frontend Frontend ที่ขับเคลื่อนโดย GraphQL
• อีกตัวอย่างหนึ่งคือแอป React Frontend Frontend, Server-Side ที่แสดงผ่าน Next.js ขับเคลื่อนโดย WP REST API
• คอนเทนเนอร์และสคริปต์ Docker เพื่อจัดการพวกเขาเพื่อเรียกใช้แอพ React Frontend และแบ็กเอนด์ในเครื่องหรือปรับใช้กับผู้ให้บริการโฮสติ้งใด ๆ ด้วยการสนับสนุน Docker

เริ่มต้นกันเถอะ

ติดตั้ง

วิชาบังคับก่อน: ก่อนที่คุณจะเริ่มคุณต้องติดตั้ง Docker บน Linux คุณอาจต้องติดตั้ง compose docker แยกกัน

Docker เขียนสร้างและเริ่มสี่คอนเทนเนอร์โดยค่าเริ่มต้น: db-headless , wp-headless , frontend และ frontend-graphql :

 docker-compose up -d

รอเพียงไม่กี่นาที สำหรับ Docker เพื่อสร้างบริการเป็นครั้งแรก หลังจากการสร้างครั้งแรกการเริ่มต้นควรใช้เวลาเพียงไม่กี่วินาที

คุณสามารถติดตามเอาต์พุต Docker เพื่อดูการสร้างความคืบหน้าและบันทึก:

 docker-compose logs -f

หรือคุณสามารถใช้เครื่องมือนักเทียบท่าที่มีประโยชน์เช่นปลั๊กอิน kitematic และ / หรือ vscode docker เพื่อติดตามบันทึกเริ่ม / หยุด / ลบคอนเทนเนอร์และรูปภาพ

ตัวเลือก: คุณสามารถเรียกใช้ส่วนหน้าในเครื่องในขณะที่ WordPress ยังคงทำงานบน Docker:

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

เมื่อคอนเทนเนอร์ทำงานอยู่คุณสามารถเยี่ยมชม Frontends React และ Backend WordPress Admin ในเบราว์เซอร์ของคุณ

ส่วนหน้า

ชุดเริ่มต้นนี้ให้สองคอนเทนเนอร์ส่วนหน้า:

• คอนเทนเนอร์ frontend ที่ขับเคลื่อนโดย WP REST API นั้นแสดงผลด้านเซิร์ฟเวอร์โดยใช้ next.js และเปิดตัวในพอร์ต 3000 : http: // localhost: 3000
• คอนเทนเนอร์ frontend-graphql ขับเคลื่อนโดย graphql, เปิดตัวบนพอร์ต 3001 : http: // localhost: 3001

นี่คือสิ่งที่ส่วนหน้าดูเหมือน:

คุณสามารถติดตามเอาต์พุต yarn start โดยเรียกใช้คำสั่ง logs ทำงานของ Docker-compose ตามด้วยชื่อคอนเทนเนอร์ ตัวอย่างเช่น:

 docker-compose logs -f frontend

หากคุณต้องการรีสตาร์ทกระบวนการใหม่ให้รีสตาร์ทคอนเทนเนอร์:

 docker-compose restart frontend

PS: การเรียกดูส่วนหน้าต่อไปในโหมดการพัฒนาค่อนข้างช้าเนื่องจากหน้าเว็บถูกสร้างขึ้นตามความต้องการ ในสภาพแวดล้อมการผลิตจะมีการปรับปรุงที่สำคัญในการโหลดหน้าเว็บ

แบ็กเอนด์

คอนเทนเนอร์ wp-headless เปิดเผย Apache บนพอร์ตโฮสต์ 8080 :

• Dashboard: 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 เปิดเผย MySQL บนพอร์ตโฮสต์ 3307 :

 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 ใหม่จากศูนย์ Run:

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

หากต้องการนำเข้าข้อมูลจาก mysqldump ด้วย mysql ให้เรียกใช้:

 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 โยกย้าย DB Pro เพื่อเชื่อมต่อกับการติดตั้ง WordPress อื่นและนำเข้าข้อมูลจากมัน (จะต้องมีใบอนุญาตโปร)

ในการทำเช่นนั้นชุดแรก MIGRATEDB_LICENSE & MIGRATEDB_FROM ใน .env และสร้างคอนเทนเนอร์ใหม่เพื่อออกกฎหมายการเปลี่ยนแปลง

 docker-compose up -d

จากนั้นเรียกใช้สคริปต์นำเข้า:

 docker exec wp-headless migratedb_import

หากคุณต้องการฟังก์ชั่นขั้นสูงเพิ่มเติมลองดูคำสั่ง WP-CLI ที่มีอยู่:

 docker exec wp-headless wp help migratedb

ขยายส่วนที่เหลือและ graphql apis

ณ จุดนี้คุณสามารถเริ่มตั้งค่าฟิลด์ที่กำหนดเองใน WordPress Admin และหากจำเป็นให้สร้างจุดสิ้นสุด API REST ที่กำหนดเองในธีมเริ่มต้น WordPress Starter

รหัสธีมหลักอยู่ใน wordpress/wp-content/themes/postlight-headless-wp

นอกจากนี้คุณยังสามารถแก้ไขและขยาย GraphQL API ตัวอย่างของการสร้างประเภทที่กำหนดเองและการลงทะเบียนตัวแก้ไขอยู่ใน: wordpress/wp-content/themes/postlight-headless-wp/inc/graphql

REST & GRAPHQL JWT Authentication

เพื่อให้ผู้ใช้ WordPress มีความสามารถในการลงชื่อเข้าใช้ผ่านแอพส่วนหน้าใช้บางอย่างเช่นเครื่องกำเนิดเกลือ WordPress เพื่อสร้างความลับสำหรับ 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 Autofix:

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

ในการผ้าสำลีและจัดรูปแบบแอพ JavaScript ทั้งไฟล์การกำหนดค่าที่สวยงามและ ESLINT จะรวมอยู่ด้วย

การโฮสติ้ง

โฮสต์ WordPress ส่วนใหญ่ไม่ได้โฮสต์แอปพลิเคชันโหนดดังนั้นเมื่อถึงเวลาที่จะไปสดคุณจะต้องหาบริการโฮสติ้งสำหรับส่วนหน้า

นั่นเป็นเหตุผลที่เราได้บรรจุแอพส่วนหน้าในคอนเทนเนอร์ Docker ซึ่งสามารถนำไปใช้กับผู้ให้บริการโฮสติ้งด้วยการสนับสนุน Docker เช่น Amazon Web Services หรือ Google Cloud Platform สำหรับทางเลือกที่รวดเร็วและง่ายขึ้นลองดูตอนนี้

การแก้ไขปัญหาข้อผิดพลาดทั่วไป

ทำลายการเปลี่ยนแปลงการเปลี่ยนแปลง - นักเทียบท่า

หากคุณมีโครงการตั้งค่าแล้วและอัปเดตเป็นคอมมิชชันที่ใหม่กว่า 99b4d7b คุณจะต้องผ่านกระบวนการติดตั้งอีกครั้งเนื่องจากโครงการอพยพไปยัง Docker คุณจะต้องย้ายข้อมูล MySQL ไปยังคอนเทนเนอร์ MySQL DB ใหม่

การแคชนักเทียบท่า

ในบางกรณีคุณต้องลบภาพ wp-headless (ไม่เพียง แต่คอนเทนเนอร์) และสร้างใหม่

ข้อผิดพลาด

หากคุณปรับใช้การติดตั้ง WordPress ของคุณและมีปัญหา CORS ให้แน่ใจว่าได้อัปเดต /wordpress/wp-content/themes/postlight-headless-wp/inc/frontend-origin.php พร้อม URL Origin Frontend ของคุณ

ดูสิ่งอื่นที่คุณต้องการเพิ่มที่นี่? กรุณาส่งคำขอดึง!

---

- โครงการ Labs จากเพื่อนของคุณที่ Postlight การเข้ารหัสมีความสุข!