บอกลาการจำเลขพอร์ต: คู่มือติดตั้ง Homepage แดชบอร์ดรวมศูนย์บริการ Home Server ด้วย Docker

เมื่อคุณก้าวเข้าสู่โลกของ Self-hosting และเริ่มสร้างระบบเก็บข้อมูลส่วนตัวในบ้าน (Home Server) อุปกรณ์ต่าง ๆ ของคุณก็จะเริ่มเต็มไปด้วยบริการต่าง ๆ มากมาย ไม่ว่าจะเป็น Nextcloud สำหรับเก็บไฟล์, Vaultwarden สำหรับเก็บรหัสผ่าน, Immich สำหรับจัดการรูปภาพ หรือ Paperless-ngx สำหรับจัดการเอกสาร

แต่ปัญหาคลาสสิกที่ทุกคนต้องเจอหลังจากติดตั้งบริการเหล่านี้คือ "การจำหมายเลขพอร์ต (Port Number) และ IP Address ของแต่ละบริการไม่ได้"

การที่ต้องคอยพิมพ์ 192.168.1.100:8080 สำหรับรหัสผ่าน หรือ 192.168.1.100:2283 สำหรับดูรูปภาพบนเว็บเบราว์เซอร์นั้นสร้างความยุ่งยากไม่น้อย แม้จะใช้ระบบบุ๊กมาร์กของเบราว์เซอร์ช่วย แต่ถ้าคุณเปลี่ยนไปใช้เครื่องอื่นหรือโทรศัพท์มือถือ บุ๊กมาร์กเหล่านั้นก็ไม่ได้ตามไปด้วย

ทางออกที่ยอดเยี่ยมและเป็นที่นิยมที่สุดในหมู่ชาว Self-hosting คือการติดตั้ง Personal Dashboard (แดชบอร์ดส่วนตัว) และเครื่องมือที่เราขอแนะนำในวันนี้คือ Homepage ครับ

ทำไมต้องเป็น Homepage?

Homepage (gethomepage.dev) คือโปรเจกต์หน้าแดชบอร์ดส่วนตัวแบบโอเพนซอร์ส (Open-source) ที่ออกแบบมาเพื่อเป็นศูนย์กลางการเข้าถึงบริการทั้งหมดบน Home Server ของคุณ

จุดเด่นที่ทำให้ Homepage เหนือกว่าแดชบอร์ดตัวอื่น ๆ มีดังนี้: * ความเร็วและเบามาก: เขียนขึ้นด้วยภาษา Go และ React ทำให้โหลดได้รวดเร็วทันใจ และกินทรัพยากรเครื่องต่ำมาก (ใช้แรมเพียงไม่กี่สิบบิตต่อคอนเทนเนอร์) * การออกแบบที่สวยงามและทันสมัย (Modern UI): หน้าตาเว็บดูสะอาดตา รองรับการตอบสนองทุกขนาดหน้าจอ (Responsive) และมีระบบธีมมืด/สว่างในตัว * เชื่อมต่อกับระบบ Docker (Docker Integration): สามารถดึงสถานะการทำงาน (Running/Stopped) ของคอนเทนเนอร์ใน Home Server มาแสดงผลได้โดยตรง * แสดงสถานะระบบแบบ Real-time: มีวิดเจ็ต (Widgets) แสดงการใช้งาน CPU, RAM, พื้นที่ฮาร์ดดิสก์ และความเร็วอินเทอร์เน็ตของเซิร์ฟเวอร์ * รองรับ Service API: สามารถดึงข้อมูลหลังบ้านของบริการอื่น ๆ มาแสดงบนการ์ดของบริการนั้นได้เลย เช่น ปริมาณโฆษณาที่บล็อกได้จาก Pi-hole หรือจำนวนพื้นที่เหลือใน Nextcloud

สิ่งที่ต้องเตรียมก่อนเริ่มติดตั้ง

