开源在线协作原型设计应用Penpot的部署

背景

按惯例，说一下背景，我们只是一个小公司，Axure虽然是正版，但是发布后在线浏览是真的太慢了，没有外网是真的接受不了。

然后我们使用了一段时间的codsign，用还是好用的。但是好家伙呀好家伙，果然是割韭菜，原来免费的东西，现在开始收费了！

中间，我们利用svn的方法，可以实现原型的http访问，教程网上都有，如果朋友们实在找不到好的，到时看要不要再写个教程。这个方案是可以解决原型查看的问题，但是缺乏了协作与批注的功能，虽然公司小，还是需要一定的协作的。

在百度和bing搜索，全是一些原型软件的推广文章，没有什么有意义的搜索结果。

最后还是在搜索结果的文章里面的其他连接找到了这个开源项目。

部署

这个项目是开源的，所以放心使用吧

这个项目推荐还是使用docker-compose来部署的，特别是学了docker之后，根本就不想用其他部署方案，所以还是安装一下docker docker-compose吧！安装的教程网上一搜一大把，这里不再赘述。

相关链接： 使用说明 项目地址

项目本身是推荐使用Elestio或Docker进行部署的，国内的环境，我们还是使用Docker，这里需要使用docker-compose

Docker部署的连接教程与说明

国内访问还是没有什么限制的，这里把相关的命令简单的列出来一下：

# 下载docker-compose配置文件：
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

# 启动
docker compose -p penpot -f docker-compose.yaml up -d

运行完就可以通过ip:9001进行初体验了

注意事项

以上的部署只是简单的使用，具体使用还是需要对docker-compose.yml脚本进行配置的

下面贴一下docker-compose.yml的需要注意的文件内容：

docker-compose.yml文件需要注意的配置点

service:
    penpot-frontend:
        # 在写这篇文章时，最新版本是1.8.3，这个版本有个BUG，backend的邮件功能不可用
        # 会超时异常，所以新部署时，可以看一下github的issus的相关BUG是否已经修复
        # issus反馈1.8.0后的版本都有这个问题，所以我把这里的版本替换成了1.8.0
        image: "penpotapp/frontend:latest" 
        restart: always
        ports:
          - 9001:80 
          # 项目访问的端口，如果考虑以上使用traefik进行搭配部署，只需要考虑对traefik的配置
          # 如果是不使用traefik进行搭配，也可以考虑通过nginx代理转发
          # 也可以直接把此处的端口名修改为80，进行直接访问
    penpot-backend:
        # 在写这篇文章时，最新版本是1.8.3，这个版本有个BUG，backend的邮件功能不可用
        # 会超时异常，所以新部署时，可以看一下github的issus的相关BUG是否已经修复
        # issus反馈1.8.0后的版本都有这个问题，所以我把这里的版本替换成了1.8.0
        image: "penpotapp/backend:latest"
        environment:
            # 此处在原来的基础上，disable-email-verification替换成了enable-email-verification
            # 新增了disable-secure-session-cookies enable-log-emails
            # 因为我们自己内部用的，使用的是内部的dns，所以使用http进行访问，
            # 所以disable-secure-session-cookies一定要加上
            - PENPOT_FLAGS=enable-registration enable-login-with-password disable-email-verification enable-smtp enable-prepl-server
            
            # 此处配置的是项目的访问域名链接，如果开通了邮箱验证，这里是需要配置的
            # 因为验证的串是非常长的加密串，如果这里配置不对，是无法完成邮箱验证的。
            - PENPOT_PUBLIC_URI=http://penpot.1039sz.vip
            
            # 因为我们开了邮箱认证功能，所以需要配置一下smtp
            - PENPOT_SMTP_DEFAULT_FROM= # 这里配置对应邮箱
            - PENPOT_SMTP_DEFAULT_REPLY_TO= # 这里配置对应邮箱
            - PENPOT_SMTP_HOST=smtp.exmail.qq.com # 这里配置邮箱的smtp地址
            - PENPOT_SMTP_PORT=465 # 这里配置smtp对应的端口，不同的邮箱服务商可能不同
            - PENPOT_SMTP_USERNAME= # 这里填的也是对应邮箱，或用户名
            - PENPOT_SMTP_PASSWORD= # 这里填写的是密码或授权码，现在一般都使用授权码
            - PENPOT_SMTP_TLS=false
            - PENPOT_SMTP_SSL=true # 现在基本邮箱服务都有开通ssl，反下我是启用的

            

数据卷挂载的问题

此外是数据卷的问题，penpot是不需要额外的使用数据卷功能的，docker-compose脚本会自动去创建数据卷：

volumes:
  penpot_postgres_v15:
  penpot_assets:

如有需要，可以在docker-compose之前自行去创建这两个卷的挂载目录：

# 相关命令参考以下：
docker volume create --help

如果没有创建，则脚本会自动进行创建，可以通过以下命令查看挂载的卷信息：

# 查看当前docker配置了哪些卷挂载：
docker volume ls

# 再通过卷名称查看具体的挂载信息
docker volume inspect [卷id]

使用外部数据库的问题

同样是通过调整docker-compose.yml文件，对相关的配置进行调整即可，这些都是基本的，再此不再赘述。

使用感受

简单使用了一下，相关功能都是可以使用的，协作、注释的功能也可以使用。

也有一些基本的库，可以直接在项目里面添加，也可以去到对应库下载后导入。

详细的使用还需要产品团队尝试使用之后，才能更进一步的了解其优缺点。

部署就到这里结束了，最后贴一张完成部署的页面：