How to deploy Bangle-io using docker?

[cinetube]

How to deploy Bangle-io using docker?

[BearDooks]

@cinetube looks like there is no docker image for this. That being said I am also curious since I would love to test it on my server and then blow it away after I break it 😄

I am going to see if I can write my own simple dockerfile to handle this. If I get it working I am more than willing to share with you and everyone else

[BearDooks]

@cinetube and @kepta

Here is what I wrote (I am no expert by any means, but it seems to be working for now)

dockerfile

FROM alpine:latest

# Environment Variables
ENV HTTPS_GIT_REPO "https://github.com/bangle-io/bangle-io.git"

# Updates and installs to the server
RUN apk update
RUN apk add --no-cache bash
RUN apk add --no-cache wget
RUN apk add --no-cache yarn
RUN apk add --no-cache git

# Make directory needed for app
RUN mkdir /bangle-dev

# Download the repo via git
WORKDIR /bangle-dev
RUN git clone ${HTTPS_GIT_REPO} .

# Build the app
RUN yarn install

# Run the app (will be in background)
# --host allows to run on network
# & at the end runs in background
RUN yarn start --host&

docker-compose.yml

version: '3'

services:
  bangle-dev:
    build: .
    ports:
      - "4000:4000"
    tty: true
    container_name: bangle-dev

and I was able to start it with docker-compose up -d

Hope this helps both of you!

[kepta]

For production cases, I would recommend using yarn build and using a static server to serve the static files. I have created a similar script for building and serving by running yarn g:build-prod-serve.

[BearDooks]

I have never really used yarn before, so good to know. Thanks!

[WGandy]

I tried the Dockerfile and compose files and it builds and runs without error but I'm not able to connect to it. stdout just says

Attaching to bangle-dev

This test is running in a VPS so I may have some kind of dns or connection issue. I'll try it again on a local server soon.

[boppy]

As I also had this question, I created a reduced Dockerfile to create the container. tl;dr first:

Dockerfile

FROM alpine:latest

RUN apk add --no-cache yarn git \
    && git clone --depth 1 --branch dev https://github.com/bangle-io/bangle-io.git app

WORKDIR /app
ENV NODE_ENV=production
RUN yarn install && yarn vite build
RUN rm -rf .git

CMD yarn e2e-serve

docker-compose.yaml

version: "3.7"
services:
  bangle:
    build:
      context: ./
    environment:
      TZ: Europe/Berlin         # Be sure to change
    restart: unless-stopped
    ports:
      - "127.0.0.1:3402:1234"   # Also be sure to do whatever it needs on your system ;)

Why does it differ so much from @BearDooks example?

It reduces the steps taken to build the image, doesn't install applications that are not used (bash and wget), only clones the latest data (--depth 1) from the dev branch (--branch dev) and therefore reduces the cloned size from 1.4 GB to 227 MB (still kinda huge, tbh)! It will then use the "built-in" e2e-serve to serve the app to port 1234, as per package.json. It also stays in foreground, as most containers do and will not need the tty flag because of that.

Is there a still an even better way?

Yes, there still is, but it doesn't use docker in the usual way. As the app is 100% browser-based, all the sources are not needed to run anyways, so it's enough to build the app once and serve it using a static file server, as nginx. This also missively reduces attack surface because no yarn-based application is run to serve static files.

I finally went that way and used this file set:

Dockerfile

This Dockerfile only clones the repo once, but makes a pull on each invocation of the container. So after every run of the container (it's one-shot, so it quits after it ran successfully), the git repo inside the container is up-to-date. yarn install and yarn build are executed after the pull. The build directory should be mounted to the container, so you can take to files to serve them from there.

FROM alpine:latest

RUN apk add --no-cache yarn git \
    && git clone --depth 1 --branch dev https://github.com/bangle-io/bangle-io.git app

COPY build.sh /build.sh
RUN chmod +x /build.sh

WORKDIR /app
ENV NODE_ENV=production
VOLUME /app/build

CMD /build.sh

build.sh

#!/bin/ash
# just to be sure: Change to /app directory
cd /app

# get latest data from git repo
git pull -q --rebase origin dev

# do the installation
yarn install

# do the build
yarn vite build

# confirm and quit
echo
echo "Build completed."

docker-compose.yaml

version: "3.7"
services:
  bangle-build:
    build:
      context: ./
    environment:
      TZ: Europe/Berlin             # Be sure to change
    restart: "no"
    volumes:
      - /var/www/bangle:/app/build  # Might also need a change

nginx-bangle.conf

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name bangle.example.com;

    include             params/ssl;
    ssl_certificate     certs/bangle.example.com/fullchain.cer;
    ssl_certificate_key certs/bangle.example.com/bangle.example.com.key;

    access_log          logs/example.com__bangle__access.log main;
    error_log           logs/example.com__bangle__error.log;

    location / {
        root /var/www/bangle;
        try_files $uri /index.html;
    }
}

Just to be sure: This only runs the container to build the static files. The container DOES NOT run all the time bangle is accessible! It's by design and should not make you worry! ;)

[ovizii]

Hopefully one day somebody will create a container image we can just pull to run bangle.io without having to build our own.

[BearDooks]

@boppy That's awesome! I am still learning a lot, so I really appreciate you explaining some of the things you did.