Skip to content

Instantly share code, notes, and snippets.

@gitname
Last active August 5, 2023 20:46
Show Gist options
  • Save gitname/601d52bc1d39028c83586ad5b24589ba to your computer and use it in GitHub Desktop.
Save gitname/601d52bc1d39028c83586ad5b24589ba to your computer and use it in GitHub Desktop.
Deploying Scribble.rs to Digital Ocean

Here are my notes about deploying Scribble.rs to Digital Ocean.

Scribble.rs is an open-source, ad-free alternative to skribbl.io.

Overview of procedure

  1. Create Droplet
  2. Create Docker network
  3. Configure firewall
  4. Install and run Nginx Proxy Manager
  5. Run Scribble.rs
  6. Add Proxy Host in Nginx Proxy Manager
  7. Create DNS record
  8. Play!

Procedure

1. Create Droplet

  1. Log into your Digital Ocean account.
  2. Create a new Droplet.
    • Choose an image: Marketplace > Docker 23.0.6 on Ubuntu 22.04
    • Choose size: Shared CPU > Basic
    • CPU options: Regular > $6/mo (1 GB RAM, 1 CPU, 25 GB SSD Disk, 1000 GB transfer)
    • Choose authentication method: Password (you can choose SSH Key instead, but I'll be using Password in these notes)
  3. SSH to the Droplet

2. Create Docker network

  1. Issue the following command on the droplet:
    docker network create nginxproxyman

3. Configure firewall

  1. Issue the following commands on the Droplet:
    ufw allow 80
    ufw allow 443
    ufw allow 81

4. Install and run Nginx Proxy Manager

  1. Issue the following commands on the Droplet:

    mkdir /opt/nginxproxymanager
    cd /opt/nginxproxymanager
    
    mkdir ./databases
    touch ./databases/nginxproxy.db
    
    touch ./docker-compose.yml
  2. Populate the docker-compose.yml with the YAML content shown below (which I copy/pasted from this Vultr.com article).

    nano ./docker-compose.yml

    YAML content:

    version: "3"
    services:
       app:
         image: 'jc21/nginx-proxy-manager:latest'
         container_name: 'nginxproxymanager'
         restart: unless-stopped
         ports:
           - '80:80' 
           - '443:443' 
           - '81:81' 
         environment:
           DB_SQLITE_FILE: "/data/database.sqlite"
    
         volumes:
           - ./data:/data
           - ./letsencrypt:/etc/letsencrypt
    
     networks:
       default:
         external:
           name: nginxproxyman
  3. Issue the following commands on the Droplet:

    docker compose up -d
    docker ps
  4. In a web browser, visit the IP address of the droplet (on port 81; e.g. http://123.123.123.123:81). The Nginx Proxy Manager login page will appear.

  5. Login using the username admin@example.com and password changeme.

  6. When prompted, choose a new email address and password.

  7. Leave the web page open for a later step (shown below).

5. Run Scribble.rs

  1. Issue the following command on the Droplet:
    docker run --network nginxproxyman --name scribblers -d biosmarcel/scribble.rs

    The --network nginxproxyman tells Docker you want it to connect this new container to the Docker network you created earlier.

6. Add Proxy Host in Nginx Proxy Manager

  1. In Nginx Proxy Manager, create a new Proxy Host.
    • Domain names: (Enter a domain whose DNS records you can edit; e.g. example.com)
    • Scheme: http
    • Forward hostname: scribblers
    • Forward port: 8080
    • Enable "Cache assets", "Block exploits", and "Websocket support"
    • SSL:
      • Request a new SSL certificate
      • Force SSL
      • Enable "HTTP/2", "HSTS", and "HSTS subdomains"

7. Create DNS record

  1. Create the following A record on the DNS server associated with the domain name you entered above:
    • Record type: A
    • Host: (Enter some host at that domain; e.g. draw)
    • Answer: (Enter the IP address of the Droplet)
    • TTL: 660 (or any other amount you want)

8. Play!

Now that everything is set up, you can play Scribble.rs by visiting the host you specified above; e.g. https://draw.example.com.

References

Notes

  • My Digital Ocean referral link is: https://m.do.co/c/39488d73c82a
    • You get $200 of Digital Ocean credit to use within 60 days
    • When you reach $25 in billings, Digital Ocean gives me $25
    • You can visit Digital Ocean without using the referral link, here: https://www.digitalocean.com/
  • Compatibility issues
    • When set up this way, Scribble.rs seems to me to work in Safari on iOS, Brave on iOS, Firefox on Windows 10; but not Firefox Focus on iOS. Those are all the web browsers I have tested so far. I don't know whether the issues stem from this procedure or from Scribble.rs, itself.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment