Add Docker image to make it even easier to distribute Phanpy

[AlyxPink]

Hey there! Thank you for your amazing client, I fell in love 😻

I thought it might be a good idea to – on top of GitHub releases – create a Docker container to easily deploy the project. As it's quite common to just slap a container on a server and call it a day. For some, including me, it's much easier to do so than deploying static files, as everything is running inside Docker container.

So I drafted really quickly a POC for a Dockerfile, to get your opinion on this. I will work on the CI/CD part if you think it's a good thing to add, and refine how the environment variables will work.

If you are worried by the size of the Docker image created, no worries, it's very light:

$ docker image ls
phanpy_2024.03.17.c7c764a   latest      6b127bd84066   3 minutes ago    8.99MB
...

Happy to help with anything, and of course, if it's not something you want to invest time in, either I could help to maintain this part, or the PR can be closed. I know accepting PR means having more things to maintain, so no worries.

I hope your Monday will be good 🙌

[cheeaun]

@AlyxPink thanks! 9MB looks really good. Few things:

1. This needs documentation. An example would be like Elk's https://github.com/elk-zone/elk/?tab=readme-ov-file#self-host-docker-deployment
2. I'm not sure how the "CI/CD part" works. I assume it's uploading the docker image to the registry? Reference that I'm trying understand here: https://github.com/elk-zone/elk/blob/main/.github/workflows/docker.yml

[cheeaun]

hmm just noticed this https://github.com/burntcookie90/phanpy-dockerfile by @burntcookie90

[burntcookie90]

👋🏾 I have the basest of understanding of what I'm doing and the deployed image is not as small as I'd like for an official release. However, I have been using this deployed image since I made it without issue, so its a good example of it working.

[benjaoming]

There are (at least) two different cases for running phanpy in Docker:

1. Running on localhost in order to access phanpy from the same machine.
2. Deployed online, with SSL

Ad 1: I think that a Docker image should be clear about which it is aiming for. Might even discourage running on localhost (use an alias) because with localhost, another app also on localhost can access the same localStorage in the browser, regardless of which TCP port it's active on (correct me if I'm wrong but that's what I've read).

I like @burntcookie90's approach of building phanpy and I've done similar: Since it's Docker, we can take advantage of being able to build Phanpy (npm build && npm install) since there might eventually be build configuration options.

My image (for running on `localhost`) looks like this

FROM node:20-alpine AS nodebuild

RUN apk add git

RUN cd / && \
    git clone https://github.com/cheeaun/phanpy.git && \
    cd phanpy && \
    git checkout 2024.02.03.35a31e1

# builds to /phanpy/dist
RUN cd /phanpy && \
    npm install && \
    npm run build

FROM nginx:alpine

COPY --from=nodebuild /phanpy/dist /usr/share/nginx/html

EXPOSE 80

[AlyxPink]

Hey there! Thanks for your replies 🙇

---

@cheeaun:

@AlyxPink thanks! 9MB looks really good. Few things:

1. This needs documentation. An example would be like Elk's https://github.com/elk-zone/elk/?tab=readme-ov-file#self-host-docker-deployment

2. I'm not sure how the "CI/CD part" works. I assume it's uploading the docker image to the registry? Reference that I'm trying understand here: https://github.com/elk-zone/elk/blob/main/.github/workflows/docker.yml

I thought it would be better to have a well known web server, so I moved to nginx. It's still very light (16.9MB) anyway.

1. I'll for sure document that once we are on the same page. I drafted something, no worries if it feels a bit light, I will refine it before merging if you seem ok with the way things are going.

2. Yes exactly! I personally think it would be a good idea to use Docker as the "source of truth" for every build. Using containers to build the software, and extract the zip in Phanpy's case, on top of sharing the Docker image, shipping Phanpy with a web server. What's nice about that too is that you are not rebuilding twice your application.

I understand from what I've seen on #501 that you are not sure if you want to take ownership of the Docker image. I can totally understand not wanting to be responsible for a tool that you are not used to. I'm available if you need any help, discussion (a call, emails, etc) or if you want me to own this piece, I'll do my best to be as responsive as I can in case something goes wrong.

My opinion on letting other people create their own image is that there won't be a "safe" or "official" one and that could scare some away. Once the build flow is working, with so few dependencies, I don't think it could break easily, and so it would be pretty stable and easy to maintain.

Regarding the "custom build" parameters, I'll investigate what it is and how we could make it a work with our Dockerfile. I'll document that part too.

Also now there are two conversations about the same thing, if you want to close a PR in favor of another, let me know, we could collaborate on the same one with @yitsushi 😊

---

@burntcookie90 good job 👌 Just to get an opinion, would you rather keep using your own build or you'd prefer having an official one?

---

@benjaoming Hm good idea, I don't have the knowledge to be 100% sure it could happen, but it seems totally plausible. Maybe we could ship the image with a configuration that make sure you can't access the app from localhost 🤔 Or at least not without an explicit warning. I wonder if other applications are doing something special for that case.

Yes, I think it's the way. If Phanpy adopts having an official Docker container image, then I think the build should happen in the same place.

Any reason you are cloning the whole repo and checking out at a specific tag, instead of either using main and build the latest version, or use one of the archive file already built? You could save some time by pulling the zip or tar file directly. :)

[yitsushi]

Created a Discussion, I think that's more easier to follow and fits more: #511