[5 Mins Docker] Create Own Drawing Websites (Mindmap, Draw.io, Excalidraw) in Free Web Service Providers (Koyeb, Fly.io, Render) - NETSEC

Latest

NETSEC

Learning, Sharing, Creating

Cybersecurity Memo

Saturday, June 15, 2024

[5 Mins Docker] Create Own Drawing Websites (Mindmap, Draw.io, Excalidraw) in Free Web Service Providers (Koyeb, Fly.io, Render)

This post is to collect some popular Online Graph drawing websites for all kinds purposes, such as workflow, digital whiteboard, network diagram, mind map, etc.



Introduction

Simple-mind-map


Simple-mind-map is a simple and powerful web mind map library, not dependent on any specific framework. Can help you quickly develop mind mapping products.

Github: https://github.com/wanglin2/mind-map
Doc: https://wanglin2.github.io/mind-map/#/doc/en/deploy

Screenshot:


Features
  • json、png、svg、pdf、markdown、xmind、txt, support import from json、xmind、markdown



Draw.io




Excalidraw




Play with Docker - labs.play-with-docker.com

https://labs.play-with-docker.com/

Copy: Ctrl+Insert 
Paste: Ctrl+shif+v

Command: 

docker run -d -p 8081:8080 shuiche/mind-map:latest


Output


[node1] (local) [email protected] ~
$ docker run -d -p 8081:8080 shuiche/mind-map:latest
Unable to find image 'shuiche/mind-map:latest' locally
latest: Pulling from shuiche/mind-map
d25f557d7f31: Pull complete 
3c61ae309c19: Pull complete 
5ec9143f6e67: Pull complete 
fa2a49c6cde3: Pull complete 
b0f4ae04fda8: Pull complete 
Digest: sha256:02b3ff8cc47c07401e6e74d0a52b24f448b6aed447329a82770c32e6eb5f6669
Status: Downloaded newer image for shuiche/mind-map:latest
747525d65e7265621f756c6a98806c0d8d114a5ac81348d26cc9d5111a0dd3ac
[node1] (local) [email protected] ~
$


Deploy to Koyeb Free Plan

 

Koyeb is a developer-friendly serverless platform to deploy apps globally. No-ops, servers, and infrastructure management. 

Free Tier Plan:
  • One free web Service in the Frankfurt or Washington, D.C. regions with 512MB of RAM, 0.1 vCPU, and 2GB of SSD.
  • One free PostgreSQL database limited to 50 active hours, 1GB of storage, 1GB of reads, and 1GB of writes.
You can join the Hobby plan without adding a credit card. The Hobby plan can deploy a single web Service and database for free with the specifications mentioned above. You can add payment information (and continue to enjoy the free Service and database) to access the full platform experience.
  • 1x free Web service
  • 1x free Postgres database (50h)
  • Run web apps, APIs, and workers
  • Git push to deploy
  • SSL and 10 free custom domains
  • 3 users included

If you have Github account, you can log in with your Github account for free. But you do need provide a valid credit card to enable your free account to use.  Check free tier usage at : 
  • https://app.koyeb.com/auth/signin?next=%2Fsettings%2Fbilling

After you created and enabled your free account, you should be able to log in and start your Koyeb journey. 


1 Deploy a new project on Koyeb

Choose Docker as your deployment method.


2 Enter Docker Image path

shuiche/mind-map:latest


3 Configure Service and Deploy

Based on region's latency to choose either Washington, D.C or Frankfurt. 

Choose your instance, Since we would like to use free tier, we will choose Eco type free instance (0.1 vCPU, 512MB RAM, 2000MB Disk) :

Choose proper port. 

Since this docker is using port 8080, we are going to change default port from 8000 to 8080. 


Final configuration before the deployment. change from a random name to a meaningful name such as mindmap:



4 Deploy and test




Installation Pre-requirements for Own VPS

Free resources you might need to complete this docker project:


Pre-installed services:

  • Docker, 
    • apt update
    • apt install docker.io
    • apt install docker-compose
    • apt upgrade docker.io
    • mkdir /root/data/docker_data/<docker_name>
  • Docker-Compose (Using Ubuntu OS for the commands)
    • Docker-compose down
    • Optional command : use following command to backup your Docker data. You might need to change your folder name based on your docker configuraiton
      • cp -r /root/data/docker_data/<docker_name> /root/data/docker_data_backup/<docker_name>
    • docker-compose pull
    • docker-compose up -d
    • docker image prune
  • Portainer (Optional)
    • docker volume create portainer_data
    • docker run -d -p 9000:9000 --name portainer --restart always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce:latest
  • Install some applications: apt install wget curl sudo vim git (Optional)
  • aapanel with Nginx (Optional)
  • Nginx Proxy Manager (Optional)
  • Install screen (Optional)
    • Install screen (Depends on the Linux Distribution if it came pre installed or not) : yum install screen
    • Initiate a Screen : screen or  screen -S <screen name> <command to execute>
    • Detach from the screen : "CTRL+A,D" not "CTRL+A+D"
    • List all the screen currently working : screen -ls
    • Reattach to a screen : screen  -r  <session number> or screen -r <screen name>
    • Kill specific screen: screen -X -S <screen name> quit
    • Kill all screens : pkill screen
  • Monitoring Usage
    • Docker stats

Remove Docker and Related folders
  • docker stop <Docker Name> # stop the docker but not remove anything. 
  • docker rm -f <Docker Name>  # remove speficic container, but will not delete mapped volumes
  • rm -rf /root/data/docker_data/<Docker Mapped Volumns>  # remove all mapped volumes

Deploy to your own Docker VPS

 
Command: 

docker run -d -p 8080:8080 shuiche/mind-map:latest


Draw.io

docker environment installation commands:

curl -fsSL https://get.docker.com | sh && ln -s /usr/libexec/docker/cli-plugins/docker-compose /usr/local/bin


docker run commands:

docker run -d --restart=always --name drawio -p 7080:8080 -v /home/docker/drawio:/var/lib/drawio jgraph/drawio


Github 

https://github.com/jgraph/drawio

Demo

https://app.diagrams.net















Excalidraw 

Demo

https://excalidraw.com/

Github:

https://github.com/excalidraw/excalidraw

Docker:

https://hub.docker.com/r/excalidraw/excalidraw
docker run --rm -dit --name excalidraw -p 5000:80 excalidraw/excalidraw:latest

docker run -d --restart=always --name excalidraw -p 5000:80 excalidraw/excalidraw:latest






[node1] (local) [email protected] ~
$ docker run -d --restart=always --name excalidraw -p 5000:80 excalidraw/excalidraw:latest
Unable to find image 'excalidraw/excalidraw:latest' locally
latest: Pulling from excalidraw/excalidraw
3c854c8cbf46: Pull complete 
de5d475193dd: Pull complete 
b407bcc80638: Pull complete 
da33b1ad0ac4: Pull complete 
a0fbd691d7c1: Pull complete 
16eaaaf5f1c0: Pull complete 
5e845cc16269: Pull complete 
1a09de43503c: Pull complete 
Digest: sha256:dd998e7dc83ca0a14327a71cdbb9dd86c1ed2ceef715cae349e084e0ae6aebb4
Status: Downloaded newer image for excalidraw/excalidraw:latest
979850bae2e8f2d0277ff502da736c392c15800817f94d4896b809c7c69fd323
[node1] (local) [email protected] ~
$ 



Excalidraw Animate

  • https://dai-shi.github.io/excalidraw-animate/
  • https://github.com/dai-shi/excalidraw-animate


https://www.screentogif.com/  - to record screen animation to GIF file. 



tldraw - 

Demo

 https://www.tldraw.com/

Doc:




Fly.io Deployment


