rendertron

rendertron

RenderTron เลิกใช้แล้ว

โปรดทราบว่าโครงการนี้ เลิกใช้แล้ว การเรนเดอร์แบบไดนามิกไม่ใช่วิธีการที่แนะนำและมีวิธีการที่ดีกว่าในการแสดงผลบนเว็บ

Rendertron จะไม่ได้รับการดูแลอย่างแข็งขัน ณ จุดนี้

RenderTron เป็นโซลูชันการแสดงผลโครเมี่ยมแบบไม่มีหัวออกแบบมาเพื่อแสดงผลและต่อเนื่องหน้าเว็บทันที

- สร้างด้วยหุ่นเชิด

☁การปรับใช้อย่างง่ายดายไปยัง Google Cloud

- ปรับปรุง SEO

RenderTron ได้รับการออกแบบมาเพื่อเปิดใช้งาน Web Progressive Web (PWA) ของคุณเพื่อให้บริการเนื้อหาที่ถูกต้องกับบอทใด ๆ ที่ไม่แสดงผลหรือเรียกใช้ JavaScript RenderTron ทำงานเป็นเซิร์ฟเวอร์ HTTP แบบสแตนด์อโลน RenderTron แสดงหน้าหน้าร้องขอโดยใช้หัวโครเมี่ยมแบบไม่มีหัวตรวจจับอัตโนมัติเมื่อ PWA ของคุณเสร็จสิ้นการโหลดและทำให้การตอบสนองกลับไปยังคำขอเดิม หากต้องการใช้ RenderTron แอปพลิเคชันของคุณจะกำหนดค่ามิดเดิลแวร์เพื่อพิจารณาว่าจะส่งคำขอไปยัง RenderTron หรือไม่ RenderTron เข้ากันได้กับเทคโนโลยีฝั่งไคลเอ็นต์ทั้งหมดรวมถึงส่วนประกอบของเว็บ

สารบัญ

• มิดเดิลแวร์
• API
  • ทำให้
  • ภาพหน้าจอ
  • แคชที่ไม่เปลี่ยนแปลง
• คำถามที่พบบ่อย
  • พารามิเตอร์การสืบค้น
  • หน้าเรนเดอร์
  • ทำให้หมดเวลางบประมาณ
  • ส่วนประกอบของเว็บ
  • รหัสสถานะ
• การติดตั้งและปรับใช้
  • อาคาร
  • ทำงานในพื้นที่
  • การปรับใช้กับแพลตฟอร์ม Google Cloud
  • การปรับใช้โดยใช้นักเทียบท่า
  • การกำหนดค่า
  • การแก้ไขปัญหา

มิดเดิลแวร์

เมื่อคุณมีบริการขึ้นและทำงานแล้วคุณจะต้องใช้เลเยอร์การให้บริการที่แตกต่างกัน สิ่งนี้จะตรวจสอบตัวแทนผู้ใช้เพื่อตรวจสอบว่าจำเป็นต้องมีการทำล่วงหน้าหรือไม่

นี่คือรายการมิดเดิลแวร์ที่ใช้กับบริการ RenderTron:

• Express.js Middleware
• ฟังก์ชั่น Firebase (ดูแลชุมชน)
• asp.net Core Middleware (ดูแลชุมชน)
• มิดเดิลแวร์ Python (Django) และมัณฑนากร (ดูแลชุมชน)

RenderTron ยังเข้ากันได้กับมิดเดิลแวร์ prerender.io หมายเหตุ: รายการตัวแทนผู้ใช้แตกต่างกันที่นั่น

API

ทำให้

 GET /render/<url>

จุดสิ้นสุด render จะทำให้หน้าเว็บของคุณและทำให้หน้าเว็บของคุณเป็นอนุกรม ตัวเลือกถูกระบุเป็นพารามิเตอร์แบบสอบถาม:

• ค่าเริ่ม mobile เป็น false เปิดใช้งานโดยผ่าน ?mobile เพื่อขอเวอร์ชันมือถือของเว็บไซต์ของคุณ
• refreshCache : ผ่าน refreshCache=true เพื่อละเว้นผลลัพธ์ที่แคชที่อาจแคชและปฏิบัติต่อคำขอราวกับว่ายังไม่ได้แคช ผลลัพธ์การเรนเดอร์ใหม่ใช้เพื่อแทนที่ผลลัพธ์ก่อนหน้า

ภาพหน้าจอ

 GET /screenshot/<url>
POST /screenshot/<url>

จุดสิ้นสุดของ screenshot สามารถใช้เพื่อตรวจสอบว่าหน้าของคุณมีการเรนเดอร์อย่างถูกต้อง

จุดปลายทั้งสองรองรับพารามิเตอร์การสืบค้นต่อไปนี้:

