[5 Mins Docker] A Simple Online Notepad - Minimalist Web Notepad

This post introduces a small open source project from Github pereorga/minimalist-web-notepad,

It creates a online web notepad for you to store your text and at the same time you can share or collaborate it with others over the Internet. 

Introduction

This product is similar as your notepad in your Windows, but it is online which you also can share or collaborate the work with others. 

Demo Site:

• https://notes.orga.cat
• https://notes.orga.cat/51sec
• https://notepad.51sec.org/51sec (Basic Authentication enaled: test/test)

It provides docker installation file to let you create your own image and spin up your own docker in your VPS. 

System Commands

In this lab, I am using Ubuntu 20.04 VM from Oracle Cloud Free Tier as an example. All following commands are based on this Ubuntu 20.04 version in Oracle Cloud platform. Please adjust it accordingly if you are using different system or platform. 

For more details about docker, Portainer, NPM configuration, please check following posts:

1. Deploy Docker, Docker-Compose, Portainer and NPM (Nginx Proxy Manager)
2. Run Free Arm-based Oracle Linux (Install Docker/Docker Compose/Portainer/Ubuntu Virtual Desktop)
3. Install Docker, Docker-Compose, Portainer & Nginx on CentOS 8 & Ubuntu 20.04
4. Deploy Aria2 Docker To Download Files to Cloud Drives (Google Drive, One Drive etc)

Commands list after run "sudo -i":

1 System update & upgrade:

apt update -y && apt upgrade -y

2 Increase SWAP size to at least 1024MB if your VPS ram is only 1GB

wget https://raw.githubusercontent.com/51sec/swap/main/swap.sh && bash swap.sh

3 Install Docker and Docker-Compose:

apt install docker.io -y 

apt install docker-compose -y 

4 Install 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

5 Install NPM (Nginx Proxy Manager) (Optional)

docker run -d -p 80:80 -p 81:81 -p 443:443 --name npm --restart unless-stopped -v ./letsencrypt:/etc/letsencrypt -v ./data:/data  jc21/nginx-proxy-manager:latest

6 Install htop program (Optional)

apt install htop -y

7 Enable BBR on Ubuntu 20.04 (Optional)

Open the following configuration file vi /etc/sysctl.conf to enable enable TCP BBR.

vi /etc/sysctl.conf

At the end of the config file, add the following lines.

net.core.default_qdisc=fq
net.ipv4.tcp_congestion_control=bbr

Save the file, and refresh your configuration by using this command,

sysctl -p

Output:

root@vps:~# sysctl -p
net.core.default_qdisc = fq
net.ipv4.tcp_congestion_control = bbr

Now, Verify if BBR is enabled in your system,

sysctl net.ipv4.tcp_congestion_control

Output:

root@vps:~# sysctl net.ipv4.tcp_congestion_control
net.ipv4.tcp_congestion_control = bbr

Done!

8 Enable IPv6 and Limit Log File Size (Optional)

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",
    "experimental":true,
    "ip6tables":true
}
EOF

Restart Docker service:

systemctl restart docker

Steps to Install Minimalist Docker

Here I am using Play with Docker website as an example to demonstrate all steps. 

Some hotkeys using in the Play with Docker 

• To copy: ctrl+insert
• To paste: ctrl+shift+v

1 Create minimalist data folder which will store all data generated by your apps

$ mkdir -p /root/data/docker_data/minimalist

2 Download program code

Change your folder to the one just created, then use wget command to download zipped docker file.

[node1] (local) [email protected] ~
$ cd /root/data/docker_data/minimalist
[node1] (local) [email protected] ~/data/docker_data/minimalist
$ wget https://github.com/pereorga/minimalist-web-notepad/archive/refs/heads/docker.zip
Connecting to github.com (140.82.113.4:443)
Connecting to codeload.github.com (140.82.113.9:443)
saving to 'docker.zip'
docker.zip           100% |******************************************************************************************************************************|  6472  0:00:00 ETA
'docker.zip' saved

3 Unzip the docker.zip file and build the docker image

