開源工具新玩法：cpolar提升Penpot協作流暢度

文章目錄

- 前言
- 1. 安裝Docker
- 2. Docker鏡像源添加方法
- 3. 創建并啟動Penpot容器
- 3. 本地使用Penpot進行創作
- 4. 公網遠程訪問本地Penpot
- - 4.1 內網穿透工具安裝
  - 4.2 創建遠程連接公網地址
- 5. 固定Penpot公網地址

前言

你是否也曾因商業設計軟件的高昂費用而放棄團隊協作？或者，想和異地朋友一起做設計，卻找不到免費好用的協作工具？其實，用 Penpot+cpolar，你不需要花一分錢，也能擁有功能強大的設計協作平臺，讓創意不受距離限制，團隊協作像在同一個房間一樣自然。

Penpot 是一款能讓設計師 “自由創作” 的開源設計工具，它就像你的 “云端設計工作室”，支持 UI/UX 設計、原型制作和團隊協作，功能完全不輸收費軟件，而且文件格式開放，不用擔心格式鎖定。但很多人不知道，配合 cpolar，你可以把這個 “工作室” 變成 “全球創意空間”，不管你和團隊成員在哪里，都能實時共同編輯設計稿，即時反饋修改意見。自由設計師小王用這個方法后，合作范圍大大擴展：“我現在能和國外的設計師一起工作，實時修改設計稿，溝通效率比以前用郵件來回發送文件高太多了！”

為什么這個組合能帶來設計協作革命？打個比方，Penpot 就像一張 “無限大的數字畫布”，所有設計師都能在上面畫畫。cpolar 相當于給這張畫布配了 “全球投影功能”，讓世界各地的人都能看到并添加自己的創意。整個過程不需要你懂任何代碼，注冊賬號即可開始協作 —— 比使用普通設計軟件還簡單！

接下來，我們就來手把手教你如何用 Penpot 進行協同設計，如何通過 cpolar 實現遠程訪問。全程都是圖形界面操作，沒有難懂的技術術語，保證你一看就會，讓設計協作從 “格式障礙” 變成 “創意碰撞”。

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” 鍵，然后點擊并拖動畫板來移動它。
設置畫板為縮略圖：選擇一個畫板并點擊右鍵。在菜單上，選擇 “設置為縮略圖”。選定的畫板將作為文件縮略圖顯示在儀表板的卡片上。

目前我們在本機部署了 Penpot ，如果想團隊協作多人使用，或者在異地其他設備使用的話就需要結合Cpolar內網穿透實現公網訪問，免去了復雜得本地部署過程，只需要一個公網地址直接就可以進入到Penpot中。

接下來教大家如何安裝Cpolar并且將 Penpot 實現公網訪問。

4. 公網遠程訪問本地Penpot

4.1 內網穿透工具安裝

下面是安裝cpolar步驟：

Cpolar官網地址: https://www.cpolar.com

使用一鍵腳本安裝命令

curl https://get.cpolar.sh | sudo sh

安裝完成后，執行下方命令查看cpolar服務狀態：（如圖所示即為正常啟動）

sudo systemctl status cpolar

Cpolar安裝和成功啟動服務后，在瀏覽器上輸入ubuntu主機IP加9200端口即:【http://localhost:9200】訪問Cpolar管理界面，使用Cpolar官網注冊的賬號登錄,登錄后即可看到cpolar web 配置界面,接下來在web 界面配置即可：

4.2 創建遠程連接公網地址

登錄cpolar web UI管理界面后,點擊左側儀表盤的隧道管理——創建隧道：

隧道名稱：可自定義，本例使用了: Penpot 注意不要與已有的隧道名稱重復
協議：http
本地地址：9001
域名類型：隨機域名
地區：選擇China Top

創建成功后,打開左側在線隧道列表,可以看到剛剛通過創建隧道生成了兩個公網地址，接下來就可以在其他電腦（異地）上，使用任意一個地址在瀏覽器中訪問即可。

如下圖所示，成功實現使用公網地址異地遠程訪問本地部署的Penpot設計創作平臺！

小結

為了方便演示，我們在上邊的操作過程中使用了cpolar生成的HTTP公網地址隧道，其公網地址是隨機生成的。

這種隨機地址的優勢在于建立速度快，可以立即使用。然而，它的缺點是網址是隨機生成，這個地址在24小時內會發生隨機變化，更適合于臨時使用。

如果有長期遠程訪問本地 Penpot設計創作平臺或者其他本地部署的服務的需求，但又不想每天重新配置公網地址，還想地址好看又好記，那我推薦大家選擇使用固定的二級子域名方式來遠程訪問。

5. 固定Penpot公網地址

由于以上使用cpolar所創建的隧道使用的是隨機公網地址，24小時內會隨機變化，不利于長期遠程訪問。因此我們可以為其配置二級子域名，該地址為固定地址，不會隨機變化【ps：cpolar.cn已備案】

注意需要將cpolar套餐升級至基礎套餐或以上，且每個套餐對應的帶寬不一樣。【cpolar.cn已備案】

登錄cpolar官網，點擊左側的預留，選擇保留二級子域名，地區選擇china vip top，然后設置一個二級子域名名稱，填寫備注信息，點擊保留。

保留成功后復制保留的二級子域名地址：

登錄cpolar web UI管理界面，點擊左側儀表盤的隧道管理——隧道列表，找到所要配置的隧道，點擊右側的編輯。

修改隧道信息，將保留成功的二級子域名配置到隧道中

域名類型：選擇二級子域名
Sub Domain：填寫保留成功的二級子域名
地區: China VIP

點擊更新

更新完成后，打開在線隧道列表，此時可以看到隨機的公網地址已經發生變化，地址名稱也變成了保留和固定的二級子域名名稱。

最后，我們使用固定的公網地址訪問 Penpot 界面可以看到訪問成功，一個永久不會變化的遠程訪問方式即設置好了。

接下來就可以隨時隨地進行異地公網來使用Penpot創作平臺了，把固定的公網地址分享給身邊的人，方便團隊協作，同時也大大提高了工作效率！自己用的話，無需云服務器，還可以實現異地其他設備登錄！以上就是如何在本地安裝Penpot的全部過程。

用 cpolar 讓 Penpot 實現遠程設計協作就是這么簡單！三步輕松搞定：在電腦上安裝 Penpot 并創建項目，邀請團隊成員加入，運行 cpolar 生成遠程訪問鏈接。這個方法不僅免費開源，還能擺脫對商業軟件的依賴，設計文件完全自己掌控。不管你是專業設計師還是設計愛好者，都能通過這個組合讓創意自由流動，實現無邊界協作。現在就試試吧，開啟你的全球設計之旅！

本篇文章知識點來源[cpolar官網][https://www.cpolar.com]

cpolar博客：配置二級子域名: https://www.cpolar.com/blog/configure-the-secondary-subdomain-name
cpolar博客：配置自定義域名: https://www.cpolar.com/blog/configure-your-own-domain-name
cpolar博客：配置固定TCP端口地址: https://www.cpolar.com/blog/configure-fixed-tcp-port-address
cpolar博客：配置固定FTP地址: https://www.cpolar.com/blog/configure-fixed-ftp-address