Local LAN collaboration does require HTTPS setup

[alpha358]

Hello, is the current setup suitable for local collaboration in the LAN network?

When running your setup I get an error due to unavailable window.crypto.subtle.generateKey
It looks like the collab feature should only be accessible via https...

[alswl]

@alpha358 Yes, the collaboration feature require crypto module, and the crypto module required localhost or HTTPS.

[alpha358]

Would it be difficult to modify your setup to HTTPS?
Could I simply do this at docker-compose.yaml level or should it be done deeper?

[alswl]

It will be a little difficult, change the values in excalidraw.env.production and re package the project.

Notice the 127.0.0.1 in the configuration files and replace with your HTTPS endpoint. Please make sure the endpoint is accessable.

[AlienHub]

It will be a little difficult, change the values in excalidraw.env.production and re package the project.

这将有点困难，更改 excalidraw.env.production 中的值并重新打包该项目。

Notice the 127.0.0.1 in the configuration files and replace with your HTTPS endpoint. Please make sure the endpoint is accessable.

注意配置文件中的127.0.0.1，并用您的 HTTPS 端点替换。请确保端点是可访问的。

127.0.0.1 是需要修改为部署服务的主机IP吗？

[AlienHub]

Hello, is the current setup suitable for local collaboration in the LAN network?

When running your setup I get an error due to unavailable window.crypto.subtle.generateKey It looks like the collab feature should only be accessible via https...

You can configure an nginx container to proxy applications.You can refer to this issue: Issues@22

1. Update your excalidraw. Env. Production documents are as follows: (for reference)

REACT_APP_BACKEND_V2_GET_URL=https://192.168.20.122/api/v2/
REACT_APP_BACKEND_V2_POST_URL=https://192.168.20.122/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_HTTP_STORAGE_BACKEND_URL=https://192.168.20.122/api/v2
REACT_APP_STORAGE_BACKEND=http

REACT_APP_PORTAL_URL=
# 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=https://192.168.20.122

REACT_APP_FIREBASE_CONFIG='{}'

# production-only vars
REACT_APP_GOOGLE_ANALYTICS_ID=foo

REACT_APP_PLUS_APP=https://app.excalidraw.com

Note that REACT and REACT remove the port information and use the HTTPS protocol. The host address needs to be filled in with the address you actually need to access the service.

2. Re-use the 'make patch images' command to build
3. Update 'docker-compose. Yaml 'configuration file, add nginx service

# sample comes from https://github.com/docker/awesome-compose

services:
  frontend:
    image: excalidraw:v0.1.0--dirty
    ports:
      - 8080:80

  storage:
    image: excalidraw-storage-backend:v0.1.0--dirty
    restart: always
    environment: # docs https://github.com/alswl/excalidraw-storage-backend#environement-variables
      - PORT=8081
    ports:
      - 8081:8081

  room:
    image: excalidraw-room:v0.1.0--dirty
    ports:
      - 8082:80

  nginx:
    image: nginx:latest
    ports:
      - 443:443
      - 80:80
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - ./ssl:/etc/nginx/ssl
    depends_on:
      - frontend
      - storage
      - room

For the configuration of Nginx, you can refer to the following:

    server {
        listen 80;
        server_name 192.168.20.122;

        location / {
            return 301 https://$host$request_uri;
        }
    }

    server {
        listen 443 ssl;
        server_name 192.168.20.122;

        ssl_certificate /etc/nginx/ssl/122.crt;
        ssl_certificate_key /etc/nginx/ssl/122.key;

        location / {
            proxy_pass http://frontend;
        }

        location /api/v2 {
            proxy_pass http://storage;
        }

        location /socket.io/ {
            proxy_pass http://room;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_set_header Host $host;
        }
    }

Note that you need to mount the certificate into the nginx container.

[Hanxiaoyi2016]

Hello, is the current setup suitable for local collaboration in the LAN network?
When running your setup I get an error due to unavailable window.crypto.subtle.generateKey It looks like the collab feature should only be accessible via https...

