first commit
This commit is contained in:
200
content/en/posts/docker-compose/excalidraw/index.md
Normal file
200
content/en/posts/docker-compose/excalidraw/index.md
Normal file
@@ -0,0 +1,200 @@
|
||||
---
|
||||
slug: "excalidraw-full-stack-docker"
|
||||
title: "Excalidraw Full-Stack Self-Deployment"
|
||||
subtitle: ""
|
||||
date: 2023-01-13T15:54:36+08:00
|
||||
lastmod: 2024-03-11T12:39:36-05:00
|
||||
draft: false
|
||||
author:
|
||||
name: James
|
||||
link: https://www.jamesflare.com
|
||||
email:
|
||||
avatar: /site-logo.avif
|
||||
description: This article provides a comprehensive guide on deploying the full Excalidraw stack using Docker Compose, including the frontend, storage backend, and collaboration components, to enable a fully functional private deployment with sharing and collaboration features.
|
||||
keywords: ["Excalidraw","Docker","Docker Compose","Private Deployment"]
|
||||
license: ""
|
||||
comment: true
|
||||
weight: 0
|
||||
|
||||
tags:
|
||||
- Excalidraw
|
||||
- Open Source
|
||||
- Docker
|
||||
categories:
|
||||
- Tutorials
|
||||
- Sharing
|
||||
|
||||
hiddenFromHomePage: false
|
||||
hiddenFromSearch: false
|
||||
|
||||
summary: This article provides a comprehensive guide on deploying the full Excalidraw stack using Docker Compose, including the frontend, storage backend, and collaboration components, to enable a fully functional private deployment with sharing and collaboration features.
|
||||
resources:
|
||||
- name: featured-image
|
||||
src: featured-image.jpg
|
||||
- name: featured-image-preview
|
||||
src: featured-image-preview.jpg
|
||||
|
||||
toc:
|
||||
enable: true
|
||||
math:
|
||||
enable: false
|
||||
lightgallery: true
|
||||
seo:
|
||||
images: []
|
||||
|
||||
repost:
|
||||
enable: true
|
||||
url: ""
|
||||
|
||||
# See details front matter: https://fixit.lruihao.cn/theme-documentation-content/#front-matter
|
||||
---
|
||||
|
||||
## Intro
|
||||
|
||||
This might be the only article on the Chinese internet that discusses how to fully deploy the Excalidraw stack. Most only deploy a crippled frontend.
|
||||
|
||||
I tried to privately deploy Excalidraw locally, and the operation is very simple. According to the official README, it can be completed quickly.
|
||||
|
||||
### Issue
|
||||
|
||||
But have you noticed that sharing links and online collaboration have issues and don't work? Even Libraries have some problems?
|
||||
|
||||
This is because almost all the deployment tutorials on the internet only deploy the excalidraw-app frontend, and its storage requires excalidraw-json, while collaboration requires excalidraw-room.
|
||||
|
||||
The official code for these is all open source, but the progress of the frontend is too fast, so they are all unusable now.
|
||||
|
||||
For example, the officially released excalidraw-json uses S3 storage, and now it's firebase without exception. The official version hasn't released a stripped-down version, so what should we do?
|
||||
|
||||
### Solution
|
||||
|
||||
The answer is to **downgrade** and **build a full stack**.
|
||||
|
||||
We use the official excalidraw-app, but the version is about 9 months old. Frankly speaking, there aren't many missing features, and there are no major bug issues. This generation of frontend is quite compatible.
|
||||
|
||||
excalidraw-json is unusable. There are also some solutions abroad that use minio to run S3 to interface with it, but I tested it and found some big problems. This backend should be unusable. Fortunately, I found a third-party solution that implements a fully functional backend with its own code, supports v2 API, called excalidraw-storage-backend.
|
||||
|
||||
We use the official excalidraw-room, the latest version, which is about 9 months old, consistent with the frontend, and can be used normally.
|
||||
|
||||
redis is required by excalidraw-storage-backend and is used to temporarily store shared canvas data, so it cannot guarantee data reliability.
|
||||
|
||||
So let's get started. This solution uses docker-compose.
|
||||
|
||||
- excalidraw-app
|
||||
- excalidraw-room
|
||||
- excalidraw-storage-backend
|
||||
- redis
|
||||
|
||||
## Docker Compose
|
||||
|
||||
Docker Compose configuration
|
||||
|
||||
```yaml
|
||||
version: "3.8"
|
||||
|
||||
services:
|
||||
excalidraw:
|
||||
image: kiliandeca/excalidraw
|
||||
healthcheck:
|
||||
disable: true
|
||||
ports:
|
||||
- "80:80" # Default port 80, can be modified
|
||||
environment:
|
||||
BACKEND_V2_GET_URL: http://localhost:8080/api/v2/scenes/
|
||||
BACKEND_V2_POST_URL: http://localhost:8080/api/v2/scenes/
|
||||
LIBRARY_URL: https://libraries.excalidraw.com
|
||||
LIBRARY_BACKEND: https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
|
||||
SOCKET_SERVER_URL: http://localhost:5000/
|
||||
STORAGE_BACKEND: "http"
|
||||
HTTP_STORAGE_BACKEND_URL: "http://localhost:8080/api/v2"
|
||||
|
||||
excalidraw-storage-backend:
|
||||
image: kiliandeca/excalidraw-storage-backend
|
||||
ports:
|
||||
- "8080:8080"
|
||||
environment:
|
||||
STORAGE_URI: redis://redis:6379
|
||||
|
||||
excalidraw-room:
|
||||
image: excalidraw/excalidraw-room
|
||||
ports:
|
||||
- "5000:80"
|
||||
|
||||
redis:
|
||||
image: redis
|
||||
ports:
|
||||
- "6379:6379"
|
||||
```
|
||||
|
||||
It does not support https by default. If needed, it can be achieved through a reverse proxy, but remember to modify the variables in the environment at the same time.
|
||||
|
||||
This configuration file has been tested locally and can run perfectly.
|
||||
|
||||
{{< image src="excalidrawLocalDemo.webp" >}}
|
||||
|
||||
---
|
||||
|
||||
If you have a conflict with port 6379, you can choose to build a network.
|
||||
|
||||
```bash
|
||||
docker network create excalidraw-net
|
||||
```
|
||||
|
||||
Then make some modifications like this, and it's done.
|
||||
|
||||
```yaml
|
||||
version: "3.8"
|
||||
|
||||
services:
|
||||
excalidraw:
|
||||
image: kiliandeca/excalidraw
|
||||
healthcheck:
|
||||
disable: true
|
||||
ports:
|
||||
- "80:80"
|
||||
environment:
|
||||
BACKEND_V2_GET_URL: http://localhost:8080/api/v2/scenes/
|
||||
BACKEND_V2_POST_URL: http://localhost:8080/api/v2/scenes/
|
||||
LIBRARY_URL: https://libraries.excalidraw.com
|
||||
LIBRARY_BACKEND: https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
|
||||
SOCKET_SERVER_URL: http://localhost:5000/
|
||||
STORAGE_BACKEND: "http"
|
||||
HTTP_STORAGE_BACKEND_URL: "http://localhost:8080/api/v2"
|
||||
|
||||
excalidraw-storage-backend:
|
||||
image: kiliandeca/excalidraw-storage-backend
|
||||
ports:
|
||||
- "8080:8080"
|
||||
environment:
|
||||
STORAGE_URI: redis://redis:6379
|
||||
|
||||
excalidraw-room:
|
||||
image: excalidraw/excalidraw-room
|
||||
ports:
|
||||
- "5000:80"
|
||||
|
||||
redis:
|
||||
image: redis
|
||||
expose:
|
||||
- "6379"
|
||||
|
||||
networks:
|
||||
default:
|
||||
external:
|
||||
name: excalidraw-net
|
||||
```
|
||||
|
||||
## Run
|
||||
|
||||
Find or create a new directory and create a docker-compose file.
|
||||
|
||||
```bash
|
||||
nano docker-compose.yml
|
||||
```
|
||||
|
||||
Fill in the docker-compose configuration, and remember to modify it according to your actual situation.
|
||||
|
||||
After that, we need to configure the reverse proxy. Remember to configure WebSocket support. I'll skip it here.
|
||||
|
||||
The idea is like this. You can refer to the configuration below:
|
||||
|
||||
{{< image src="stackDrawing.webp" caption="Stack" width="600px" >}}
|
||||
Reference in New Issue
Block a user