Triển khai Penpot trên VPS: Thay thế Figma bằng công cụ UI/UX nguồn mở bảo mật và tự chủ

Giới thiệu về Penpot và xu hướng tự chủ công nghệ thiết kế

Trong kỷ nguyên số, thiết kế giao diện và trải nghiệm người dùng (UI/UX) đã trở thành một phần không thể tách rời trong quy trình phát triển sản phẩm công nghệ. Nhiều năm qua, Figma đã thống trị thị trường nhờ khả năng cộng tác thời gian thực mạnh mẽ. Tuy nhiên, việc phụ thuộc hoàn toàn vào một nền tảng đám mây đóng (SaaS) đi kèm với không ít rủi ro: chi phí bản quyền tăng cao theo số lượng nhân sự, nguy cơ thay đổi chính sách bảo mật, và đặc biệt là vấn đề rò rỉ dữ liệu sở hữu trí tuệ.

Chính trong bối cảnh đó, Penpot xuất hiện như một làn sóng đổi mới đầy mạnh mẽ. Là nền tảng thiết kế UI/UX nguồn mở (Open-source) đầu tiên dựa trên các tiêu chuẩn web mở (SVG, CSS), Penpot mang đến khả năng cộng tác thời gian thực không thua kém gì Figma nhưng lại trao toàn quyền kiểm soát cho người dùng. Việc triển khai Penpot trên máy chủ riêng (VPS) đang trở thành lựa chọn chiến lược cho các doanh nghiệp, tổ chức tài chính, và các đội ngũ phát triển phần mềm ưu tiên tính bảo mật và tối ưu chi phí.

Tại sao doanh nghiệp nên chọn Penpot thay vì Figma?

Trước khi đi vào chi tiết kỹ thuật, hãy cùng phân tích những lý do cốt lõi khiến Penpot trên VPS là một khoản đầu tư xứng đáng cho hạ tầng công nghệ của bạn:

Làm chủ hoàn toàn dữ liệu (Data Sovereignty): Mọi file thiết kế, thông tin dự án và tài sản trí tuệ đều nằm trên VPS của bạn, không bên thứ ba nào có quyền tiếp cận. Điều này giúp doanh nghiệp dễ dàng tuân thủ các tiêu chuẩn bảo mật nghiêm ngặt như GDPR hoặc ISO 27001.
Chi phí tối ưu và cố định: Thay vì trả tiền theo mô hình "per-user/per-month" (tính phí trên mỗi người dùng hàng tháng) đắt đỏ của Figma, bạn chỉ cần trả chi phí thuê VPS cố định. Dù đội ngũ có mở rộng lên 50 hay 100 designer, chi phí phần mềm vẫn là 0 đồng.
Dựa trên tiêu chuẩn Web mở (SVG): Khác với các định dạng độc quyền của Figma hay Adobe XD, Penpot sử dụng SVG làm định dạng gốc. Điều này có nghĩa là các tệp thiết kế của bạn có thể dễ dàng đọc được bởi bất kỳ trình duyệt hoặc công cụ vector nào, giảm thiểu rủi ro bị trói buộc vào một nhà cung cấp (Vendor lock-in).
Khả năng tùy biến vô hạn: Vì là nguồn mở, bạn có thể can thiệp vào mã nguồn, tích hợp sâu vào hệ thống CI/CD nội bộ hoặc phát triển các plugin riêng phục vụ cho quy trình đặc thù của doanh nghiệp.

Yêu cầu hệ thống để triển khai Penpot trên VPS

Để đảm bảo hiệu năng mượt mà cho các tính năng cộng tác thời gian thực và xử lý đồ họa vector phức tạp, cấu hình VPS khuyến nghị cần đáp ứng các tiêu chuẩn sau:

Thành phần	Cấu hình tối thiểu	Cấu hình khuyến nghị (Đội ngũ 5-15 người)
CPU	2 Cores	4 Cores trở lên
RAM	4 GB	8 GB trở lên
Lưu trữ	20 GB SSD	50 GB+ NVMe SSD (tùy thuộc vào số lượng tài sản đồ họa)
Hệ điều hành	Ubuntu 22.04 LTS / 24.04 LTS	Ubuntu 24.04 LTS

Lưu ý quan trọng: Penpot sử dụng kiến trúc microservices và chạy trên môi trường Docker, do đó dung lượng RAM lớn là yếu tố quyết định để hệ thống vận hành ổn định khi có nhiều người cùng thao tác trên một bản vẽ.

Hướng dẫn từng bước cài đặt Penpot bằng Docker Compose

Phương pháp triển khai tối ưu và dễ quản lý nhất hiện nay là sử dụng Docker Compose. Dưới đây là quy trình chuẩn hóa giúp bạn thiết lập hệ thống Penpot từ zero.

Bước 1: Cập nhật hệ thống và cài đặt Docker

Đầu tiên, hãy kết nối SSH vào VPS của bạn bằng tài quyền root hoặc user có quyền sudo, sau đó chạy lệnh cập nhật toàn bộ các gói hệ thống:

sudo apt update && sudo apt upgrade -y

Tiếp theo, tiến hành cài đặt Docker và Docker Compose plugin:

sudo apt install docker.io docker-compose-plugin -y
sudo systemctl enable --now docker

Bước 2: Tải cấu hình Docker Compose của Penpot

Tạo một thư mục riêng biệt để lưu trữ các tệp tin cấu hình của Penpot nhằm thuận tiện cho việc bảo trì và nâng cấp sau này:

mkdir ~/penpot && cd ~/penpot
wget [https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml](https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml)

Bước 3: Cấu hình các biến môi trường (Environment Variables)

Mặc dù tệp docker-compose.yaml đã có sẵn cấu hình mặc định, bạn cần tùy chỉnh các thông số bảo mật và cấu hình gửi Email (SMTP) để tính năng đăng ký, khôi phục mật khẩu hoạt động chính xác. Tạo file cấu hình môi trường bằng lệnh:

nano .env

Thêm và điều chỉnh các dòng cấu hình sau:

PENPOT_PUBLIC_URI=[https://penpot.yourdomain.com](https://penpot.yourdomain.com)

# Cấu hình SMTP để gửi mail
[email protected]
PENPOT_SMTP_HOST=smtp.mailgun.org
PENPOT_SMTP_PORT=587
PENPOT_SMTP_USERNAME=your_username
PENPOT_SMTP_PASSWORD=your_password
PENPOT_SMTP_TLS=true

# Khóa bí mật mã hóa dữ liệu
PENPOT_SECRET_KEY=thay_the_bang_chuoi_ngau_nhien_sieu_bao_mat

Mẹo: Bạn có thể dùng lệnh openssl rand -hex 32 để tạo chuỗi bảo mật cho biến PENPOT_SECRET_KEY.

Bước 4: Khởi chạy hệ thống Penpot

Sau khi đã kiểm tra kỹ các thông số cấu hình, thực hiện lệnh sau để Docker tự động tải các image cần thiết (bao gồm Penpot frontend, backend, cơ sở dữ liệu PostgreSQL, Redis) và khởi chạy chúng ngầm:

sudo docker compose up -d

Kiểm tra trạng thái hoạt động của các container:

sudo docker compose ps

Nếu tất cả các dịch vụ đều hiển thị trạng thái Up, hệ thống Penpot của bạn đã khởi chạy thành công nội bộ tại cổng 9001.

Cấu hình Reverse Proxy với Nginx và SSL mã hóa (Let's Encrypt)

Để đội ngũ thiết kế có thể truy cập an toàn qua giao thức HTTPS bảo mật, chúng ta cần thiết lập Nginx làm Reverse Proxy và cài đặt chứng chỉ SSL miễn phí từ Let's Encrypt.

Cài đặt Nginx và Certbot:

sudo apt install nginx certbot python3-certbot-nginx -y

Tạo file cấu hình Nginx cho tên miền của bạn:

sudo nano /etc/nginx/sites-available/penpot

Nhập đoạn cấu hình điều hướng lưu lượng truy cập về cổng 9001 của Docker:

server {
    listen 80;
    server_name penpot.yourdomain.com;

    location / {
        proxy_pass http://localhost:9001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        # Hỗ trợ WebSockets cho cộng tác thời gian thực
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

Kích hoạt cấu hình và tải lại Nginx:

sudo ln -s /etc/nginx/sites-available/penpot /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

Cài đặt chứng chỉ SSL tự động:
```
sudo certbot --nginx -d penpot.yourdomain.com
```
Lựa chọn tùy chọn tự động chuyển hướng mọi lưu lượng từ HTTP sang HTTPS để đảm bảo an toàn tuyệt đối.

Kế hoạch bảo trì: Sao lưu (Backup) và Cập nhật (Update)

Vận hành một hệ thống tự lưu trữ đồng nghĩa với việc doanh nghiệp phải có trách nhiệm quản trị. Để tránh rủi ro mất mát dữ liệu thiết kế, hãy áp dụng quy trình bảo trì sau:

Tự động hóa sao lưu dữ liệu

Dữ liệu quan trọng nhất của Penpot nằm trong cơ sở dữ liệu PostgreSQL và phân vùng lưu trữ tệp tin (assets). Bạn nên tạo một cronjob định kỳ hàng ngày để dump database và đồng bộ lên một không gian lưu trữ đám mây thứ hai (như AWS S3 hoặc Backblaze B2):

# Lệnh dump dữ liệu Postgres từ Docker
sudo docker compose exec -t postgres pg_dumpall -U penpot > ~/backup/penpot_db_$(date +%F).sql

Quy trình cập nhật Penpot lên phiên bản mới

Cộng đồng nguồn mở Penpot phát triển rất nhanh với nhiều tính năng mới được cập nhật liên tục. Để cập nhật hệ thống, bạn chỉ cần thực hiện 3 lệnh đơn giản sau:

cd ~/penpot
sudo docker compose pull
sudo docker compose up -d

Docker sẽ tự động phát hiện phiên bản mới, tải về và thay thế các container cũ mà không làm mất mát cấu hình hay dữ liệu hiện tại của bạn.

Kết luận

Triển khai Penpot trên VPS không chỉ là giải pháp thay thế Figma mang tính tiết kiệm chi phí, mà đó là bước đi chiến lược giúp doanh nghiệp tự chủ hoàn toàn về mặt công nghệ và bảo mật dữ liệu. Với giao diện trực quan, tính năng mạnh mẽ dựa trên tiêu chuẩn SVG mở, cùng sự hậu thuẫn lớn từ cộng đồng mã nguồn mở toàn cầu, Penpot chắc chắn sẽ là bệ phóng vững chắc cho quy trình thiết kế và phát triển sản phẩm của doanh nghiệp bạn trong tương lai.