https://fly.io/docs/about/pricing/#free-allowances
New sign up for fly.io will have to pay $5 to stay a Hobby plan after you used up $5 free trial credit. But Legacy Hobby Plan still has no monthly subscription fee. 

Free allowances. Resources included for free on all plans:
  • Up to 3 shared-cpu-1x 256mb VMs
  • 3GB persistent volume storage (total)
  • 160GB outbound data transfer

1 Sign into your Fly.io account by typing flyctl auth login

PS C:\Users\WDAGUtilityAccount> flyctl auth login
Opening https://fly.io/app/auth/cli/8e426809a69c7d38e2ca77e0f62ae57 ...

Waiting for session... Done
successfully logged in as [email protected]


2 Install flyctl if you are using Windows machine. 

For other OS, check installation guide. The fastest way to get up and running is by installing the flyctl CLI.
# Install flyctl on Windows
PS C:> powershell -Command "iwr https://fly.io/install.ps1 -useb | iex"


3 Close CMD or Powershell  terminal and open a new one to continue next command:


  • fly launch

For more details, check out the Install flyctl documentation. Run the following commands from your project root directory to launch an app:

PS C:> flyctl launch
PS C:> flyctl storage create

Here are some CLI commands :

PS C:\Users\john> fly launch
Scanning source code
Could not find a Dockerfile, nor detect a runtime or framework from source code. Continuing with a blank app.
Creating app in C:\Users\john
We're about to launch your app on Fly.io. Here's what you're getting:

Organization: Johnny Netsec          (fly launch defaults to the personal org)
Name:         <unspecified>          (must be specified in UI)
Region:       Toronto, Canada        (this is the fastest region for you)
App Machines: shared-cpu-1x, 1GB RAM (most apps need about 1GB of RAM)
Postgres:     <none>                 (not requested)
Redis:        <none>                 (not requested)
Tigris:       <none>                 (not requested)


The following problems must be fixed in the Launch UI:
 * app name john is already taken
   each Fly.io app must have a unique name

? Would you like to continue in the web UI? Yes
Opening https://fly.io/cli/launch/3371737965796c646f716c3671376d673365326568356e61686a6a6d71677177 ...

Waiting for launch data... Done
Created app 'jonapp1' in organization 'personal'
Admin URL: https://fly.io/apps/jonapp1
Hostname: jonapp1.fly.dev
Wrote config file fly.toml
PS C:\Users\john>



4 Notepad fly.toml

Use notepad to edit fly.toml file, which was generated by "flyctl launch" command. 


  • PS C:\Users\john> notepad fly.toml


By default, you will get following default configuration in fly.toml file for your jonapp1 application:

# fly.toml app configuration file generated for jonapp1 on 2024-06-16T18:25:48-04:00
#
# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
#
app = 'jonapp1'
primary_region = 'yyz'
[http_service]
  internal_port = 8080
  force_https = true
  auto_stop_machines = true
  auto_start_machines = true
  min_machines_running = 0
  processes = ['app']
[[vm]]
  memory = '1gb'
  cpu_kind = 'shared'
  cpus = 1



Modify it to :

PS C:\Users\john> type fly.toml
# fly.toml app configuration file generated for jonapp1 on 2024-06-16T18:25:48-04:00
#
# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
#
app = 'jonapp1'
primary_region = 'yyz'
[build]
  image = "excalidraw/excalidraw:latest"
[[services]]
  http_checks = []
  internal_port = 80
  processes = ["app"]
  protocol = "tcp"
  script_checks = []
  [services.concurrency]
    hard_limit = 25
    soft_limit = 20
    type = "connections"
  [[services.ports]]
    force_https = true
    handlers = ["http"]
    port = 80
  [[services.ports]]
    handlers = ["tls", "http"]
    port = 443
  [[services.tcp_checks]]
    grace_period = "1s"
    interval = "15s"
    restart_limit = 0
    timeout = "2s"
PS C:\Users\john> 


