Docker-Excalidraw+(在线白板)

[Excalidraw+](https://excalidraw.com/) 在线白板，协作变得容易

**相关链接：**
在线使用：https://excalidraw.com/
Excalidraw+：https://plus.excalidraw.com/
GitHub：https://github.com/excalidraw/excalidraw
Docker：https://hub.docker.com/r/excalidraw/excalidraw
GitHub(room)：https://github.com/excalidraw/excalidraw-room
Docker(room)：https://hub.docker.com/r/excalidraw/excalidraw-room

`协同未解决`，直接使用 yarn 形式本机部署，通过 127.0.0.1和localhost 访问协同直接可以，Docker配置后也可以用本机访问，但是一旦使用实际本机IP就无法开启协同
Docker版通过配置可以强行开启协同，但是延迟特高，并且不能显示其他方鼠标

## docker-compose 版
```bash
git clone https://ghproxy.com/https://github.com/excalidraw/excalidraw.git		# 拉取最新
cd excalidraw		# 进入所在文件夹
vim docker-compose.yml		# 编辑配置文件
docker-compose up -d		# 部署并启动

# 自动编译的，也可手动编译
docker build -t excalidraw/excalidraw .		# 编译
docker run --rm -dit --name excalidraw -p 5000:80 excalidraw/excalidraw:latest		# 运行测试
```
配置文件没什么需要注意的，主要就`开放端口`，根据需求设置一下即可
这个会自行编译的，耗时比较久

### 不完美协同
docker-compose.yml
```docker
version: "3.8"
services:
  excalidraw:
    # image: excalidraw/excalidraw:latest
    build:
      context: .
      args:
        - NODE_ENV=development
    container_name: excalidraw
    depends_on:
      - excalidraw-room
    ports:
      - "10001:80"
    restart: on-failure
    stdin_open: true
    healthcheck:
      disable: true
    environment:
      - NODE_ENV=development
      - REACT_APP_WS_SERVER_URL=http://nas.918178.xyz:3002
    volumes:
      - ./:/opt/node_app/app:delegated
      - ./package.json:/opt/node_app/package.json
      - ./yarn.lock:/opt/node_app/yarn.lock
      - notused:/opt/node_app/app/node_modules
  excalidraw-room:
    image: excalidraw/excalidraw-room
    environment:
      PORT: 3002
    ports:
      - "3002:3002"
volumes:
  notused:
```
Dockerfile
```docker
FROM node:14-alpine AS build
WORKDIR /opt/node_app
COPY package.json yarn.lock ./
RUN yarn --ignore-optional
ARG NODE_ENV=development
ARG REACT_APP_WS_SERVER_URL=http://nas.918178.xyz:3002
COPY . .
RUN yarn build:app:docker
FROM nginx:1.21-alpine
COPY --from=build /opt/node_app/build /usr/share/nginx/html
HEALTHCHECK CMD wget -q -O /dev/null http://nas.918178.xyz || exit 1
```
.env.development
```python
REACT_APP_BACKEND_V2_GET_URL=http://nas.918178.xyz:10001/api/v2/
REACT_APP_BACKEND_V2_POST_URL=http://nas.918178.xyz:10001/api/v2/post/

REACT_APP_LIBRARY_URL=http://nas.918178.xyz:10001
REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries

# collaboration WebSocket server (https://github.com/excalidraw/excalidraw-room)
# REACT_APP_WS_SERVER_URL=https://portal.excalidraw.com
REACT_APP_WS_SERVER_URL=http://nas.918178.xyz:3002

# set this only if using the collaboration workflow we use on excalidraw.com
REACT_APP_PORTAL_URL=https://portal.excalidraw.com

REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}'

# put these in your .env.local, or make sure you don't commit!
# must be lowercase `true` when turned on
#
# whether to enable Service Workers in development
REACT_APP_DEV_ENABLE_SW=
# whether to disable live reload / HMR. Usuaully what you want to do when
# debugging Service Workers.
REACT_APP_DEV_DISABLE_LIVE_RELOAD=

REACT_APP_PLUS_APP=https://app.excalidraw.com

FAST_REFRESH=false
```
.env.production
```python
REACT_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
REACT_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/

REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries

REACT_APP_PORTAL_URL=https://portal.excalidraw.com
#REACT_APP_PORTAL_URL=http://nas.918178.xyz:3002
# Fill to set socket server URL used for collaboration.
# Meant for forks only: excalidraw.com uses custom REACT_APP_PORTAL_URL flow
REACT_APP_WS_SERVER_URL=http://nas.918178.xyz:3002

REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'

# production-only vars
REACT_APP_GOOGLE_ANALYTICS_ID=UA-387204-13

#REACT_APP_PLUS_APP=https://app.excalidraw.com
REACT_APP_PLUS_APP=https://app.excalidraw.com
FAST_REFRESH=false
```

## 使用
可以在右侧 `素材库` 中添加公共库

[无法连接到协作服务器。请重新加载页面并重试](https://github.com/excalidraw/excalidraw/issues/4993)
[excalidraw-docker](https://gitlab.open-mind.space/pandel/excalidraw-docker)

**相关教程：**
[一个简单好用，风靡硅谷的白板工具——Excalidraw](https://blog.laoda.de/archives/docker-compose-install-excalidraw#5.4-%E5%88%9B%E5%BB%BA%E5%AE%89%E8%A3%85%E7%9B%AE%E5%BD%95)