시놀로지 도커에 penpot (figma 대안) 디자인툴 설치하기
우선 penpot과 figma가 무엇이냐?
Penpot: The Design Tool for Design & Code Collaboration
간단하게 이야기하자면 디자인 툴입니다
뭔가를 개발하면서 디자인을 할 때 협업을 편하게 해주는 서비스라고 보시면 될 거 같습니다
게시글을 보다가 figma 이야기가 있어서 찾아보니 figma는 자체 호스팅이 불가능하고
penpot이라는 오픈소스 프로젝트가 있더라고요
우선 설치는 간단하니까 바로 시작해 봅니다
우선 역방향 프록시 설정을 해줘야 합니다
서버ip:9010 을 역방향 프록시로 설정 해주세요
eg. 192.168.0.2:9010 -> penpot.aaa.com
웹소켓 추가하시고 인증서 지정 후 hsts 켜주시면 됩니다
파일 스테이션 실행 하시고
/volume1/docke/penpot 폴더에 세 개의 폴더를 생성 해줍니다
- db
- redis
- assets
그 후에 컨테이너 매니저에서 프로젝트 생성을 눌러 주시고
/docker/penpot 폴더 지정 해주시고
services:
redis:
image: redis
command:
- /bin/sh
- -c
- redis-server --requirepass redispass
container_name: Penpot-REDIS
hostname: penpot-redis
mem_limit: 256m
mem_reservation: 50m
cpu_shares: 768
security_opt:
- no-new-privileges:true
read_only: true
user: 1026:100
healthcheck:
test: ["CMD-SHELL", "redis-cli ping || exit 1"]
volumes:
- /volume1/docker/penpot/redis:/data:rw
environment:
TZ: Asia/Seoul
restart: on-failure:5
db:
image: postgres:17
container_name: Penpot-DB
hostname: penpot-db
security_opt:
- no-new-privileges:true
healthcheck:
test: ["CMD", "pg_isready", "-q", "-d", "penpot", "-U", "penpotuser"]
timeout: 45s
interval: 10s
retries: 10
volumes:
- /volume1/docker/penpot/db:/var/lib/postgresql/data:rw
environment:
POSTGRES_DB: penpot
POSTGRES_USER: penpotuser
POSTGRES_PASSWORD: penpotpass
POSTGRES_INITDB_ARGS: --data-checksums
restart: on-failure:5
penpot-exporter:
image: penpotapp/exporter:latest
container_name: Penpot-EXPORTER
hostname: penpot-exporter
mem_limit: 1g
cpu_shares: 768
security_opt:
- no-new-privileges:true
environment:
PENPOT_PUBLIC_URI: https://penpot.내 도메인.com
PENPOT_REDIS_URI: redis://:redispass@penpot-redis/0
restart: on-failure:5
penpot-backend:
image: penpotapp/backend:latest
container_name: Penpot-BACKEND
hostname: penpot-backend
mem_limit: 3g
cpu_shares: 768
security_opt:
- no-new-privileges:true
volumes:
- /volume1/docker/penpot/assets:/opt/data/assets:rw
environment:
PENPOT_FLAGS: enable-registration enable-login-with-password disable-email-verification enable-prepl-server enable-smtp
PENPOT_SECRET_KEY: 5qZoBr1PtuOCBATWssP8C3Ippjov33eK
## The PREPL host. Mainly used for external programmatic 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
PENPOT_PUBLIC_URI: https://penpot.내 도메인.com
PENPOT_DATABASE_URI: postgresql://penpot-db/penpot
PENPOT_DATABASE_USERNAME: penpotuser
PENPOT_DATABASE_PASSWORD: penpotpass
PENPOT_REDIS_URI: redis://:redispass@penpot-redis/0
PENPOT_ASSETS_STORAGE_BACKEND: assets-fs
PENPOT_STORAGE_ASSETS_FS_DIRECTORY: /opt/data/assets
PENPOT_TELEMETRY_ENABLED: false
PENPOT_SMTP_HOST: smtp.gmail.com
PENPOT_SMTP_DEFAULT_FROM: Your-own-gmail-address
PENPOT_SMTP_DEFAULT_REPLY_TO: Your-own-gmail-address
PENPOT_SMTP_PORT: 587
PENPOT_SMTP_USERNAME: Your-own-gmail-address
PENPOT_SMTP_PASSWORD: Your-own-app-password
PENPOT_SMTP_TLS: true
PENPOT_SMTP_SSL: false
restart: on-failure:5
depends_on:
redis:
condition: service_healthy
db:
condition: service_healthy
penpot-frontend:
image: penpotapp/frontend:latest
container_name: Penpot-FRONTEND
hostname: penpot-frontend
mem_limit: 1g
cpu_shares: 768
security_opt:
- no-new-privileges:true
ports:
- 9010:80
volumes:
- /volume1/docker/penpot/assets:/opt/data/assets:rw
environment:
PENPOT_FLAGS: enable-registration enable-login-with-password
restart: on-failure:5
depends_on:
penpot-backend:
condition: service_started
penpot-exporter:
condition: service_started복사
쭉 보시다 보면 54번 75번 줄에
PENPOT_PUBLIC_URI: https://penpot.내 도메인.com복사
코드가 있습니다
역방향 프록시 설정한 주소 입력 해주세요
포트는 우측 포트는 건드리시면 안되고 좌측 9010포트는 안겹치는 포트로 수정 하시면 됩니다만
9010포트가 접속 포트이기 때문에 변경하시면 역방향 프록시도 수정 하셔야 합니다
그 외에 smtp 설정하신 게 있으시다면 설정 값 입력 하시면 됩니다
저는 설정한 게 없어서 그냥 무시했습니다
다 입력 하셨으면 다음다음 생성 누르시면
다섯 개의 컨테이너가 실행이 됩니다
설정한 역방향 프록시 주소로 접속 하시면
로그인 창이 뜹니다
계정을 생성 해주시고 로그인 하시면
끝 입니다
penpot 설치가 완료 됐습니다
Penpot: The Design Tool for Design & Code Collaboration
GitHub - penpot/penpot: Penpot: The open-source design tool for design and code collaboration
자세한 설정이나 사용법등의 내용은 위의 링크들 확인하시면 될 거 같습니다
참고로 회원 가입 가능 여부나 설정 추가를 하시려면
기본 설정은 69번, 111번 줄의
PENPOT_FLAGS: enable-registration enable-login-with-password disable-email-verification enable-prepl-server enable-smtp복사
PENPOT_FLAGS: enable-registration enable-login-with-password복사
위의 코드로 설정 돼있습니다
회원 가입을 열어두고 이메일과 패스워드로 로그인 하는 방식이죠
회원 가입을 잠궈두고 CLI로 생성해서 사용하는 방법도 있고
이 외에도 google이나 깃헙, 오픈ID 같은 인증 서비스를 통해서 로그인하는 방식도 설정 할 수 있습니다