Linux docker安装部署开源在线画原型图项目Penpot

Linux docker安装部署开源在线画原型图项目Penpot

本人项目地址：https://ui.oohx.cn

什么是penpot？Figma 和 Penpot 都是流行的设计工具，它们都提供了丰富的功能来帮助用户进行界面设计和协作。以下是 Figma 和 Penpot 的一些比较：

1. 功能：Figma 提供了各种各样的设计和协作功能，如实时协作、原型制作、插件生态等；而 Penpot 则聚焦于基础的设计和协作功能，如矢量图形绘制、图层管理、共享组件等。
2. 成本：Figma 是一款商业软件，需要付费才能获得完整的功能和服务；而 Penpot 是一款免费开源软件，不需要支付任何费用即可使用所有功能。
3. 部署：Figma 是一款基于云端的设计工具，全部资源都存储在 Figma 的服务器上，并通过浏览器或客户端应用程序进行访问；而 Penpot 可以部署在自己的服务器上，用户可以完全掌控自己的数据和安全。
4. 扩展性：Figma 生态丰富，有大量第三方插件和 API 接口，可以扩展和定制各种功能；而 Penpot 还比较年轻，目前的插件和扩展还比较有限。
5. 数据格式：Figma 使用自己的文件格式，虽然支持导出 SVG、PNG 等常见格式，但对于某些情况下需要使用原生文件的用户来说可能不太方便；而 Penpot 使用开放的文件格式，如 SVG、JSON 等，可以方便地导入和导出到其他工具中。
6. Figma 和 Penpot 都是强大的设计工具，它们各有优缺点，可以根据实际需求选择适合自己的工具。如果你需要一个功能丰富的设计工具，并且愿意为此付费，那么 Figma 是一个很好的选择；如果你需要一个免费的开源设计工具，并且希望完全掌控自己的数据和安全，那么 Penpot 可能更适合你。

接下来我们开始演示如何自己部署penpot

一：前言

1.首先我们先安装宝塔

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

2.在宝塔面板安装docker

二：开始部署

平台官方地址：https://help.penpot.app/technical-guide/getting-started/#install-with-docker

1.需要获取文件。您可以从Penpot存储库下载它。docker-compose.yaml，也可以输入命令安装：

wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml

或者

curl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml

以上两行代码二选一安装
配置文件一般下载到/root目录下，如需更改配置文件可在此文件夹找到docker-compose.yaml文件进行更改

2.安装配置文件成功后，输入以下命令启动docker，会按照配置文件的内容自动下载镜像及配置容器

docker compose -p penpot -f docker-compose.yaml up -d

此任务完成后在宝塔docker下即可看到启动后的容器
启动完成后它将开始侦听 http://localhost:9001 可以IP加端口直接访问

如需停止，输入以下命令即可：

docker compose -p penpot -f docker-compose.yaml down

如果需要更新，输入以下命令：

docker compose -f docker-compose.yaml pull

三：遇到的问题

1.根据上面所有容器都可以正常启动，但是注册账号之后，无法登陆，你需要修改配置：

在140行左右，或者你搜索PENPOT_FLAGS即可，在后面加上disable-secure-session-cookies，不然需要证书才可以访问。

- PENPOT_FLAGS=enable-registration enable-login-with-password enable-email-verification enable-smtp enable-prepl-server disable-secure-session-cookies

官方地址：https://help.penpot.app/technical-guide/configuration/#other-flags

2.还有一个就是你本地端口5432（postgresql默认端口）已经被占用或者你已经有一个postgresql了

需要修改配置：ports:- 5433:5432（5433你可以修改成你自己的空余端口即可），加上端口映射即可。

penpot-postgres:
    image: "postgres:15"
    restart: always
    ports:
      - 5433:5432
    stop_signal: SIGINT

3.邮箱注册验证配置，如果你不配置，那么邮箱随便填也可以注册以及登录，如果你想别人注册然后接收到验证邮件之后才能登陆需要修改如下配置：（需要你的邮箱开启smtp协议）可以自行百度

主要注意的是PENPOT_SMTP_PASSWORD=，这个不是邮箱密码，而是开启smtp的授权码

      - PENPOT_SMTP_DEFAULT_REPLY_TO=xxx@qq.com  ##你的QQ邮箱
      - PENPOT_SMTP_HOST=smtp.qq.com   ##这个是qq的host，具体的以你们的邮箱为准
      - PENPOT_SMTP_PORT=465   ##端口QQ是这个还有一个是别的，以你们的邮箱的端口为准
      - PENPOT_SMTP_USERNAME=xxx@qq.com   ##你的QQ邮箱，应该也可以是用户名
      - PENPOT_SMTP_PASSWORD=xxx  ##这个不是邮箱密码，而是开启smtp的授权码
      - PENPOT_SMTP_TLS=false
      - PENPOT_SMTP_SSL=true  //默认是false, 我开启了 看自己需求

配置完之后，用户注册了会受到你的验证邮件，验证了才能登陆。

4.还有一个就是对外的地址：如果你是对外的那么需要配置。PENPOT_PUBLIC_URI，这个有2个，需要修改的是默认值为- PENPOT_PUBLIC_URI=http://localhost:9001 的值

- PENPOT_PUBLIC_URI=http://public-domain

这个换成你的域名就行，如果你的不是80端口则记得加上端口http://public-domain:9001

也可以直接通过Nginx反向代理ip+端口方式进行访问

他的验证邮件是默认这个url+很长一串的校验码，所以如果这个url不对，校验会不成功。

修改完这些配置之后再去启动即可：如下图。

docker compose -p penpot -f docker-compose.yaml up -d

四：使用 Docker 配置 Penpot

1.使用 命令 创建用户

默认情况下（或使用标志时），电子邮件验证过程 对于新注册完全禁用，但强烈建议启用电子邮件验证或禁用注册（如果您要将 Penpot 实例公开给 互联网。disable-email-verification

如果禁用了注册，则可以使用 命令行界面创建用户：

docker exec -ti penpot-penpot-backend-1 python3 ./manage.py create-profile

注意：确切的容器名称取决于您的 docker 版本和平台。 例如，它可以是或 。 您可以检查执行的正确名称。penpot-penpot-backend-1 penpot_penpot-backend-1 docker ps

注意：仅当您在后端正确设置了标志（默认情况下在最新的 docker-compose.yaml 文件上设置）时，此脚本才有效enable-prepl-server

您可以在“配置”部分找到所有配置选项。

本人项目地址：https://ui.oohx.cn

官方教程地址：Penpot-docs/getting-started.md at Main ·Penpot/Penpot-docs (github.com)