Tự Host Penpot trên Docker: Giải Pháp Thay Thế Figma Mã Nguồn Mở và Riêng Tư

HomeLab tutorial - IT technology blog
HomeLab tutorial - IT technology blog

Tại Sao Tôi Chuyển Quy Trình Thiết Kế Sang Bản Tự Host

Trong nhiều năm, Figma đã là tiêu chuẩn của ngành. Tuy nhiên, những thay đổi gần đây hướng tới mô hình cloud hạn chế và các tính năng trả phí như “Dev Mode” đã khiến nhiều lập trình viên lo ngại. Nếu bạn coi trọng quyền sở hữu dữ liệu, Penpot là giải pháp bạn đang tìm kiếm. Đây là một nền tảng thiết kế và tạo mẫu mạnh mẽ sử dụng SVG làm định dạng gốc. Điều này có nghĩa là các thiết kế của bạn không bị mắc kẹt trong một định dạng độc quyền; chúng mặc định sẵn sàng cho môi trường web.

Tự host hạ tầng thiết kế đảm bảo rằng các bản mockup và tài nguyên của bạn không bao giờ rời khỏi phần cứng cục bộ. Theo kinh nghiệm của tôi, việc thiết lập này là một dự án cuối tuần hoàn hảo cho bất kỳ ai muốn nâng cao kỹ năng Docker. Nó cung cấp một công cụ cấp chuyên nghiệp mà không tốn phí đăng ký hàng tháng hoặc rủi ro bị gián đoạn do sự cố đám mây.

Cài Đặt và Vận Hành Penpot

Bạn có thể khởi chạy một instance Penpot trong chưa đầy năm phút nếu đã chuẩn bị sẵn Docker và Docker Compose. Hãy bắt đầu bằng cách tạo một thư mục riêng để quản lý các tệp cấu hình một cách ngăn nắp.

mkdir ~/penpot && cd ~/penpot
curl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml
curl -o config.env https://raw.githubusercontent.com/penpot/penpot/main/docker/images/config.env

Bạn phải tạo hai khóa bí mật (secret keys) duy nhất trước khi khởi chạy các container. Chạy lệnh openssl rand -hex 32 hai lần để tạo các chuỗi này. Mở tệp config.env, tìm PENPOT_SECRET_KEYPENPOT_PUBLIC_SECRET_KEY, sau đó dán các giá trị mới của bạn vào đó.

Sau khi thiết lập xong các biến môi trường, hãy khởi chạy hệ thống:

docker-compose up -d

Hệ thống cần khoảng 60 giây để khởi tạo cơ sở dữ liệu PostgreSQL và chạy các tiến trình migration. Sau khi hoàn tất, bạn có thể truy cập bảng điều khiển tại http://your-server-ip:9001. Đây là một quá trình làm quen ban đầu cực kỳ mượt mà đối với một công cụ phức tạp như vậy.

Kiến Trúc: Bên Trong Có Gì?

Penpot không phải là một container đơn lẻ, cồng kềnh. Nó là một tập hợp các microservices hoạt động cùng nhau. Hiểu rõ các thành phần này là rất quan trọng nếu bạn đang chạy nó trên phần cứng khiêm tốn như Raspberry Pi 4GB RAM hoặc một VPS nhỏ.

Năm Dịch Vụ Thiết Yếu

  • Frontend: Một máy chủ Nginx phục vụ giao diện người dùng (UI) cho trình duyệt của bạn.
  • Backend: Được xây dựng bằng Clojure, xử lý logic cốt lõi và các yêu cầu API.
  • Exporter: Một dịch vụ NodeJS giúp chuyển đổi thiết kế sang định dạng PDF hoặc SVG. Nó sử dụng một instance Chromium nội bộ, đây thường là phần tiêu tốn tài nguyên nhất trong hệ thống.
  • PostgreSQL: Nơi lưu trữ đáng tin cậy cho dữ liệu metadata thiết kế và hồ sơ người dùng.
  • Redis: Quản lý các phiên làm việc (sessions) và giúp giao diện phản hồi nhanh nhạy hơn.