• ค่าเริ่มต้น width ถึง 1000 - ระบุความกว้างของวิวพอร์ต
• height เริ่มต้นเป็น 1000 - ระบุความสูงของวิวพอร์ต
• ค่าเริ่ม mobile เป็น false เปิดใช้งานโดยผ่าน ?mobile เพื่อขอเวอร์ชันมือถือของเว็บไซต์ของคุณ
• timezoneId - ระบุการแสดงผลสำหรับเขตเวลา

ตัวเลือกเพิ่มเติมมีอยู่เป็นสตริง JSON ใน POST ตัว ดูเอกสาร Puppeteer สำหรับตัวเลือกที่มีอยู่ คุณไม่สามารถระบุ type (ค่าเริ่มต้นเป็น jpeg ) และ encoding (ค่าเริ่มต้นเป็น binary ) พารามิเตอร์

แคชที่ไม่เปลี่ยนแปลง

 GET /invalidate/<url>

จุดสิ้นสุด invalidate จะลบแคชที่ได้รับสำหรับ <url> จากแคชที่กำหนดค่า (ในหน่วยความจำระบบไฟล์หรือคลาวด์ที่เก็บข้อมูล)

คำถามที่พบบ่อย

พารามิเตอร์การสืบค้น

เมื่อตั้งค่าพารามิเตอร์แบบสอบถามเป็นส่วนหนึ่งของ URL ของคุณตรวจสอบให้แน่ใจว่าได้รับการเข้ารหัสอย่างถูกต้อง ใน JS นี่จะเป็น encodeURIComponent(myURLWithParams) ตัวอย่างเช่นเพื่อระบุ page=home :

 https://render-tron.appspot.com/render/http://my.domain/%3Fpage%3Dhome

หน้าเรนเดอร์

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

ทำให้หมดเวลางบประมาณ

มีขีด จำกัด อย่างหนัก 10 วินาทีสำหรับการแสดงผล ตรวจสอบให้แน่ใจว่าคุณไม่ได้ใช้งบประมาณนี้โดยมั่นใจว่าแอปพลิเคชันของคุณจะแสดงผลได้ดีก่อนที่งบประมาณจะหมดอายุ

ส่วนประกอบของเว็บ

Headless Chrome รองรับส่วนประกอบของเว็บ แต่ Shadow DOM นั้นยากที่จะทำให้เป็นอนุกรมอย่างมีประสิทธิภาพ เช่นนี้ Shady Dom (จำเป็นต้องมีน้ำหนักเบาสำหรับ Shadow DOM) เป็นสิ่งจำเป็นสำหรับส่วนประกอบของเว็บ

หากคุณใช้ Web Components V0 (เลิกใช้แล้ว) คุณจะต้องเปิดใช้งาน Shady DOM เพื่อแสดงผลอย่างถูกต้อง ในพอลิเมอร์ 1.x ซึ่งใช้ส่วนประกอบของเว็บ V0, Shady DOM ถูกเปิดใช้งานโดยค่าเริ่มต้น หากคุณใช้ Shadow DOM ให้แทนที่สิ่งนี้โดยการตั้งค่าพารามิเตอร์แบบสอบถาม dom=shady เมื่อนำคำขอไปยังบริการ RenderTron

หากคุณใช้ Web Components V1 และ webcomponents-lite.js หรือ webcomponents-loader.js ตั้งค่าพารามิเตอร์การสืบค้น wc-inject-shadydom=true เมื่อทำการร้องขอไปยังบริการ RenderTron บริการเรนเดอร์นี้จะบังคับให้มีการโหลดและเปิดใช้งานโพลีฟิลที่จำเป็น

รหัสสถานะ

รหัสสถานะจาก URL ที่ร้องขอเริ่มต้นจะถูกเก็บรักษาไว้ หากนี่คือ 200 หรือ 304 คุณสามารถตั้งค่าสถานะ HTTP ที่ส่งคืนโดยบริการเรนเดอร์โดยการเพิ่มแท็กเมตา

 < meta name =" render:status_code " content =" 404 " /> 

ทำงานในพื้นที่

ในการติดตั้ง rendertron และเรียกใช้ในเครื่องก่อนติดตั้ง RenderTron ก่อน:

npm install -g rendertron

ด้วยการติดตั้ง Chrome บนเครื่องของคุณเรียกใช้ RenderTron CLI:

rendertron

การติดตั้งและปรับใช้

อาคาร

โคลนและการติดตั้งการพึ่งพา:

git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
npm install
npm run build

ทำงานในพื้นที่

ด้วยอินสแตนซ์ท้องถิ่นของการติดตั้ง Chrome คุณสามารถเริ่มเซิร์ฟเวอร์ได้ในเครื่อง:

npm run start

การปรับใช้กับแพลตฟอร์ม Google Cloud

 gcloud app deploy app.yaml --project <your-project-id>

การปรับใช้โดยใช้นักเทียบท่า

RenderTron ไม่รวมไฟล์ Docker อีกต่อไป ให้อ้างอิงเอกสาร Puppeteer เกี่ยวกับวิธีการปรับใช้ Run Headless Chrome ใน Docker

การกำหนดค่า

