excalidraw+excalidraw-room構築

excalidrawを自前サーバーでリアルタイム共有込で走らせたかった

……でも何かどこにも情報無かったので……(探し方が悪い？)
※ 本記事に記載のIPアドレス・ドメイン名はすべて架空の例です。
実際の環境に合わせて適宜置き換えてください。

前提

docker
docker compose
git
Apache(SSL済)←リバプロ用

ディレクトリ構成

/work (以下でのroot)
/work/docker-compose.yml
/work/excalidraw(git cloneの結果)

とりあえずgitから本体取得

/work$ git clone https://github.com/excalidraw/excalidraw.git

/excalidraw/Dockerfileに追記(いらないかも)

他のARG追加してる辺りに

ARG VITE_APP_WS_SERVER_URL
ENV VITE_APP_WS_SERVER_URL=$VITE_APP_WS_SERVER_URL

/docker-compose.yml 作る

version: "3.8"
services:
  excalidraw:
    container_name: excalidraw-web
    build:
      context: ./excalidraw
      dockerfile: Dockerfile
      args:
        VITE_APP_WS_SERVER_URL: wss://hogefuga.com //←大事
    ports:
      - "9247:80"
    restart: unless-stopped
  excalidraw-room:
    container_name: excalidraw-room
    image: excalidraw/excalidraw-room:latest
    ports:
      - "9248:80"
    restart: unless-stopped

buildする

/work$ docker compose build --no-cache

上げる

/work$ docker compose up -d

Apacheでリバプロ

<VirtualHost *:443>
    ServerName hogefuga.com

    SSLEngine on
    SSLCertificateFile /path/to/key/fullchain.pem
    SSLCertificateKeyFile /path/to/key/privkey.pem
    
    # WebSocket routing (socket.io)
    RewriteEngine On
    RewriteCond %{HTTP:Upgrade} =websocket [NC]
    RewriteRule ^/socket.io/(.*) ws://xxx.xxx.xxx.xxx:9248/socket.io/$1 [P,L]
    RewriteCond %{HTTP:Upgrade} !=websocket [NC]
    RewriteRule ^/socket.io/(.*) http://xxx.xxx.xxx.xxx:9248/socket.io/$1 [P,L]

    ProxyPassReverse /socket.io/ http://xxx.xxx.xxx.xxx:9248/socket.io/

    # App itself
    ProxyPass / http://xxx.xxx.xxx.xxx:9247/
    ProxyPassReverse / http://xxx.xxx.xxx.xxx:9247/

    Header always set X-Frame-Options "SAMEORIGIN"
</VirtualHost>

やったー！

稼働確認動いたやったー！