Penpot - Nền tảng thiết kế UI-UX trên K8s | Blog cá nhân của Anh Nguyễn

Giới thiệu

Trong quá trình làm việc, team cần có 1 công cụ giúp thiết kế UI/UX cũng như làm các Wireframe đơn giản cho các dự án mobile App hoặc Web. Trên tinh thần chung tiết kiệm chi phí nhưng vẫn đảm bảo được yêu cầu công việc, mình bắt đầu tìm kiếm các nền tảng FOSS. May mắn thay tìm thầy được Penpot là một nền tảng miễn phí chuyên dùng làm Design và Prototype, hiện tại tuy đang ở giai đoạn beta nhưng các tính năng cơ bản cũng đủ đáp ứng cho nhu cầu công việc hiện tại của team.

Bây giờ hãy thử deploy nó trên K8s cluster.

Triển khai

Đầu tiên mình deploy Penpot trong namespace tương ứng.

kubectl create namespace penpot

Config

Chúng ta tạo 1 ConfigMap chứa 1 vài giá trị ENV variable mà PenPot sẽ sử dụng để tùy chỉnh cấu hình, variables-env-configmap.yaml. Trong file cấu hình này cần 1 LDAP server, người dùng sử dụng account của mình để đăng nhập thì mới sử dụng được app. Sau khi đã sửa theo thông tin của bạn thì hãy deploy nó

kubectl apply -f variables-env-configmap.yaml

Một vài thông tin nhạy cảm như database password nên được lưu trong secrets, nhưng để trình bày đơn giản mình để dạng plaintext trong ConfigMap

Database

Persistent Volume Claim

Đây là nơi lưu trữ data dành cho database mà Penpot sẽ sử dụng. Trong trường hợp của mình dùng NFS Persistent Volume, các bạn xem thêm file penpot-db-data-persistentvolumeclaim.yaml và chú ý sửa phần nfs theo thông tin NFS của bạn:


---
nfs:
  server: your-nfs-ip
  path: '/nfs/penpot/psql'

Sau khi cập nhật lại file yaml thì deploy lên k8s.

kubectl apply -f penpot-db-data-persistentvolumeclaim.yaml

Deployment và Service

Download file penpot-db-deployment.yaml, và deploy:

kubectl apply -f penpot-db-deployment.yaml

Penpot assets

Đây là nơi lưu trữ các data của Penpot, như hình ảnh, file project chẳng hạn. Trong trường hợp của mình dùng NFS Persistent Volume, các bạn xem thêm file penpot-assets-data-persistentvolumeclaim.yaml và chú ý sửa phần nfs theo thông tin NFS của bạn:


---
nfs:
  server: your-nfs-ip
  path: '/nfs/penpot/assets-data'

Xem thêm bài viết Thiết lập và dụng NFS Persistent Volume trên Kubernetes để hiểu rõ hơn về NFS PVC.

kubectl apply -f penpot-assets-data-persistentvolumeclaim.yaml

Penpot backend

penpot-back-deployment.yaml

kubectl apply -f penpot-back-deployment.yaml

Penpot frontend

penpot-front-deployment.yaml

kubectl apply -f penpot-front-deployment.yaml

Penpot exporter

penpot-exporter-deployment.yaml

kubectl apply -f penpot-exporter-deployment.yaml

Penpot redis

penpot-redis-deployment.yaml

kubectl apply -f penpot-redis-deployment.yaml

Penpot ingress

Các bạn nhớ sửa trong file penpot-ingress.yaml thông tin host chính là giá trị của PENPOT_PUBLIC_URI trong ConfigMap ở trên.

Mình sử dụng Let's Encrypt SSL cho domain của mình thông qua Cluster Issuer letsencrypt-prod, nếu bạn chưa deploy nó thì tao file clusterissuer.yaml

apiVersion: cert-manager.io/v1
kind: ClusterIssuer
metadata:
  name: letsencrypt-prod
spec:
  acme:
    # The ACME server URL
    server: https://acme-v02.api.letsencrypt.org/directory
    # Email address used for ACME registration
    email: your@email.com
    # Name of a secret used to store the ACME account private key
    privateKeySecretRef:
      name: letsencrypt-prod
    # Enable the HTTP-01 challenge provider
    solvers:
      - http01:
          ingress:
            class: nginx

kubectl apply -f clusterissuer.yaml
kubectl apply -f penpot-ingress.yaml

Các file deploy khá dài nên mình không thể giải thích tường tận từng thông số. Hơn nữa các thuật ngữ trong K8s nhiều khi dịch ra sẽ khá lủng cũng, vì vậy nếu có thông số nào không hiểu các bạn có thể google nó. Chúc thành công.