1. Home Server ที่ติดตั้ง Docker และ Docker Compose เรียบร้อยแล้ว
2. สิทธิ์ในการเข้าใช้งาน Terminal ของเซิร์ฟเวอร์ผ่าน SSH

ขั้นตอนที่ 1: เตรียมโครงสร้างโฟลเดอร์และไฟล์ Docker Compose

เริ่มต้นด้วยการเชื่อมต่อ SSH ไปยัง Home Server ของคุณ จากนั้นสร้างโฟลเดอร์สำหรับเก็บข้อมูลตั้งค่าของ Homepage:

# สร้างโฟลเดอร์สำหรับโครงการ
mkdir -p ~/homepage/config

# เข้าไปยังโฟลเดอร์
cd ~/homepage

จากนั้นสร้างไฟล์ตั้งค่าสำหรับการทำงานของคอนเทนเนอร์ด้วยการเขียนไฟล์ docker-compose.yml:

version: '3.8'

services:
  homepage:
    image: ghcr.io/gethomepage/homepage:latest
    container_name: homepage
    ports:
      - "3000:3000" # แมปพอร์ตใช้งานออกมาที่พอร์ต 3000 ของเครื่องโฮสต์
    volumes:
      - ./config:/app/config # สำหรับเก็บไฟล์การตั้งค่าต่าง ๆ
      - /var/run/docker.sock:/var/run/docker.sock # Mount Docker Socket เพื่อดึงข้อมูลสถานะคอนเทนเนอร์
    restart: unless-stopped

ขั้นตอนที่ 2: ตั้งค่าไฟล์คอนฟิกูเรชันพื้นฐาน

โครงสร้างการตั้งค่าของ Homepage จะถูกจัดการผ่านไฟล์รูปแบบ YAML ทั้งหมด ซึ่งมีความเป็นระเบียบและเข้าใจง่าย โดยเราจำเป็นต้องสร้างไฟล์หลัก ๆ ทั้งหมด 5 ไฟล์ในโฟลเดอร์ ~/homepage/config

1. ตั้งค่าการเชื่อมต่อ Docker (config/docker.yaml)

เพื่อให้ Homepage คุยกับ Docker Daemon บนเครื่องโฮสต์และเช็กสถานะการทำงานของคอนเทนเนอร์อื่น ๆ ได้ ให้สร้างไฟล์ config/docker.yaml:

kubernetes:
  role: ""
docker:
  - name: my-home-server
    socket: /var/run/docker.sock

2. ตั้งค่าการแสดงผลหน้าแดชบอร์ด (config/settings.yaml)

กำหนดหัวข้อของเว็บ ระบบค้นหา และการจัดหน้าเว็บ สร้างไฟล์ config/settings.yaml:

title: Private Brain OS
headerStyle: clean
layout:
  Personal Cloud:
    columns: 2
  Security & Tools:
    columns: 2

3. ตั้งค่าระบบวิดเจ็ตของระบบ (config/widgets.yaml)

แสดงสถานะทรัพยากรของเซิร์ฟเวอร์และเวลาปัจจุบัน สร้างไฟล์ config/widgets.yaml:

- datetime:
    text_size: l
    format:
      timeStyle: short
      dateStyle: long
      hour12: false

- search:
    provider: duckduckgo
    target: _blank

- system:
    showHost: true
    cpu: true
    memory: true
    disk: /

4. ตั้งค่าบริการต่าง ๆ ที่ต้องการแสดงบนแดชบอร์ด (config/services.yaml)

นี่คือส่วนที่สำคัญที่สุดที่เราจะใส่ลิงก์และตั้งค่าการดึงข้อมูลจากคอนเทนเนอร์อื่น ๆ ในระบบ สร้างไฟล์ config/services.yaml (สมมติว่าเซิร์ฟเวอร์ของคุณใช้ IP 192.168.1.100):

