当前位置：首页 > news >正文

无界设计新生态：Penpot开源平台与cpolar的云端协同创新实践

news 2025/7/31 11:49:57

文章目录

- 前言
- 1. 安装Docker
- 2. Docker镜像源添加方法
- 3. 创建并启动Penpot容器
- 3. 本地使用Penpot进行创作
- 4. 公网远程访问本地Penpot
- - 4.1 内网穿透工具安装
  - 4.2 创建远程连接公网地址
- 5. 固定Penpot公网地址

前言

设计本该是灵感如泉涌的创意盛宴，可现实却总被这些恼人的低效环节搅局：在本地工具里像无头苍蝇般反复导出文件，跨设备版本同步时数据冲突频发，网络限制又让实时预览原型成了奢望。更让人抓狂的是，专业工具部署环境复杂，落地难度堪比登天！

这，正是当代设计团队深陷的典型泥潭：协作分散，效率如泄了气的气球；跨平台操作，需求偏差像脱缰的野马；远程访问，安全风险如影随形。别急，创新方案来救场啦——Penpot的Web化协同与cpolar内网穿透技术强强联手，在安全堡垒中实现全场景无缝覆盖！

这一组合方案，简直是游戏原画师处理多角色设定集、产品经理迭代复杂交互流程等场景的“救星”！Penpot提供浏览器直连的便捷，cpolar则为“私有服务”需求搭建起“远程连接桥梁”——就像给设计工作流装上了“智能导航仪”和“云端控制台”的超级外挂，让设计之路畅通无阻！

本文将揭秘如何在Linux系统上，利用Docker轻松部署开源设计和原型创作平台Penpot，再结合Cpolar内网穿透软件，一键配置公网地址，让异地远程访问本地设计平台变得轻而易举！

在本例中，我们将展示如何在Linux系统上，借助Docker快速完成本地部署，开启设计新篇章！

1. 安装Docker

本教程操作环境为Linux Ubuntu系统，在开始之前，我们需要先安装Docker与docker-compose。

在终端中执行下方命令安装docker：

sudo curl -fsSL https://github.com/tech-shrimp/docker_installer/releases/download/latest/linux.sh| bash -s docker --mirror Aliyun

如果上边命令中访问不了Github，可以使用Gitee的链接：

sudo curl -fsSL https://gitee.com/tech-shrimp/docker_installer/releases/download/latest/linux.sh| bash -s docker --mirror Aliyun

然后启动Docker

sudo systemctl start docker

2. Docker镜像源添加方法

如因网络问题拉取不到镜像，

可尝试在终端执行 sudo nano /etc/docker/daemon.json

输入：

{
"registry-mirrors": [
"https://do.nark.eu.org",
"https://dc.j8.work",
"https://docker.m.daocloud.io",
"https://dockerproxy.com",
"https://docker.mirrors.ustc.edu.cn",
"https://docker.nju.edu.cn"
]
}

保存退出

然后执行：sudo systemctl restart docker

3. 创建并启动Penpot容器

成功拉取 Piwigo 镜像后，我们在Home目录下的docker路径新增该项目目录

mkdir penpot

cd penpot

然后在该项目中创建docker-compose.yml

nano docker-compose.yml

输入下方代码并保存退出：