[node1] (local) [email protected] ~/data/docker_data/minimalist
$ unzip docker.zip 
Archive:  docker.zip
   creating: minimalist-web-notepad-docker/
  inflating: minimalist-web-notepad-docker/.htaccess
  inflating: minimalist-web-notepad-docker/Dockerfile
  inflating: minimalist-web-notepad-docker/README.md
  inflating: minimalist-web-notepad-docker/docker-compose.yml
  inflating: minimalist-web-notepad-docker/favicon.ico
  inflating: minimalist-web-notepad-docker/index.php
  inflating: minimalist-web-notepad-docker/minimalist-web-notepad-entrypoint
  inflating: minimalist-web-notepad-docker/notes.htaccess
  inflating: minimalist-web-notepad-docker/script.js
  inflating: minimalist-web-notepad-docker/styles.css
[node1] (local) [email protected] ~/data/docker_data/minimalist
$ ls
docker.zip                     minimalist-web-notepad-docker
[node1] (local) [email protected] ~/data/docker_data/minimalist
$ cd minimalist-web-notepad-docker/
[node1] (local) [email protected] ~/data/docker_data/minimalist/minimalist-web-notepad-docker
$ ls
Dockerfile                         favicon.ico                        notes.htaccess
README.md                          index.php                          script.js
docker-compose.yml                 minimalist-web-notepad-entrypoint  styles.css
[node1] (local) [email protected] ~/data/docker_data/minimalist/minimalist-web-notepad-docker
$ dock
Sending build context to Docker daemon  17.41kB
Step 1/7 : FROM php:7.4-apache
7.4-apache: Pulling from library/php
a603fa5e3b41: Pull complete 
c428f1a49423: Pull complete 
156740b07ef8: Pull complete 
fb5a4c8af82f: Pull complete 
25f85b498fd5: Pull complete 
9b233e420ac7: Pull complete 
fe42347c4ecf: Pull complete 
d14eb2ed1e17: Pull complete 
66d98f73acb6: Pull complete 
d2c43c5efbc8: Pull complete 
ab590b48ea47: Pull complete 
80692ae2d067: Pull complete 
05e465aaa99a: Pull complete 
Digest: sha256:c9d7e608f73832673479770d66aacc8100011ec751d1905ff63fae3fe2e0ca6d
Status: Downloaded newer image for php:7.4-apache
 ---> 20a3732f422b
Step 2/7 : RUN cp /usr/local/etc/php/php.ini-production /usr/local/etc/php/php.ini
 ---> Running in f52a4d3f4623
Removing intermediate container f52a4d3f4623
 ---> 47e7beeb3761
Step 3/7 : RUN a2enmod rewrite
 ---> Running in 9cb11e091a78
Enabling module rewrite.
To activate the new configuration, you need to run:
  service apache2 restart
Removing intermediate container 9cb11e091a78
 ---> e5116e3b4f58
Step 4/7 : COPY .htaccess index.php styles.css script.js favicon.ico notes.htaccess ./
 ---> 4575c223c259
Step 5/7 : COPY minimalist-web-notepad-entrypoint /usr/local/bin/
 ---> 4cda9724fb8d
Step 6/7 : ENTRYPOINT ["minimalist-web-notepad-entrypoint"]
 ---> Running in 040d25c399ec
Removing intermediate container 040d25c399ec
 ---> b784521c2ed9
Step 7/7 : CMD ["apache2-foreground"]
 ---> Running in dd9dbc713cee
Removing intermediate container dd9dbc713cee
 ---> c694c85733f7
Successfully built c694c85733f7
Successfully tagged minimalist-web-notepad:latest

4 Start docker

You can either use following command:

• docker-compose up 
• docker-compose up &

4 If you are using docker run command , you can check created notepad(s) from that data folder creaed in step 1. 