5 (optional)Create a new 1GB volume disk for persistent data.

  • fly volumes create app1_data --size 1

6 fly deploy

PS C:\Users\john> fly deploy
==> Verifying app config
Validating C:\Users\john\fly.toml
✓ Configuration is valid
--> Verified app config
==> Building image
Searching for image 'excalidraw/excalidraw:latest' remotely...
image found: img_98dgp8o8lnm6vxw0
Watch your deployment at https://fly.io/apps/jonapp1/monitoring
Provisioning ips for jonapp1
  Dedicated ipv6: 2a09:8280:1::39:7c9d:0
  Shared ipv4: 66.241.125.148
  Add a dedicated ipv4 with: fly ips allocate-v4
This deployment will:
 * create 2 "app" machines
No machines in group app, launching a new machine
Creating a second machine to increase service availability
Finished launching new machines
-------
 ✔ Machine 7811eedf951dd8 [app] update finished: success
-------
Checking DNS configuration for jonapp1.fly.dev
Visit your newly deployed app at https://jonapp1.fly.dev/
PS C:\Users\john>


“fly deploy creates two Machines per process, for resilience purposes.”




You can use --ha=false flag with fly launch or fly deploy. That will disable the default of shipping two machines on first deploy.

fly machine kill and destroy command to kill and destroy one machine:

PS C:\Users\john> fly machine kill
? Select a machine: 48ed676b7e9058 little-bird-1010 (started, region yyz, process group 'app')
machine 48ed676b7e9058 was found and is currently in a started state, attempting to kill...
kill signal has been sent
PS C:\Users\john>fly machine destroy
? Select a machine: 48ed676b7e9058 little-bird-1010 (stopped, region yyz, process group 'app')
machine 48ed676b7e9058 was found and is currently in stopped state, attempting to destroy...
48ed676b7e9058 has been destroyed

Use own domain for fly.io apps:

https://fly.io/docs/networking/custom-domains-with-fly/#teaching-your-app-about-custom-domains

To get that, use the fly ips list command. You'll need to configure the A record with your DNS provider. 
You need to add in an “A Record” for your domain that points to the IP address. Once this is done and propagated through the DNS system, you should be able to connect over unencrypted HTTP to using the domain name.

PS C:\Users\john> fly ips list
VERSION IP              TYPE            REGION  CREATED AT
v4      66.241.125.148  public (shared)         Jan 1 0001 00:00

Learn more about Fly.io public, private, shared and dedicated IP addresses in our docs: https://fly.io/docs/reference/services/#ip-addresses
PS C:\Users\john>

Demo: https://linx.51sec.org/ or https://mindmap.51sec.org



Render Deployment

https://render.com/pricing#compute


1  Log in to Render.com


2 Create a new Web Service


excalidraw/excalidraw:latest



3 Choose Free instance for hobby projects




Free instances spin down after periods of inactivity. They do not support SSH access, scaling, one-off jobs, or persistent disks. Select any paid instance type to enable these features.

Advanced Settings for your hobby project:




4 Add your payment information with a valid credit card



5 You will get an aut0-generated url for your hobby project






6 Check the URL to see your app


7 Custome domain configuration




azure-cloud.excalidraw

Animation:



Sample file "azure-cloud.excalidraw" : https://od.51sec.org/TGM_51Sec_EU/Sharing/diagram/



Fly.io commands


fly orgs list
fly apps list
fly volumes list -a memos