Nếu bạn nhận thấy hệ thống bị lag trong quá trình xuất file nặng, dịch vụ Exporter có khả năng cao là nguyên nhân. Trên máy có RAM 2GB, tôi khuyên bạn nên thiết lập giới hạn bộ nhớ trong tệp docker-compose.yaml để tránh hệ thống bị treo khi render các tệp lớn.

Tối Ưu Hóa Thiết Lập Cho Môi Trường Production

Việc cài đặt cơ bản phù hợp để thử nghiệm cục bộ, nhưng bạn cần thực hiện thêm một vài bước nếu dự định sử dụng cho công việc thực tế với khách hàng hoặc cộng tác nhóm.

Kích Hoạt SMTP Để Quản Lý Người Dùng

Nếu không có máy chủ mail, bạn không thể xác thực người dùng mới hoặc đặt lại mật khẩu một cách dễ dàng. Bạn có thể sử dụng các dịch vụ như Postmark hoặc máy chủ mail riêng của mình. Chỉnh sửa phần SMTP trong config.env:

[email protected]
PENPOT_SMTP_HOST=smtp.server-cua-ban.com
PENPOT_SMTP_PORT=587
PENPOT_SMTP_USERNAME=ten-dang-nhap-cua-ban
PENPOT_SMTP_PASSWORD=mat-khau-cua-ban
PENPOT_SMTP_TLS=true

Bảo Mật và Reverse Proxy

Đừng bao giờ để instance Penpot của bạn tiếp xúc trực tiếp với internet qua cổng 9001. Hãy sử dụng một Reverse Proxy như Nginx Proxy Manager hoặc Traefik để quản lý chứng chỉ SSL. Khi thiết lập proxy, hãy đảm bảo tính năng “Websockets Support” đã được bật. Nếu không có nó, các tính năng cộng tác thời gian thực sẽ thất bại và bạn sẽ thấy lỗi kết nối lại liên tục.

Đóng Đăng Ký Công Khai

Sau khi đã tạo tài khoản chính, bạn nên “khóa cửa” lại. Bạn chắc chắn không muốn các bot ngẫu nhiên tạo tài khoản trên máy chủ của mình. Cập nhật config.env với cờ sau:

PENPOT_FLAGS="disable-registration"

Bảo Trì và Duy Trì Lâu Dài

Tự host đòi hỏi một chút tính kỷ luật. Tôi nhận thấy rằng hai thói quen cụ thể giúp Penpot hoạt động hoàn hảo trong nhiều tháng liên tục.

Sao Lưu Hàng Ngày

Các tệp thiết kế của bạn được lưu trữ trong cơ sở dữ liệu và volume tài nguyên. Nếu cơ sở dữ liệu bị hỏng, bạn sẽ mất tất cả. Hãy thiết lập một cron job đơn giản để dump dữ liệu mỗi đêm. Sử dụng lệnh này làm điểm bắt đầu:

docker exec -t penpot-postgres-container pg_dumpall -c -U penpot > penpot_backup_$(date +%F).sql
# Sao lưu toàn bộ cơ sở dữ liệu Penpot vào tệp .sql với định dạng ngày tháng

Cập Nhật Mượt Mà

Đội ngũ Penpot phát hành bản cập nhật thường xuyên. Để cập nhật, hãy pull các image mới nhất và khởi động lại các container. Luôn đọc kỹ ghi chú phát hành (release notes) trên GitHub trước. Đôi khi, họ giới thiệu các biến môi trường mới mà bạn phải thêm vào config.env để hệ thống khởi động chính xác.

Chuyển sang Penpot đã thay đổi hoàn toàn cách tôi xử lý thiết kế. Nó loại bỏ nỗi lo về việc tăng giá và cho tôi quyền kiểm soát hoàn toàn đối với các tài sản sáng tạo của mình. Nếu bạn đã có sẵn một HomeLab, việc thêm Penpot là cách tốt nhất để đưa quy trình thiết kế và phát triển của bạn về chung một mái nhà.

Share: