【Ubuntu 24】penpotをインストールする

Ubuntu 24にpenpotをインストールしたい！

概要

今回の記事では、Ubuntu 24にpenpotをインストールする手順を掲載する。

Figma的なものをローカルネットワークの中で運用したいというモチベーション。

仕様書

環境

lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 24.04.2 LTS
Release:        24.04
Codename:       noble

docker -v
Docker version 29.1.5, build 0e6fee6

penpot：2.12.1

手順書

まず、下記の記事を参考にDockerをインストールする。

【Ubuntu 24】Dockerをインストールする

Ubuntu 24にDockerをインストールしたい！

penpotのymlを保存するディレクトリを作って中に入る。

mkdir penpot
cd penpot

docker-compose.ymlとファイルを作って下記のような感じにする。

【オンプレ構築】PenpotをDockerで動かしてみた Figma風UIデザイン環境の代替ツールとして最適 | タノコン

Penpotをオンプレミス環境で動かしたい方向け。Dockerを使ってLinuxミニPCに構築し、Windowsクライア?

上記のページを参考にさせて頂きました。ありがとうございました。penpotのバージョン以外は同じです。

version: "3.8"

networks:
  penpot:

volumes:
  penpot_postgres_v15:
  penpot_assets:

services:
  penpot-frontend:
    image: "penpotapp/frontend:2.12.1"
    restart: unless-stopped
    ports:
      - "9001:8080"
    volumes:
      - penpot_assets:/opt/data/assets
    depends_on:
      - penpot-backend
      - penpot-exporter
    networks:
      - penpot
    environment:
      PENPOT_FLAGS: "disable-email-verification enable-smtp disable-secure-session-cookies"
      PENPOT_HTTP_SERVER_MAX_BODY_SIZE: 31457280
      PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE: 367001600

  penpot-backend:
    image: "penpotapp/backend:2.12.1"
    restart: unless-stopped
    volumes:
      - penpot_assets:/opt/data/assets
    depends_on:
      penpot-postgres:
        condition: service_healthy
      penpot-valkey:
        condition: service_healthy
    networks:
      - penpot
    environment:
      PENPOT_PUBLIC_URI: "http://{ip-address}:{port}"
      PENPOT_DATABASE_URI: "postgresql://penpot-postgres/penpot"
      PENPOT_DATABASE_USERNAME: "penpot"
      PENPOT_DATABASE_PASSWORD: "penpot"
      PENPOT_REDIS_URI: "redis://penpot-valkey/0"
      PENPOT_ASSETS_STORAGE_BACKEND: "assets-fs"
      PENPOT_STORAGE_ASSETS_FS_DIRECTORY: "/opt/data/assets"
      PENPOT_TELEMETRY_ENABLED: "true"
      PENPOT_TELEMETRY_REFERER: "compose"
      PENPOT_SECRET_KEY: "change-this-insecure-key"
      PENPOT_FLAGS: "disable-email-verification"

  penpot-exporter:
    image: "penpotapp/exporter:2.12.1"
    restart: unless-stopped
    depends_on:
      penpot-valkey:
        condition: service_healthy
    networks:
      - penpot
    environment:
      PENPOT_SECRET_KEY: "change-this-insecure-key"
      PENPOT_PUBLIC_URI: "http://penpot-frontend:8080"
      PENPOT_REDIS_URI: "redis://penpot-valkey/0"

  penpot-postgres:
    image: "postgres:15"
    restart: unless-stopped
    stop_signal: SIGINT
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U penpot"]
      interval: 2s
      timeout: 10s
      retries: 5
      start_period: 2s
    volumes:
      - penpot_postgres_v15:/var/lib/postgresql/data
    networks:
      - penpot
    environment:
      - POSTGRES_INITDB_ARGS=--data-checksums
      - POSTGRES_DB=penpot
      - POSTGRES_USER=penpot
      - POSTGRES_PASSWORD=penpot

  penpot-valkey:
    image: "valkey/valkey:8.1"
    restart: unless-stopped
    healthcheck:
      test: ["CMD-SHELL", "valkey-cli ping | grep PONG"]
      interval: 1s
      timeout: 3s
      retries: 5
      start_period: 3s
    networks:
      - penpot
    environment:
      - VALKEY_EXTRA_FLAGS=--maxmemory 128mb --maxmemory-policy volatile-lfu

  penpot-mailcatch:
    image: "sj26/mailcatcher:latest"
    restart: unless-stopped
    expose:
      - "1025"
    ports:
      - "1080:1080"
    networks:
      - penpot

penpot-backendのPENPOT_PUBLIC_URIは自分の環境に合わせて変更する。

...
services:
  ...
  penpot-backend
    ...
    environment:
      PENPOT_PUBLIC_URI: "http://{ip-address}:{port}"

例えば192.168.3.64:9001のような感じ。

ymlファイルのある場所でコマンドを実行して起動する。

docker compose up -d

他のPCのブラウザでPENPOT_PUBLIC_URIで設定したアドレスにアクセスするとpenpotが表示される。

まとめ（感想文）

N100のミニPCでも今のところストレスなく使えてる！やったね！

参考文献・引用

【オンプレ構築】PenpotをDockerで動かしてみた Figma風UIデザイン環境の代替ツールとして最適 | タノコン

Penpotをオンプレミス環境で動かしたい方向け。Dockerを使ってLinuxミニPCに構築し、Windowsクライア?