Forem: Zach Koch

Running a Docker Swarm on Raspberry Pi 5

Zach Koch — Mon, 09 Sep 2024 17:25:46 +0000

Intro

This article assumes Raspberry Pi 5s running Pi OS 64-bit connected to your local network.

You can use direct input, ssh, or my new favorite Raspberry Pi Connect to run these commands

If you follow my install instructions below, you will likely need to add sudo before each docker command. Otherwise you get an error like permission denied while trying to connect to the Docker daemon socket at ...

Docker swarm layout

A Docker swarm consists of

manager nodes which run tasks and add availability
worker nodes which host containers and add capacity

The recommended minimum of manager nodes is 3 for high availability. This is so you can take one down and the other two will continue to run the swarm.

Manager nodes also act as workers with extra overhead.

In my case I have 3 devices total so I will be making all of them managers, but any additional devices will be workers.

Install Docker

You can follow my guide to install docker on your raspberry pi 5.

Initialize the swarm

Use ifconfig to see your ip

It should be the first ip listed likely under:

eth0 for ethernet
wlan0 for wifi

Then use the following command to initialize your first manager node

docker swarm init --advertise-addr [ip address]

Add other managers

On the node where you initialized your swarm run this command

docker swarm join-token manager

Copy the output and for each of your other devices input this line to add them as manager nodes

Add worker nodes

If you want to add worker nodes int he future, the process is the same but you use this line on a manager node:

docker swarm join-token worker

Test by adding a service

To test your swarm use this command

docker service create --replicas 5 --name helloworld alpine ping docker.com

This will create a single service with 5 replicas/containers of helloworld running.

To see the service run

docker service ls

to see where the service has placed the replicas use

docker service ps helloworld

Under the nodes column you should see that it has spread the replicas across your devices

To remove the service and containers enter

docker service rm helloworld

Install Docker Engine on Raspberry Pi OS (64-bit)

Zach Koch — Thu, 05 Sep 2024 17:21:30 +0000

This was tested on a Raspberry Pi 5 with a fresh install of Pi OS 64-bit bookworm.

These instructions are available on the official site, but they are somewhat hidden away.

If you want to skip reading the instructions I have made a script that you can run directly from the terminal of your Pi

sudo curl -sL https://raw.githubusercontent.com/ezekeal/scripts/main/docker-pi.sh | bash

Add GPG Keys

you will get no output from these commands

sudo curl -fsSL https://download.docker.com/linux/debian/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

Add the Docker repositories

echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/debian \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

this will also have no output

now update

sudo apt-get update

You should see a line with https://download.docker.com/linux/debian if the previous steps were completed correctly

Install the Docker packages

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

Test your installation

sudo docker run hello-world

Using reCAPTCHA v3 with Next.js 14

Zach Koch — Wed, 04 Sep 2024 20:45:35 +0000

Using useFormState and useActionState

Next.js documentation currently encourages the use of useFormState and useActionState to submit form data to your server actions.

I will show you how I got Google's reCaptcha v3 working with useFormState. This may also apply to useActionState, but I have not tested it.

Setting up reCAPTCHA

Go to the reCAPTCHA v3 admin console and create a new site if you don't have one yet

Your configuration should have

A label for your project
Score Based (v3) selected
localhost and your site url both added as domains

After submitting the next page will let you copy the keys that you will need to add to your project in the next section

Setting up environment variables

In your project create a file called .env.local if you don't have one

In this file add your keys

.env.local


 bash
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=yoursitekeygoeshere
RECAPTCHA_SECRET_KEY=yoursecretkeygoeshere

Make sure you have this file added to .gitignore

adding NEXT_PUBLIC_ to our variable allows it to be accessed in the browser

react-google-recaptcha-v3

install react-google-recaptcha-v3


 bash
npm i -S react-google-recaptcha-v3

This package comes with GoogleReCaptchaProvider, a component that runs the reCaptcha script that detects bots and provides the result to any child components.

The documentation states that it should places as high as possible in the tree, but I found that I would get errors if it was outside the bounds of a client component.

In my case I wrapped it in the same file as my form component

Contact.tsx


 ts
'use client';
import {
    GoogleReCaptchaProvider, useGoogleReCaptcha
} from 'react-google-recaptcha-v3';

export default function Contact() {
    return (
        <GoogleReCaptchaProvider
            reCaptchaKey={
                process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY ?? ''
            }>
            <ContactForm />
        </GoogleReCaptchaProvider>
    )
}

function ContactForm() {
    // my form component
}

Integrate with useFormState

Normally we would set up useFormState by providing it with a server action that handles our form data.

In this case we want to add the reCAPTCHA data just before submitting to the server.

To do this we will

make a function with that accepts prevState and formData
get our captcha response from the reCAPTCHA script using executeRecaptcha
attach the captcha response to our form as a form field
send it off to our server action

Contact.tsx just inside your form component


 ts
const initialState: MessageState = { message: null, errors: {}};
const [state, formAction] = useFormState(addRecaptcha, initialState);
const { executeRecaptcha } = useGoogleReCaptcha();

async function addRecaptcha(prevState: MessageState, formData: FormData) {
    let gRecaptchaToken = ''
    if (executeRecaptcha) {
        gRecaptchaToken = await executeRecaptcha('contactMessage');
    }
    formData.set('captcha', gRecaptchaToken);

    return createMessage(prevState, formData)
}

The form action will go at the top of your form

Contact.tsx



<form action={formAction}>
  // your form
</form>

When you submit, the token that is created by the captcha provider will be sent to your server action as just another field

Validating captcha data

In your server action you will recieve your captcha token as part of your form data.

You can send the token to Google to verify

If the verification fails you can treat it the same way you would treat validation for any failed field in your form.

Contact.tsx



async function validateCaptcha(captchaToken: string): Promise<boolean> {
    const minimumCaptchaScore = 0.7;
    const secretKey = process.env.RECAPTCHA_SECRET_KEY || '';
    const data = new FormData();
    data.append('secret', secretKey);
    data.append('response', captchaToken);
    const captchaResponse = await fetch('https://www.google.com/recaptcha/api/siteverify', {
        method: "POST",
        body: data,
    });
    const res = await captchaResponse.json();
    console.log(`captcha score: ${res.score}`);
    return res.score && res.score >= minimumCaptchaScore;
}
const valid = await validateCaptcha(formData.get('captcha') ?? '')

The captcha score I'm still playing with, there doesn't seem to be a clear answer, but in my testing I usually get a 0.9

A friend of mine pointed out that using FormData would be more secure than building the url with a template string.

Hopefully that is enough to help you integrate captcha. I'll update this for useActionState in the future. I am currently using this on my own site. Let me know in the comments if you spot any issues or if anything is unclear.