You can configure an nginx container to proxy applications.You can refer to this issue: Issues@22

1. Update your excalidraw. Env. Production documents are as follows: (for reference)

REACT_APP_BACKEND_V2_GET_URL=https://192.168.20.122/api/v2/
REACT_APP_BACKEND_V2_POST_URL=https://192.168.20.122/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_HTTP_STORAGE_BACKEND_URL=https://192.168.20.122/api/v2
REACT_APP_STORAGE_BACKEND=http

REACT_APP_PORTAL_URL=
# 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=https://192.168.20.122

REACT_APP_FIREBASE_CONFIG='{}'

# production-only vars
REACT_APP_GOOGLE_ANALYTICS_ID=foo

REACT_APP_PLUS_APP=https://app.excalidraw.com

Note that REACT and REACT remove the port information and use the HTTPS protocol. The host address needs to be filled in with the address you actually need to access the service.

2. Re-use the 'make patch images' command to build
3. Update 'docker-compose. Yaml 'configuration file, add nginx service

# sample comes from https://github.com/docker/awesome-compose

services:
  frontend:
    image: excalidraw:v0.1.0--dirty
    ports:
      - 8080:80

  storage:
    image: excalidraw-storage-backend:v0.1.0--dirty
    restart: always
    environment: # docs https://github.com/alswl/excalidraw-storage-backend#environement-variables
      - PORT=8081
    ports:
      - 8081:8081

  room:
    image: excalidraw-room:v0.1.0--dirty
    ports:
      - 8082:80

  nginx:
    image: nginx:latest
    ports:
      - 443:443
      - 80:80
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - ./ssl:/etc/nginx/ssl
    depends_on:
      - frontend
      - storage
      - room

For the configuration of Nginx, you can refer to the following:

    server {
        listen 80;
        server_name 192.168.20.122;

        location / {
            return 301 https://$host$request_uri;
        }
    }

    server {
        listen 443 ssl;
        server_name 192.168.20.122;

        ssl_certificate /etc/nginx/ssl/122.crt;
        ssl_certificate_key /etc/nginx/ssl/122.key;

        location / {
            proxy_pass http://frontend;
        }

        location /api/v2 {
            proxy_pass http://storage;
        }

        location /socket.io/ {
            proxy_pass http://room;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_set_header Host $host;
        }
    }

Note that you need to mount the certificate into the nginx container.

您好，可以问一下这里面的image版本为什么都是dirty吗，我使用docker-compose up的时候找不到这些文件，感谢您的回复

[alswl]

@Hanxiaoyi2016 之前的版本没有解决动态启动参数问题，因此需要用户手动构建，构建出来的 image 就带着 -dirty 字样。现在新版本已经解决了动态启动参数问题，参考 master 分支的配置方案即可。

---

The previous version must build image by user self, so the build image name contains -dirty. The new version using dynamic launch parameter, so the official image can run anywhere. You should consider using the master branch solution.

[Hanxiaoyi2016]

@Hanxiaoyi2016 之前的版本没有解决动态启动参数问题，因此需要用户手动构建，构建出来的 image 就带着 -dirty 字样。现在新版本已经解决了动态启动参数问题，参考 master 分支的配置方案即可。

The previous version must build image by user self, so the build image name contains -dirty. The new version using dynamic launch parameter, so the official image can run anywhere. You should consider using the master branch solution.

感谢您的回复，可以问一下make patch images这个命令是什么作用哇，每次都是在这里出错，我最近想完成excalidraw在https环境下的部署，不知道您有没有更好的解决方案，谢谢您 @alswl @AlienHub

[Hanxiaoyi2016]

@Hanxiaoyi2016 之前的版本没有解决动态启动参数问题，因此需要用户手动构建，构建出来的 image 就带着 -dirty 字样。现在新版本已经解决了动态启动参数问题，参考 master 分支的配置方案即可。