[node1] (local) [email protected] ~/data/docker_data/minimalist/minimalist-web-notepad-docker
$ ls -l
total 36
-rw-r--r--    1 root     root           424 Dec  5 16:54 Dockerfile
-rw-r--r--    1 root     root          2708 Dec  5 16:54 README.md
-rw-r--r--    1 root     root           251 Dec  5 16:54 docker-compose.yml
-rw-r--r--    1 root     root           132 Dec  5 16:54 favicon.ico
-rw-r--r--    1 root     root          2244 Dec  5 16:54 index.php
-rwxr-xr-x    1 root     root           342 Dec  5 16:54 minimalist-web-notepad-entrypoint
-rw-r--r--    1 root     root           125 Dec  5 16:54 notes.htaccess
-rw-r--r--    1 root     root          1437 Dec  5 16:54 script.js
-rw-r--r--    1 root     root           866 Dec  5 16:54 styles.css
[node1] (local) [email protected] ~/data/docker_data/minimalist/minimalist-web-notepad-docker
$ cd ..
[node1] (local) [email protected] ~/data/docker_data/minimalist
$ ls
docker.zip                     minimalist-data                minimalist-web-notepad-docker
[node1] (local) [email protected] ~/data/docker_data/minimalist
$ cd mi
minimalist-data/               minimalist-web-notepad-docker/ 
[node1] (local) [email protected] ~/data/docker_data/minimalist
$ cd minimalist-data/
[node1] (local) [email protected] ~/data/docker_data/minimalist/minimalist-data
$ ls
51sec  9kdc7
[node1] (local) [email protected] ~/data/docker_data/minimalist/minimalist-data
$ cat 51sec
testa
adsfasd
asdf

Or you can directly log into your created docker to check files using following command:

• docker exec -it <container name> /bin/bash  
• or docker exec -it <container name> sh

Notes: For Docker Playground website:

Copy:  Ctrl+Insert

Paste:  Ctrl+Shift+V

User Docker Run Command To Bring Docker Up

 

Docker data will be stored at following location. You do not have to create it since Docker Run command will create this folder for you. If you need to back up data, this folder will be the one you will need to back it up. 

• /root/data/docker_data/minimalist/minimalist-data

Then use docker run command with parameters to bring docker up.

[node1] (local) [email protected] ~/data/docker_data/minimalist/minimalist-web-notepad-docker
$ docker run -d -it --restart=always --name minimalist-web-notepad -v /root/data/docker_data/minimalist/minimalist-data:/var/www/html/_tmp -p 8006:80 johnyan2/minimalist-web-notepad
c4da2a1e847b7ed876065692a5839c7e7c3ee3eb85de96f4bb8948e6e583a2a8
[node1] (local) [email protected] ~/data/docker_data/minimalist/minimalist-web-notepad-docker
$ docker ps
CONTAINER ID   IMAGE                    COMMAND                  CREATED         STATUS         PORTS                  NAMES
c4da2a1e847b   minimalist-web-notepad   "minimalist-web-note…"   5 seconds ago   Up 4 seconds   0.0.0.0:8006->80/tcp   minimalist-web-notepad

Notes: 

For Docker Playground website:

• Copy:  Ctrl+Insert
• Paste:  Ctrl+Shift+V

Docker Comand list:

• Docker ps -a
• Docker stop <Name>
• Docker rm <Name>
• Docker image list 
• Docker image rm <Image Name>
• docker exec -it <container name> /bin/bash  
• or docker exec -it <container name> sh
• docker login
• docker push
• docker stop

Deploy Minimalist Web Notepad from Portainer

Docker Hub  Image: johnyan2/minimalist-web-notepad:latest

Volume Mapping : Bind

Container : /var/www/html/_tmp

Host: /root/data/docker_data/minimalist/minimalist-data

Port Mapping: 

Host tcp  8006

Container tcp: 80

Add Custom DNS A Record and NPM Configuration for HTTPS & Basic Authentication

Cloudflare Website

Adding a new DNS A record:

Nginx Proxy Manager Configuration

1. Create Access List

2. Creaet a nwe Proxy host and assign access-list to it

3. Apply a new SSL certificate for your website "notepad.51sec.org"

4. Assign this new applied certificate to our Proxy Host

5. Testing with https://notepad.51sec.org/51sec

username : test

password : test

If you entered the wrong usernmae/password, you will get an 401 authentication failed message. 

Videos

 YouTube:

References

• 【好玩的Docker项目】搭建一个简洁的记事本——minimalist-web-notepad
• Minimalist Web Notepad
• Docker Usage Introduction (Tips and Tricks)
• Portainer Usage Introduction