วิธีติดตั้ง CDN ของรูปภาพ Thumbor

คุณสามารถใช้ Thumbor เพื่อปรับขนาด บีบอัด และเปลี่ยนรูปแบบรูปภาพตามคำขอได้ฟรี

เคธี่ เฮมปีเนียส
Katie Hempenius

CDN ของรูปภาพช่วยให้คุณปรับแต่งรูปลักษณ์และประสิทธิภาพของรูปภาพแบบไดนามิกได้อย่างง่ายดาย Thumbor เป็นโอเพนซอร์สซึ่งแตกต่างจาก CDN รูปภาพส่วนใหญ่ เพราะสามารถใช้เพื่อปรับขนาด บีบอัด และเปลี่ยนรูปแบบรูปภาพได้ฟรี เหมาะสำหรับการใช้งานด้านการผลิต โดยทั้ง Wikipedia และ Square ต่างก็ใช้ Thumbor

คำแนะนำนี้อธิบายวิธีติดตั้ง Thumbor บนเซิร์ฟเวอร์ของคุณเอง เมื่อติดตั้งแล้ว คุณจะสามารถใช้ Thumbor เป็น API สำหรับการแปลงรูปภาพของคุณ

ข้อมูลเบื้องต้น

คุณจะติดตั้ง Thumbor บน VM ที่ใช้ Ubuntu 16.04 Ubuntu 16.04 เป็นภาพที่ใช้กันทั่วไปและคำแนะนำเหล่านี้เหมาะสำหรับผู้ให้บริการคลาวด์ทุกราย การสร้าง VM อาจฟังดูเป็นงานมากกว่าการติดตั้ง Thumbor บนเครื่องภายในของคุณ แต่เวลาเพียงไม่กี่นาทีในการสร้าง VM อาจช่วยให้คุณไม่ต้องเสียเวลาหลายชั่วโมงหรือหลายวันในการนำ Thumbor มาติดตั้งในเครื่องอย่างถูกต้อง แม้จะใช้งานง่าย แต่ขึ้นชื่อว่าติดตั้งยาก แต่คำแนะนำเหล่านี้จะง่ายขึ้น หากทรัพยากร Dependency ดาวน์โหลดอย่างรวดเร็ว การติดตั้งจะเสร็จสมบูรณ์ภายใน 5 ถึง 10 นาที

ข้อกำหนดเบื้องต้น

โพสต์นี้สมมติว่าคุณทราบวิธีสร้าง Ubuntu 16.04 LTS VM บนแพลตฟอร์มระบบคลาวด์ เช่น Google Cloud, AWS, หรือ Azure รวมถึงวิธีใช้เครื่องมือบรรทัดคำสั่งเพื่อตั้งค่า VM

ติดตั้งทรัพยากร Dependency ของ Thumbor

อัปเดตและอัปเกรดแพ็กเกจที่ติดตั้งแล้วของ Ubuntu:

sudo apt-get update -y && sudo apt-get upgrade -y

ติดตั้ง pip ซึ่งเป็นตัวจัดการแพ็กเกจสำหรับ Python คุณจะติดตั้ง Thumbor ด้วย pip ในภายหลัง

sudo apt-get install -y python-pip

ติดตั้งทรัพยากร Dependency ของ Thumbor เอกสารประกอบของ Thumbor ไม่ได้กล่าวถึงทรัพยากร Dependency เหล่านี้อย่างชัดเจน แต่ Thumbor จะติดตั้งทรัพยากร Dependency ไม่สำเร็จหากไม่มี

# ssl packages
sudo apt-get install -y libcurl4-openssl-dev libssl-dev
# computer vision packages
sudo apt-get install -y python-opencv libopencv-dev
# image format packages
sudo apt-get install -y libjpeg-dev libpng-dev libwebp-dev webp

ติดตั้ง Thumbor

ติดตั้ง Thumbor โดยใช้ PIP

sudo pip install thumbor

หากคุณติดตั้ง Thumbor เรียบร้อยแล้ว ขั้นตอนนี้ก็ควรจะได้ผล

thumbor --help

เรียกใช้ Thumbor

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

thumbor --log-level debug

Thumbor กำลังทำงาน

เปิดพอร์ตไฟร์วอลล์

โดยค่าเริ่มต้น Thumbor จะทำงานบนพอร์ต 8888 หากที่อยู่ IP ของ VM คือ 12.123.12.122 คุณจะเข้าถึง Thumbor จากเว็บเบราว์เซอร์ที่ http://12.123.12.123:8888/.../$IMAGE

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