The previous version must build image by user self, so the build image name contains -dirty. The new version using dynamic launch parameter, so the official image can run anywhere. You should consider using the master branch solution.

同时，想请教下您，我用您给的excalidraw目录下的 Dockerfile 直接构建和您上传到 DockerHub上的镜像是不一样的，可以问下您具体上传镜像时的Dockerfile吗，以方便我后续的改进，谢谢您

[alswl]

@Hanxiaoyi2016

make patch images这个命令是什么作用

最新版本已经不需要用这个命令了。这几个命令在老版本是为了解决参数注入镜像问题。

[Hanxiaoyi2016]

@Hanxiaoyi2016

make patch images这个命令是什么作用

最新版本已经不需要用这个命令了。这几个命令在老版本是为了解决参数注入镜像问题。

您好，我已经实现了基本的https环境下的私有化部署，但是在使用中发现图片没法分享给别人，插入的图片没法正常显示，想问下您遇到过类似的问题吗

[Hanxiaoyi2016]

@Hanxiaoyi2016

make patch images这个命令是什么作用

最新版本已经不需要用这个命令了。这几个命令在老版本是为了解决参数注入镜像问题。

您好，我已经实现了基本的https环境下的私有化部署，但是在使用中发现图片没法分享给别人，插入的图片没法正常显示，想问下您遇到过类似的问题吗

@Hanxiaoyi2016

make patch images这个命令是什么作用

最新版本已经不需要用这个命令了。这几个命令在老版本是为了解决参数注入镜像问题。

您好，我已经实现了基本的https环境下的私有化部署，但是在使用中发现图片没法分享给别人，插入的图片没法正常显示，想问下您遇到过类似的问题吗

具体看了一下发现是
https://192.168.57.74/api/v2/rooms/74c264605f06a44762d6
和
https://192.168.57.74/api/v2/files/8946d47a6c55c133762bd998639a8aff958272db
这两个方法 502 了
我的docker-compose配置如下：

# sample comes from https://github.com/docker/awesome-compose
version: '2'
services:
  frontend:
    image: alswl/excalidraw:v0.17.0-fork-b2
    environment:
      - VITE_APP_BACKEND_V2_GET_URL=https://192.168.57.74/api/v2/
      - VITE_APP_BACKEND_V2_POST_URL=https://192.168.57.74/api/v2/post/
      - VITE_APP_WS_SERVER_URL=https://192.168.57.74
      - VITE_APP_FIREBASE_CONFIG={}
      # alswl'fork env
      # forked excalidraw can use env https://github.com/alswl/excalidraw/pull/5
      - VITE_APP_HTTP_STORAGE_BACKEND_URL=https://192.168.57.74/api/v2
      - VITE_APP_STORAGE_BACKEND=http
    ports:
      - 8080:80

  storage:
    image: alswl/excalidraw-storage-backend:v2023.11.11
    restart: always
    environment:
      - PORT=8081
    ports:
      - 8081:8081

  room:
    image: excalidraw/excalidraw-room:sha-49bf529
    ports:
      - 8082:80

  nginx:
    image: nginx:latest
    ports:
      - 443:443
      - 80:80
    volumes:
      - /Users/hanxiaoyi/test/excalidraw-collaboration/ssl:/etc/nginx/ssl
    depends_on:
      - frontend
      - storage
      - room

nginx.conf配置如下：

events {
    worker_connections  1024;  ## Default: 1024
}
    
http{

    server {
        listen 80;
        server_name 192.168.57.74;

        location / {
            return 301 https://$host$request_uri;
        }
    }

    server {
        listen 443 ssl;
        server_name 192.168.57.74;

        ssl_certificate /etc/nginx/ssl/cert.crt;
        ssl_certificate_key /etc/nginx/ssl/rsa_private.key;

        location / {
            proxy_pass http://frontend;
        }

        location /api/v2 {
            proxy_pass http://storage;
        }

        location /socket.io/ {
            proxy_pass http://room;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_set_header Host $host;
        }
    }
}

谢谢您