version: "3.8"networks:penpot:volumes:penpot_postgres_v15:penpot_assets:# penpot_traefik:# penpot_minio:services:## Traefik service declaration example. Consider using it if you are going to expose## penpot to the internet or different host than `localhost`.# traefik:#   image: traefik:v2.9#   networks:#     - penpot#   command:#     - "--api.insecure=true"#     - "--entryPoints.web.address=:80"#     - "--providers.docker=true"#     - "--providers.docker.exposedbydefault=false"#     - "--entryPoints.websecure.address=:443"#     - "--certificatesresolvers.letsencrypt.acme.tlschallenge=true"#     - "--certificatesresolvers.letsencrypt.acme.email=<EMAIL_ADDRESS>"#     - "--certificatesresolvers.letsencrypt.acme.storage=/traefik/acme.json"#   volumes:#     - "penpot_traefik:/traefik"#     - "/var/run/docker.sock:/var/run/docker.sock"#   ports:#     - "80:80"#     - "443:443"penpot-frontend:image: "penpotapp/frontend:latest"restart: alwaysports:- 9001:80volumes:- penpot_assets:/opt/data/assetsdepends_on:- penpot-backend- penpot-exporternetworks:- penpotlabels:- "traefik.enable=true"## HTTP: example of labels for the case if you are going to expose penpot to the## internet using only HTTP (without HTTPS) with traefik# - "traefik.http.routers.penpot-http.entrypoints=web"# - "traefik.http.routers.penpot-http.rule=Host(`<DOMAIN_NAME>`)"# - "traefik.http.services.penpot-http.loadbalancer.server.port=80"## HTTPS: example of labels for the case if you are going to expose penpot to the## internet using with HTTPS using traefik# - "traefik.http.middlewares.http-redirect.redirectscheme.scheme=https"# - "traefik.http.middlewares.http-redirect.redirectscheme.permanent=true"# - "traefik.http.routers.penpot-http.entrypoints=web"# - "traefik.http.routers.penpot-http.rule=Host(`<DOMAIN_NAME>`)"# - "traefik.http.routers.penpot-http.middlewares=http-redirect"# - "traefik.http.routers.penpot-https.entrypoints=websecure"# - "traefik.http.routers.penpot-https.rule=Host(`<DOMAIN_NAME>`)"# - "traefik.http.services.penpot-https.loadbalancer.server.port=80"# - "traefik.http.routers.penpot-https.tls=true"# - "traefik.http.routers.penpot-https.tls.certresolver=letsencrypt"## Configuration envronment variables for frontend the container. In this case this## container only needs the `PENPOT_FLAGS`. This environment variable is shared with## other services but not all flags are relevant to all services.environment:## Relevant flags for frontend:## - demo-users## - login-with-github## - login-with-gitlab## - login-with-google## - login-with-ldap## - login-with-oidc## - login-with-password## - registration## - webhooks#### You can read more about all available flags on:## https://help.penpot.app/technical-guide/configuration/#advanced-configuration- PENPOT_FLAGS=enable-registration enable-login-with-passwordpenpot-backend:image: "penpotapp/backend:latest"restart: alwaysvolumes:- penpot_assets:/opt/data/assetsdepends_on:- penpot-postgres- penpot-redisnetworks:- penpot## Configuration envronment variables for backend the## container.environment:## Relevant flags for backend:## - demo-users## - email-verification## - log-emails## - log-invitation-tokens## - login-with-github## - login-with-gitlab## - login-with-google## - login-with-ldap## - login-with-oidc## - login-with-password## - registration## - secure-session-cookies## - smtp## - smtp-debug## - telemetry## - webhooks## - prepl-server#### You can read more about all available flags and other## environment variables for the backend here:## https://help.penpot.app/technical-guide/configuration/#advanced-configuration- PENPOT_FLAGS=enable-registration disable-secure-session-cookies## Penpot SECRET KEY. It serves as a master key from which other keys for subsystems## (eg http sessions, or invitations) are derived.#### If you leve it commented, all created sessions and invitations will## become invalid on container restart.#### If you going to uncomment this, we recommend use here a trully randomly generated## 512 bits base64 encoded string.  You can generate one with:#### python3 -c "import secrets; print(secrets.token_urlsafe(64))"# - PENPOT_SECRET_KEY=my-insecure-key## The PREPL host. Mainly used for external programatic access to penpot backend## (example: admin). By default it listen on `localhost` but if you are going to use## the `admin`, you will need to uncomment this and set the host to `0.0.0.0`.# - PENPOT_PREPL_HOST=0.0.0.0## Public URI. If you are going to expose this instance to the internet and use it## under different domain than 'localhost', you will need to adjust it to the final## domain.#### Consider using traefik and set the 'disable-secure-session-cookies' if you are## not going to serve penpot under HTTPS.- PENPOT_PUBLIC_URI=http://localhost:9001## Database connection parameters. Don't touch them unless you are using custom## postgresql connection parameters.- PENPOT_DATABASE_URI=postgresql://penpot-postgres/penpot- PENPOT_DATABASE_USERNAME=penpot- PENPOT_DATABASE_PASSWORD=penpot## Redis is used for the websockets notifications. Don't touch unless the redis## container has different parameters or different name.- PENPOT_REDIS_URI=redis://penpot-redis/0## Default configuration for assets storage: using filesystem based with all files## stored in a docker volume.- PENPOT_ASSETS_STORAGE_BACKEND=assets-fs- PENPOT_STORAGE_ASSETS_FS_DIRECTORY=/opt/data/assets## Also can be configured to to use a S3 compatible storage## service like MiniIO. Look below for minio service setup.# - AWS_ACCESS_KEY_ID=<KEY_ID># - AWS_SECRET_ACCESS_KEY=<ACCESS_KEY># - PENPOT_ASSETS_STORAGE_BACKEND=assets-s3# - PENPOT_STORAGE_ASSETS_S3_ENDPOINT=http://penpot-minio:9000# - PENPOT_STORAGE_ASSETS_S3_BUCKET=<BUKET_NAME>## Telemetry. When enabled, a periodical process will send anonymous data about this## instance. Telemetry data will enable us to learn on how the application is used,## based on real scenarios. If you want to help us, please leave it enabled. You can## audit what data we send with the code available on github- PENPOT_TELEMETRY_ENABLED=true## Example SMTP/Email configuration. By default, emails are sent to the mailcatch## service, but for production usage is recommended to setup a real SMTP## provider. Emails are used to confirm user registrations & invitations. Look below## how mailcatch service is configured.- PENPOT_SMTP_DEFAULT_FROM=no-reply@example.com- PENPOT_SMTP_DEFAULT_REPLY_TO=no-reply@example.com- PENPOT_SMTP_HOST=penpot-mailcatch- PENPOT_SMTP_PORT=1025- PENPOT_SMTP_USERNAME=- PENPOT_SMTP_PASSWORD=- PENPOT_SMTP_TLS=false- PENPOT_SMTP_SSL=falsepenpot-exporter:image: "penpotapp/exporter:latest"restart: alwaysnetworks:- penpotenvironment:# Don't touch it; this uses internal docker network to# communicate with the frontend.- PENPOT_PUBLIC_URI=http://penpot-frontend## Redis is used for the websockets notifications.- PENPOT_REDIS_URI=redis://penpot-redis/0penpot-postgres:image: "postgres:15"restart: alwaysstop_signal: SIGINTvolumes:- penpot_postgres_v15:/var/lib/postgresql/datanetworks:- penpotenvironment:- POSTGRES_INITDB_ARGS=--data-checksums- POSTGRES_DB=penpot- POSTGRES_USER=penpot- POSTGRES_PASSWORD=penpotpenpot-redis:image: redis:7restart: alwaysnetworks:- penpot## A mailcatch service, used as temporal SMTP server. You can access via HTTP to the## port 1080 for read all emails the penpot platform has sent. Should be only used as a## temporal solution meanwhile you don't have a real SMTP provider configured.penpot-mailcatch:image: sj26/mailcatcher:latestrestart: alwaysexpose:- '1025'ports:- "1080:1080"networks:- penpot## Example configuration of MiniIO (S3 compatible object storage service); If you don't## have preference, then just use filesystem, this is here just for the completeness.# minio:#   image: "minio/minio:latest"#   command: minio server /mnt/data --console-address ":9001"#   restart: always##   volumes:#     - "penpot_minio:/mnt/data"##   environment:#     - MINIO_ROOT_USER=minioadmin#     - MINIO_ROOT_PASSWORD=minioadmin##   ports:#     - 9000:9000#     - 9001:9001

然后执行下方命令启动容器运行镜像：

sudo docker compose up -d

如需停止可以执行：

sudo docker-compose down

3. 本地使用Penpot进行创作

接下来我们就可以通过任意浏览器进行访问测试，打开一个浏览器输入localhost:9001，可以看到进入到了Penpot的登录界面，注册一个用户名和密码。

选择使用用途

然后进入到设计界面，可以自由创作了！

画板跟同类设计软件的画布功能差不多，并具有固定的边缘。你可以根据你的需要，选择一个特定的屏幕或打印用的尺寸。

创建画板：点击工具栏中 “移动” 箭头正下方的第一个方形图标。点击并拖动箭头来创建一个自定义尺寸的画板。你也可以在 “设计属性” 边栏选择包揽设备最常用分辨率和标准打印尺寸的预设模板。
选择和移动画板：点击画板的名称或没有图层的区域。当边框变成绿色时，代表着你选择成功了。一旦选择了，按住 “Shift” 键，然后点击并拖动画板来移动它。
设置画板为缩略图：选择一个画板并点击右键。在菜单上，选择 “设置为缩略图”。选定的画板将作为文件缩略图显示在仪表板的卡片上。