PS C:\Users\john> fly orgs show 51sec
Organization
Name      : 51sec
Slug      : 51sec
Type      : SHARED
Summary
You have admin permissions on this organizaton
There are 1 members associated with this organization
Organization Members
+------+----------------------+-------+
| NAME |        EMAIL         | ROLE  |
+------+----------------------+-------+
|      | [email protected] | ADMIN |
+------+----------------------+-------+
PS C:\Users\john>fly volumes destroy vol_53q80vdpk66vgzy6
Warning! Every volume is pinned to a specific physical host. You should create two or more volumes per application. Deleting this volume will leave you with 1 volume(s) for this application,? Are you sure you want to destroy this volume? Yes
Destroyed volume ID: vol_53q80vdpk66vgzy6 name: freshrss51sec_data
PS C:\Users\john>PS C:\Users\john> fly config save -a mindmap51sec
Wrote config file fly.toml
PS C:\Users\john> fly volumes list
ID                      STATE   NAME                    SIZE    REGION  ZONE    ENCRYPTED       ATTACHED VM     CREATED AT
vol_53q80vdpk66vgzy6    created freshrss51sec_data      1GB     yyz     5e29    true                            1 year ago
vol_1q85vg3lem8rzdxe    created freshrss51sec_data      1GB     yyz     aeee    true            e28606eb740486  10 months ago
PS C:\Users\john> 





Self Hosted Docker Installation Pre-requirements

Free resources you might need to complete this docker project:


Pre-installed services:

  • Docker, 
    • apt update
    • apt install docker.io
    • apt install docker-compose
    • apt upgrade docker.io
    • mkdir /root/data/docker_data/<docker_name>
  • Docker-Compose (Using Ubuntu OS for the commands)
    • Docker-compose down
    • Optional command : use following command to backup your Docker data. You might need to change your folder name based on your docker configuraiton
      • cp -r /root/data/docker_data/<docker_name> /root/data/docker_data_backup/<docker_name>
    • docker-compose pull
    • docker-compose up -d
    • docker image prune
  • Portainer (Optional)
    • docker volume create portainer_data
    • docker run -d -p 9000:9000 --name portainer --restart always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce:latest
  • Install some applications: apt install wget curl sudo vim git (Optional)
  • aapanel with Nginx (Optional)
  • Nginx Proxy Manager (Optional)
  • Install screen (Optional)
    • Install screen (Depends on the Linux Distribution if it came pre installed or not) : yum install screen
    • Initiate a Screen : screen or  screen -S <screen name> <command to execute>
    • Detach from the screen : "CTRL+A,D" not "CTRL+A+D"
    • List all the screen currently working : screen -ls
    • Reattach to a screen : screen  -r  <session number> or screen -r <screen name>
    • Kill specific screen: screen -X -S <screen name> quit
    • Kill all screens : pkill screen

Monitoring Usage

    • Docker stats
  • Remove Docker and Related folders
  • docker stop <Docker Name> # stop the docker but not remove anything. 
  • docker rm -f <Docker Name>  # remove speficic container, but will not delete mapped volumes
  • rm -rf /root/data/docker_data/<Docker Mapped Volumns>  # remove all mapped volumes

Restrick Log File Size:

  • journalctl --vacuum-size=100M
  • Limit it to 25M:
nano /etc/systemd/journald.conf
SystemMaxUse=25M
systemctl restart systemd-journald.service

Enable IPv6 and Limit Log File Size (Ubuntu)


Add customized self defined IPv6 address segment to enable container's IPv6 fucntion. And limit log file's size and numbers in case log file to fill all hard drive's space. 

cat > /etc/docker/daemon.json << EOF
{
    "log-driver": "json-file",
    "log-opts": {
        "max-size": "20m",
        "max-file": "3"
    },
    "ipv6": true,
    "fixed-cidr-v6": "fd00:dead:beef:c0::/80",
    "eixperimental":true,
    "ip6tables":true
}
EOF

Restart Docker service:

systemctl restart docker


Videos

 
[5 Mins Docker] Create Your Own Simple But Powerful MindMap Drawing Website
https://youtu.be/h4p8Jg45Oao







References

  • https://www.koyeb.com/docs/faqs/pricing
  • https://kejilion.blogspot.com/2024/02/blog-post_8.html


Read more

Subscribe via email

Author Image

About Netsec
Netsec - Learning, Sharing, Creating!

-
Tags:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)