เมื่อปรับใช้บริการให้ตั้งค่าตัวแปรการกำหนดค่าโดยรวม config.json ในรูท ตัวเลือกการกำหนดค่าที่พร้อมใช้งาน:

• timeout Default 10000 - ตั้งค่าการหมดเวลาที่ใช้ในการแสดงผลหน้าเป้าหมาย
• port เริ่มต้น 3000 - ตั้งค่าพอร์ตเพื่อใช้สำหรับการรันและฟังบริการ RenderTron หมายเหตุหากตั้งค่า process.env.port มันจะถูกใช้แทน
• host เริ่มต้น 0.0.0.0 - ตั้งชื่อโฮสต์เพื่อใช้สำหรับการเรียกใช้และฟังบริการ RenderTron หมายเหตุหากตั้งค่า process.env.host มันจะถูกใช้แทน
• width เริ่มต้น 1000 - ตั้งค่าความกว้าง (ความละเอียด) ที่จะใช้สำหรับการแสดงผลหน้า
• height เริ่มต้น 1000 - ตั้งค่าความสูง (ความละเอียด) ที่จะใช้สำหรับการแสดงผลหน้า
• reqHeaders เริ่มต้น {} - ตั้งส่วนหัว HTTP เพิ่มเติมที่จะส่งไปยังหน้าเป้าหมายด้วยทุกคำขอ
• cache เริ่มต้น null - ตั้งค่าเป็น datastore เพื่อเปิดใช้งานการแคชบน Google Cloud โดยใช้ DataTore ใช้เฉพาะเมื่อการปรับใช้กับ Google Cloud memory เพื่อเปิดใช้งานการแคชในหน่วยความจำหรือ filesystem เพื่อเปิดใช้งานการแคชที่ใช้ดิสก์
• cacheConfig - อาร์เรย์วัตถุเพื่อระบุตัวเลือกการแคช
• renderOnly - จำกัด จุดสิ้นสุดให้เป็นคำขอบริการสำหรับบางโดเมนเท่านั้น ระบุว่าเป็นอาร์เรย์ของสตริง เช่น ['http://render.only.this.domain'] นี่คือการจับคู่คำนำหน้าอย่างเข้มงวดดังนั้นให้แน่ใจว่าคุณระบุโปรโตคอลที่แน่นอนที่จะใช้ (เช่น HTTP, HTTPS)
• closeBrowser Default false - true บังคับให้เบราว์เซอร์ปิดและเปิดใหม่ระหว่างการแสดงผลแต่ละหน้าเว็บไซต์บางแห่งอาจต้องการสิ่งนี้เพื่อป้องกัน URL ที่ผ่านการตอบกลับที่ส่งคืนโมฆะครั้งแรก
• restrictedUrlPattern เริ่มต้น null - ตั้งค่าการ จำกัด URGLPATTERN เพื่อ จำกัด การร้องขอการจับคู่ที่กำหนดรูปแบบ regex

cacheconfig

• cacheDurationMinutes ค่าเริ่มต้น 1440 - ตั้งเวลาหมดอายุเป็น minues ค่าเริ่มต้นเป็น 24 ชั่วโมง ตั้งค่าเป็น -1 เพื่อปิดการใช้งานแคชหมดอายุ
• cacheMaxEntries เริ่มต้น 100 - ตั้งค่าจำนวนสูงสุดของรายการที่เก็บไว้ในวิธีแคชที่เลือก ตั้งค่าเป็น -1 เพื่ออนุญาตการแคชไม่ จำกัด หากใช้วิธีการแคชที่เก็บข้อมูลการตั้งค่านี้มากกว่า 1000 อาจนำไปสู่ประสิทธิภาพที่ลดลงเป็นแบบสอบถามเพื่อกำหนดขนาดของแคชอาจช้าเกินไป หากคุณต้องการอนุญาตให้แคชขนาดใหญ่ใน datastore ให้พิจารณาการตั้งค่านี้เป็น -1 และการจัดการขนาดของที่เก็บข้อมูลของคุณโดยใช้วิธีการเช่นการลบรายการนี้เป็นกลุ่ม
• snapshotDir default <your os's default tmp dir>/renderton - ระบบไฟล์เฉพาะ ไดเรกทอรีไฟล์แคช RenderTron จะถูกเก็บไว้ใน

ตัวอย่าง

ตัวอย่างไฟล์ config ที่ระบุแคชหน่วยความจำที่หมดอายุ 2 ชั่วโมงและสูงสุด 50 รายการ

 {
    "cache" : "memory" ,
    "cacheConfig" : {
        "cacheDurationMinutes" : 120 ,
        "cacheMaxEntries" : 50
    }
}

การแก้ไขปัญหา

หากคุณมีปัญหาในการทำให้โครเมี่ยมหัวโจกทำงานในสภาพแวดล้อมของคุณโปรดดูที่คู่มือการแก้ไขปัญหาสำหรับนักเชิดหุ่น