How about adding a Dockerfile to build the web? #1183

LI-NA · 2024-03-23T04:06:47Z

LI-NA
Mar 23, 2024

Hi there.

Recently ente became open source and I'm looking for a way to deploy all ente apps at once using docker-compose.

I've written the following code and am using it to deploy the web version with docker as well.

FROM node:20-alpine as builder

WORKDIR /app
COPY . .

ARG NEXT_PUBLIC_ENTE_ENDPOINT=http://localhost:8080
ENV NEXT_PUBLIC_ENTE_ENDPOINT=${NEXT_PUBLIC_ENTE_ENDPOINT}

RUN yarn install && yarn build

FROM node:20-alpine

WORKDIR /app
COPY --from=builder /app/apps/photos/out .

RUN npm install -g serve

ENV PORT=3000
EXPOSE ${PORT}

CMD serve -s . -l tcp://0.0.0.0:${PORT}

(This dockerfile is for photo.)

How about adding a dockerfile like this to the web folder and making it easier for many users to use the web in docker-compose?

If you think it's inappropriate to include it in the code, I'll write documentation about it so people can build web manually.

Thank you for taking the time to read my discussion.

mnvr · 2024-03-23T04:54:44Z

mnvr
Mar 23, 2024
Maintainer

Thanks for the suggestion.

If you think it's inappropriate to include it in the code...

It is not inappropriate to include it in the code, however, we don't yet want to pre-commit to a particular way of using the web app with Docker. This is because

the web app is sort of easy to self host (easy as compared to say the server app), and
the web app is not one thing but many - there is a photos web app, then there is a auth web app, and then there are various sidekicks like accounts/cast/families/payments. For 90% of the people, just hosting the photos or the auth app might be enough, but some people might want to host the entire enchilada and it is not yet clear what is the best way forward.
Not sure how it'll interact with the compose file for the server (we're also going to start publishing docker images for the server soon, so after that might be a good time to revisit this)

So for now, I'm not fully sure if we want to add this Dockerfile to the web code. Maybe this is the correct approach, but still want to mull a bit more over this before adding something (and then later trying to take it out).

...I'll write documentation about it so people can build web manually.

Feel free! That is maybe the best option now, it can help other people too. You can add your guide in a new file under https://github.com/ente-io/ente/tree/main/docs/docs/self-hosting/guides (+add an entry in sidebar.ts), and once published it'll appear in https://help.ente.io/self-hosting/guides/.

Thank you for taking the time to read my discussion.

rather, thank you 😊

2 replies

LI-NA Mar 23, 2024
Author

Great, I'll write a document when I have time!

I hope you'll take your time thinking about dockerising your web app :)

jo-chemla Jun 20, 2024

My 2 cents, the vast majority of people enclined to self-host the whole ente stack, server and webapps, would probably be interested only in photos and auth - indeed not the whole enchilada. Even if this is more trivial than the server, having official images, built and pushed to a container repo, would make it easier to spawn a docker-compose stack, maintain and update it.

Plus it's not unusual as a selfhoster for things to break a little upon updates - if you start off with a solution for the webapp docker image, and then update the docker image, env variables, port mappings etc, because you find a way more aligned with your goals, it's my responsibility to adapt in order to update or stick to an earlier of my working stack.

forabi · 2024-05-13T23:31:38Z

forabi
May 13, 2024

This does not seem to work for me, the build exits with an error:

   ▲ Next.js 14.1.0
   - Environments: .env

   Linting and checking validity of types ...
   Creating an optimized production build ...
Failed to compile.

../../node_modules/@mui/system/GlobalStyles/index.js
Module not found: Can't resolve './GlobalStyles'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../../node_modules/@mui/system/index.js
../../node_modules/@mui/material/styles/index.js
./src/pages/_app.tsx

../../node_modules/@mui/system/Stack/Stack.js
Module not found: Can't resolve './createStack'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../../node_modules/@mui/system/index.js
../../node_modules/@mui/material/styles/index.js
./src/pages/_app.tsx

../../node_modules/@mui/system/Stack/index.js
Module not found: Can't resolve './createStack'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../../node_modules/@mui/system/index.js
../../node_modules/@mui/material/styles/index.js
./src/pages/_app.tsx

../../node_modules/@mui/system/Unstable_Grid/index.js
Module not found: Can't resolve './Grid'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../../node_modules/@mui/system/index.js
../../node_modules/@mui/material/styles/index.js
./src/pages/_app.tsx

../../node_modules/@mui/system/Unstable_Grid/index.js
Module not found: Can't resolve './createGrid'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../../node_modules/@mui/system/index.js
../../node_modules/@mui/material/styles/index.js
./src/pages/_app.tsx


> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: /usr/local/bin/node
Arguments: /opt/yarn-v1.22.19/lib/cli.js next build
Directory: /app/apps/photos
Output:

info Visit https://yarnpkg.com/en/docs/cli/workspace for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
building at STEP "RUN yarn build": while running runtime: exit status 1

Any hints?

5 replies

forabi May 14, 2024

Looks like the failures are only happening with Podman

LI-NA May 14, 2024
Author

Oh, sorry. I don't have the time to devote to ente right now, so I won't be able to check it. I think you can try to verify that the web application was buildable in the local system, not in a podman.

forabi May 14, 2024

I built using Docker and that worked fine. I then pushed the built image to a local registry and used that to start the container with Podman. This must be a podman bug.

LI-NA May 14, 2024
Author

Glad to hear it worked out for you. Thanks for sharing. :)

zshmeta Jun 17, 2024