- Personal Cloud:
    - Nextcloud:
        - icon: nextcloud
          href: http://192.168.1.100:8000
          description: ระบบเก็บไฟล์และคลาวด์ส่วนตัว
          server: my-home-server
          container: nextcloud

    - Immich:
        - icon: immich
          href: http://192.168.1.100:2283
          description: แหล่งเก็บรูปภาพและวิดีโอส่วนตัวในบ้าน
          server: my-home-server
          container: immich

- Security & Tools:
    - Vaultwarden:
        - icon: vaultwarden
          href: http://192.168.1.100:8080
          description: ตัวจัดการรหัสผ่านและข้อมูลสำคัญ
          server: my-home-server
          container: vaultwarden

    - Linkwarden:
        - icon: linkwarden
          href: http://192.168.1.100:3000
          description: ระบบบันทึกและจัดการบุ๊กมาร์กส่วนตัว
          server: my-home-server
          container: linkwarden

เคล็ดลับ: ค่าของ icon บน Homepage มีไอคอนที่ติดมากับตัวระบบและดาวน์โหลดอัตโนมัติหลายร้อยแบบ เพียงแค่พิมพ์ชื่อบริการเป็นตัวพิมพ์เล็ก (เช่น nextcloud, vaultwarden, immich) ระบบจะดึงโลโก้ที่ถูกต้องมาแสดงให้โดยอัตโนมัติ!

5. ตั้งค่าบุ๊กมาร์กสำหรับเว็บภายนอก (config/bookmarks.yaml)

หากมีเว็บโปรดหรือเครื่องมือออนไลน์ที่ใช้บ่อย ๆ สามารถนำมาไว้ในหมวดบุ๊กมาร์กย่อยได้ สร้างไฟล์ config/bookmarks.yaml:

- Developer Tools:
    - GitHub:
        - icon: github
          href: https://github.com/
    - OpenAI:
        - icon: chatgpt
          href: https://chat.openai.com/

ขั้นตอนที่ 3: สั่งรันระบบและใช้งานจริง

หลังจากสร้างไฟล์การตั้งค่าครบถ้วนแล้ว ให้สั่งรันคอนเทนเนอร์ขึ้นมาทำงานในโหมดเบื้องหลัง:

docker compose up -d

เมื่อสถานะแสดงเป็น Started ให้เปิดเว็บเบราว์เซอร์แล้วไปที่: http://<IP-ของ-Home-Server>:3000 (เช่น http://192.168.1.100:3000)

คุณจะพบกับแดชบอร์ด Homepage ที่สวยงามและทันสมัย โดยมีการ์ดแสดงผลสำหรับ Nextcloud, Immich, Vaultwarden และ Linkwarden ที่มีจุดสีเขียว/แดงแสดงสถานะความเคลื่อนไหวของระบบแบบ Real-time พร้อมแถบแสดงพลังงาน CPU, RAM และความจุฮาร์ดดิสก์ของเซิร์ฟเวอร์แบบกราฟิกที่ด้านบนสุด

ก้าวต่อไป: เพิ่มความปลอดภัยและการเข้าถึงจากนอกบ้าน

เพื่อให้ Homepage เป็นจุดเริ่มต้นที่ดีที่สุดของระบบ Private Brain OS ของคุณอย่างแท้จริง แนะนำให้นำระบบนี้ไปใช้งานร่วมกับสองเครื่องมือที่เราเคยติดตั้งไว้แล้ว:

1. Tailscale: ช่วยให้คุณเข้าถึงหน้าแดชบอร์ดนี้ได้อย่างปลอดภัยผ่าน VPN วงส่วนตัวจากที่ใดก็ได้ในโลกโดยไม่ต้องเปิดพอร์ตเราเตอร์เสี่ยงอันตราย
2. Caddy (Reverse Proxy): ครอบใบรับรอง SSL (HTTPS) ให้กับแดชบอร์ดของคุณ เพื่อให้มั่นใจได้ว่าข้อมูลการกดลิงก์ต่าง ๆ จะถูกเข้ารหัสอย่างปลอดภัยตลอดเวลา

บทสรุป

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