อัปเดตไฟร์วอลล์ให้แสดงพอร์ต 8888 ข้อมูลเพิ่มเติมเกี่ยวกับวิธีดําเนินการกับ Google Cloud, AWS และ Azure โปรดทราบว่าสำหรับ Google Cloud คุณต้องกำหนดที่อยู่ IP แบบคงที่ให้กับ VM ก่อน จากนั้นจึงอนุญาตการเชื่อมต่อ HTTP ภายนอก

ทดลองใช้

ตอนนี้ Thumbor เข้าถึงและพร้อมใช้งานแล้ว ลองใช้งานโดยไปที่ URL ต่อไปนี้

http://YOUR_VIRTUAL_MACHINE:8888/unsafe/100x100/https://web.dev/install-thumbor/hero.jpg

โปรดทราบว่า URL นี้ใช้ HTTP Thumbor ใช้ HTTP โดยค่าเริ่มต้น แต่สามารถกำหนดค่าให้ใช้ HTTPS ได้

คุณจะเห็นรูปภาพที่มีความกว้าง 100 พิกเซล x ความสูง 100 พิกเซล Thumbor ได้นำรูปภาพ hero.jpg และขนาดที่ระบุในสตริง URL และแสดงผลลัพธ์ แทนที่รูปภาพในสตริง URL (เช่น https://web.dev/install-thumbor/hero.jpg) กับรูปภาพอื่นๆ (เช่น https://your-site.com/cat.jpg) และ Thumbor จะปรับขนาดรูปภาพนั้นด้วย

บทความเพิ่มประสิทธิภาพรูปภาพด้วย Thumbor มีข้อมูลเพิ่มเติมเกี่ยวกับการใช้ Thumbor API โดยเฉพาะอย่างยิ่งคุณอาจสนใจตั้งค่าไฟล์การกำหนดค่า Thumbor

ภาคผนวก: การกำหนดค่า Systemd

ขั้นตอนนี้อธิบายวิธีตรวจสอบว่ากระบวนการของ Thumbor ยังคงทำงานต่อไป แม้ว่าจะรีสตาร์ท VM แล้วก็ตาม ขั้นตอนนี้สำคัญสำหรับเว็บไซต์ที่ใช้งานจริง แต่ไม่บังคับหากคุณแค่ลองใช้ Thumbor

Systemd เป็น "system and service Manager" สำหรับระบบปฏิบัติการ Linux systemd ช่วยให้กำหนดค่าได้อย่างง่ายดายเมื่อบริการ (กระบวนการ) ทำงาน

คุณจะต้องกำหนดค่า systemd เพื่อเริ่ม Thumbor โดยอัตโนมัติเมื่อเปิด VM หากรีสตาร์ท VM กระบวนการของ Thumbor จะรีสตาร์ทโดยอัตโนมัติเช่นกัน วิธีนี้เชื่อถือได้มากกว่าการให้ผู้ใช้เริ่มต้น Thumbor

ไปที่ไดเรกทอรี /lib/systemd/system ไดเรกทอรีนี้มีไฟล์บริการสำหรับ systemd

cd /lib/systemd/system

สร้างไฟล์ thumbor.service ในฐานะผู้ใช้ขั้นสูง

sudo touch thumbor.service

ใช้โปรแกรมแก้ไขข้อความที่ชอบ (Vim และ Nano ที่ติดตั้งมาล่วงหน้าใน Ubuntu หรือติดตั้งตัวแก้ไขอื่นก็ได้) เพิ่มการกำหนดค่าต่อไปนี้ลงใน thumbor.service การกำหนดค่านี้จะเรียกใช้ /usr/local/bin/thumbor (เช่น ไบนารี Thumbor) เมื่อเครือข่ายพร้อมใช้งานและจะรีสตาร์ท Thumbor เมื่อล้มเหลว

[Unit]

Description=Service for Thumbor image CDN

Documentation=https://thumbor.readthedocs.io/en/latest/

After=network.target

[Service]

ExecStart=/usr/local/bin/thumbor

Restart=on-failure

[Install]

WantedBy=multi-user.target

systemctl เป็นยูทิลิตีที่ใช้จัดการ systemd ใช้คำสั่ง start เพื่อเริ่ม Thumbor

sudo systemctl start thumbor.service

ต่อไปให้ "เปิดใช้" Thumbor ซึ่งหมายความว่า Thumbor จะเริ่มต้นทำงานโดยอัตโนมัติ

sudo systemctl enable thumbor.service

ยืนยันว่าคุณกำหนดค่า systemd สำเร็จแล้วโดยเรียกใช้คำสั่ง status

systemctl status thumbor.service

หากคุณตั้งค่า thumbor.service ให้ใช้ systemd เรียบร้อยแล้ว สถานะควรจะแสดงให้ทราบว่ามีการเปิดใช้และทำงานอยู่

Systemctl แสดงสถานะของ Thumbor