云实验室(20) - penpot部署与使用

penpot是一款开源的UI设计和原型设计软件,在工作中,一款好的多人协作本地化部署设计服务是不可缺少的

0. 效果

0.1 LDAP 登录

0.2 矢量图设计

0.3 交互原型设计

1. backend

1.1 镜像 penpotapp/backend

1.2 环境变量

这里我们采用外部的数据存储,主要包括 postgresql ,redis , ldap , smtp

2.frontend

2.1 镜像 penpotapp/frontend

2.2 环境变量

2.3 挂载配置

内容(主要是修改 proxy_pass 地址为k8s中的服务dns地址)

user www-data;

 worker_processes auto;

 pid /run/nginx.pid;

 include /etc/nginx/modules-enabled/*.conf;

 

 events {

     worker_connections 2048;

     # multi_accept on;

 }

 

 http {

     sendfile on;

     tcp_nopush on;

     tcp_nodelay on;

     keepalive_requests 30;

     keepalive_timeout 65;

     types_hash_max_size 2048;

 

     server_tokens off;

 

     reset_timedout_connection on;

     client_body_timeout 20s;

     client_header_timeout 20s;

 

     include /etc/nginx/mime.types;

     default_type application/octet-stream;

 

     error_log /dev/stdout;

     access_log /dev/stdout;

 

     gzip on;

     gzip_vary on;

     gzip_proxied any;

     gzip_static on;

     gzip_comp_level 4;

     gzip_buffers 16 8k;

     gzip_http_version 1.1;

 

     gzip_types text/plain text/css text/javascript application/javascript application/json application/transit+json;

 

     map $http_upgrade $connection_upgrade {

         default upgrade;

         ''      close;

     }

 

     server {

         listen 80 default_server;

         server_name _;

 

         client_max_body_size 6M;

         charset utf-8;

 

         proxy_http_version 1.1;

         proxy_set_header Host $http_host;

         proxy_set_header X-Real-IP $remote_addr;

         proxy_set_header X-Scheme $scheme;

         proxy_set_header X-Forwarded-Proto $scheme;

         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

 

         etag off;

         root /var/www/app/;

 

         location ~* \.(js|css).*$ {

             add_header Cache-Control "max-age=86400" always; # 24 hours

         }

 

         location ~* \.(html).*$ {

             add_header Cache-Control "no-cache, max-age=0" always;

         }

 

         location /api {

             proxy_pass http://penpot-backend.toolchains:6060/api;

         }

 

         location /dbg {

             proxy_pass http://penpot-backend.toolchains:6060/dbg;

         }

 

         location /export {

             proxy_pass http://penpot-exporter.toolchains:6061;

         }

 

         location /ws/notifications {

             proxy_set_header Upgrade $http_upgrade;

             proxy_set_header Connection 'upgrade';

             proxy_pass http://penpot-backend.toolchains:6060/ws/notifications;

         }

 

         location @handle_redirect {

             set $redirect_uri "$upstream_http_location";

             set $redirect_host "$upstream_http_x_host";

             set $redirect_cache_control "$upstream_http_cache_control";

 

             proxy_buffering off;

 

             proxy_set_header Host "$redirect_host";

             proxy_hide_header etag;

             proxy_hide_header x-amz-id-2;

             proxy_hide_header x-amz-request-id;

             proxy_hide_header x-amz-meta-server-side-encryption;

             proxy_hide_header x-amz-server-side-encryption;

             proxy_pass $redirect_uri;

 

             add_header x-internal-redirect "$redirect_uri";

             add_header x-cache-control "$redirect_cache_control";

             add_header cache-control "$redirect_cache_control";

         }

 

         location /assets {

             proxy_pass http://penpot-backend.toolchains:6060/assets;

             recursive_error_pages on;

             proxy_intercept_errors on;

             error_page 301 302 307 = @handle_redirect;

         }

 

         location /internal/assets {

             internal;

             alias /opt/data/assets;

             add_header x-internal-redirect "$upstream_http_x_accel_redirect";

         }

     }

 }

3. exporter

3.1 镜像 penpotapp/exporter

3.2 环境变量