server-minio-3v.-1z server-minio-provision- e95h 0 igit JH i Ugommm ujmuoohhhh9g0o5o9server-minio-prommmvision-1 RDllllprovision-vb0o1server-min.m exclu c👁️‍🗨️io-provi. B99@pop 0 9
9uiv6 _vogb_Mimi 3ydr37 v 5vx,, x«,,5h9Honda ZES. 2'2

plumber-craic · 2024-06-14T16:11:19Z

plumber-craic
Jun 14, 2024

I liked this Dockerfile and wanted to make it so it automatically updated itself from the git repo. This is what I came up with, hopefully others find it useful:

Dockerfile

FROM node:20-alpine

RUN apk add --no-cache git

WORKDIR /app
RUN npm install -g serve

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

ENTRYPOINT ["/entrypoint.sh"]
CMD ["serve", "-s", "/data/ente/web/apps/photos/out", "-l", "tcp://0.0.0.0:3000"]

EXPOSE 3000

entrypoint.sh

#!/bin/sh
# Exit on any error
set -e

# Clone the repository
if [ ! -d "/data/ente/.git" ]; then
    git clone https://github.com/ente-io/ente.git /data/ente
    cd /data/ente/web
    git submodule update --init --recursive
else
    cd /data/ente
    git pull
    cd /data/ente/web
    git submodule update --recursive
fi

# Install dependencies
yarn install

# Build the application
if [ -d "/data/ente/web/apps/photos/out" ]; then
    echo "Removing previous build directory."
    rm -rf /data/ente/web/apps/photos/out
fi

yarn build:photos

# Execute the command provided as arguments to the entrypoint (if any)
exec "$@"

compose.yml

services:
  app:
    container_name: ente-photos
    environment:
      NEXT_PUBLIC_ENTE_ENDPOINT: "https://foo.bar"
      NEXT_PUBLIC_ALBUMS_ENDPOINT: "https://foo.bar"
    build: .
    volumes:
      - ./data:/data
    ports:
      - "3000:3000"
    restart: always

6 replies

aqsede Aug 26, 2024

I was able to get it up, but I am having issue like inaccessible media within the web only with black and unclickable thumbnails

Should this value both be same?
NEXT_PUBLIC_ENTE_ENDPOINT: "https://foo.bar"
NEXT_PUBLIC_ALBUMS_ENDPOINT: "https://foo.bar"
EDIT: figured out the above, it's not related, just that wrong configuration will end with shared albums not working.
and my webapp still is broken since this is not related.

Issue in details:

from web app debug log this is showing:

[2024-08-25T16:08:28.677Z] [error] get DownloadManager preview Failed: AxiosError: Network Error
    at g.onerror (https://web.domain.com/_next/static/chunks/pages/_app-2c84bea99d40455b.js:40:46191)
    at tI.request (https://web.domain.com/_next/static/chunks/pages/_app-2c84bea99d40455b.js:40:51090)
    at async a.request (https://web.domain.com/_next/static/chunks/pages/_app-2c84bea99d40455b.js:24:237772)
    at async s (https://web.domain.com/_next/static/chunks/pages/_app-2c84bea99d40455b.js:24:244373)
    at async E.downloadThumbnail (https://web.domain.com/_next/static/chunks/pages/_app-2c84bea99d40455b.js:24:204268)
    at async I.downloadThumb (https://web.domain.com/_next/static/chunks/pages/_app-2c84bea99d40455b.js:24:201455)
    at async I.getThumbnail (https://web.domain.com/_next/static/chunks/pages/_app-2c84bea99d40455b.js:24:197948)
...
[2024-08-26T03:56:24.238Z] [error] Unhandled promise rejection: AxiosError: Network Error
    at g.onerror (https://web.domain.com/_next/static/chunks/pages/_app-8664e8ed461a15d4.js:40:46191)
    at tI.request (https://web.domain.com/_next/static/chunks/pages/_app-8664e8ed461a15d4.js:40:51090)
    at async a.request (https://web.domain.com/_next/static/chunks/pages/_app-8664e8ed461a15d4.js:24:237770)
    at async C (https://web.domain.com/_next/static/chunks/pages/_app-8664e8ed461a15d4.js:24:67394)
    at async https://web.domain.com/_next/static/chunks/4811-1e63c667b4c0121d.js:1:214463
[2024-08-26T03:56:25.350Z] [info] request failed - no response (get http://127.0.0.1:3399/files/preview/10000000?token=<somevalue>
...

my server side was using this guide: https://academy.pointtosource.com/containers/ente-photo-server/
and it works with android and desktop app.

I've also tried both endpoint env using https://server.domain.com instead of http://127.0.0.1:3399 with exact same result incase anyone is wondering.

mnvr Aug 26, 2024
Maintainer

In cases where the thumbnails can be fetched by the mobile app but not by the web app, a common reason is CORS headers not being properly set. CORS failures will not be reported in the logs (since the browser doesn't tell the app about CORS failures), but they will be shown in the browser dev tools if you keep it open when trying to open a file (if the thumbnail fetch is failing, the file fetch would likely be failing too).

These might help in figuring out what's wrong:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How about adding a Dockerfile to build the web? #1183

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 13 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How about adding a Dockerfile to build the web? #1183

Replies: 3 comments · 13 replies

mnvr Mar 23, 2024 Maintainer

LI-NA Mar 23, 2024 Author

LI-NA May 14, 2024 Author

LI-NA May 14, 2024 Author

mnvr Aug 26, 2024 Maintainer

Replies: 3 comments 13 replies

mnvr
Mar 23, 2024
Maintainer

LI-NA Mar 23, 2024
Author

LI-NA May 14, 2024
Author

LI-NA May 14, 2024
Author

mnvr Aug 26, 2024
Maintainer