this post was submitted on 25 Sep 2022

8 points (100.0% liked)

Lemmy Support

4718 readers

2 users here now

Support / questions about Lemmy.

Matrix Space: #lemmy-space

founded 5 years ago

MODERATORS

[email protected]

SOLVED - Lemmy UI Fork - 502 Bad Gateway error (lemmy.ml)

submitted 2 years ago* (last edited 2 years ago) by [email protected] to c/[email protected]

6 comments fedilink hide all child comments

SOLUTION:

The issue was - the ‘New UI’ docker image was automatically building for AMD64, but the Linux server is an ARM64/v8.

I had to add QEMU and multi-platform build commands to the docker-image.yml file (in Github Actions).

This creates an additional docker image for ARM64 machines, which loads and runs successfully.

This was discovered by manually building a docker container, and receiving the following message: WARNING: The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested

So if you get that message, you must build your docker image for the platform you are on (or multiple platforms).

** == ** == ** == ** == ** == ** == **

ORIGINAL ERROR:

THE SETUP and ERROR

I made a fresh ansible install, on a fresh ubuntu 20.04 server - the Lemmy instance runs perfectly.
I made a fresh fork of the 16.7 Lemmy-UI.
I built a docker-image of that forked UI, and loaded it via docker-compose (here is my docker-image.yml build file ).

Now I am getting a “502 Bad Gateway - nginx” error (the site does not load).

NGINX error log shows:

connect() failed (111: Connection refused) while connecting to upstream, client: 75.222.232.212, server: ggg.com, request: "GET / HTTP/2.0", upstream: "http://0.0.0.0:15153/", host: "ggg.com"

Nginx config has not been modified (but here is the config anyway - ggg.conf)
Docker log is clean.

DIAGNOSIS

When I list docker containers, there is no PORT mapped to the ‘New-UI’ image container.

(However, when running the ‘default lemmy-UI’ image container, the PORT is successfully mapped to 127.0.0.1:15153->1234/tcp)

It seems I must create a new Container, using the ‘New-UI’ image, and map the PORT to 127.0.0.1:15153->1234/tcp (unless an Environment Variable can do it).

^ Now I must figure out that exact docker command. (because docker run -d -p 127.0.0.1:15153:1234 [ImageID] does not successfully create the container.)

Here are the Env Vars I’ve added (in various combinations/values):

  lemmy-ui:
    environment:
      - LEMMY_UI_HTTPS=true
      - LEMMY_UI_LEMMY_INTERNAL_HOST=lemmy:8536
      - LEMMY_UI_LEMMY_EXTERNAL_HOST=ggg.com
      - LEMMY_UI_DISABLE_CSP=true
      # - LEMMY_UI_LEMMY_WS_HOST=lemmy:8536
      # - LEMMY_UI_HOST=0.0.0.0:1234

here is the full docker-compose.yml (only changed Env Vars)

you are viewing a single comment's thread
view the rest of the comments

[–] [email protected] 2 points 2 years ago (1 children)

Those dockers already build for arm64, so i don't know why you have to use qemu.

https://hub.docker.com/layers/dessalines/lemmy/0.16.7/images/sha256-4645b7858540d64d11a8ad0db095884b95b3910d81aafb732a49e1c91b1fda03?context=explore

[–] [email protected] 1 points 2 years ago* (last edited 2 years ago) (1 children)

Thank you for the reply.

If I can eliminate QEMU, I’d love to (it’s slow).

Have you shared your workflow.yml anywhere? (for the lemmy-ui DockerHub image build)

This is my current workflow.yml (for Github Actions).

The reason I added QEMU was:

1 - Github Actions was only building the ‘forked-UI’ docker-image for AMD64.

2 - I then added buildx and specified a platform in the workflow:

 - name: Buildx
   uses: docker/setup-buildx-action@v1

 - name: Build and push
   uses: docker/build-push-action@v2
   with:
     context: .
     platforms: linux/arm64/v8

Which failed with:

 Error: buildx failed to solve: process "/dev/.buildkit_qemu_emulator /bin/sh -c 
 yarn install --pure-lockfile" did not complete successfully: exit code: 1

3 - I then added the QEMU step, and the build succeeded.

*Lemmy-Translations

I also had to add an "Update lemmy-translations" step:

   - name: Update submodules
     run: git submodule update --init --recursive

otherwise the build would fail with:

   /usr/src/app/generate_translations.js:7
   files.forEach(filename => {
      		       ^
   TypeError: Cannot read properties of undefined (reading 'forEach')
   at /usr/src/app/generate_translations.js:7:9
   at FSReqCallback.oncomplete (node:fs:201:23)

After adding that “Update Submodules” step, the build succeeds.

Is there a better way to do it?

I am 100% open to any suggestions/critiques (and if your workflow.yml is public, I will study it and learn).

[–] [email protected] 1 points 2 years ago (1 children)

We use drone, there is a .drone.yml file in the root of both lemmy and lemmy-ui. But I don't understand why you aren't using the existing images, which are already built for arm.

[–] [email protected] 1 points 2 years ago* (last edited 2 years ago) (1 children)

I forked the UI at 15.4, to build some new UI features.

Next I will manually add those features to this clean fork of Lemmy-UI 16.7 (so all code is up-to-date).

If I may ask, do you recognize what this issue might be?

These pages work:

Home page loads perfectly (when there are 0 posts)
Create a community works
visiting a community works (when there are 0 posts)
New user registration succeeds

However, I get a loading spinner and Uncaught TypeError: Cannot read properties of undefined (reading “____” ) on the following pages [in console]:

Create Post (reading “at”)
User Profile (reading “split”)
Settings (reading “map”)

And if I do create a post [by using ‘default UI’, and then switching back to 'forked UI'], then Post-List pages also give that error:

Community, Home (reading “split").

So my question is:

Do you see a likely cause from that pattern?

(Perhaps a backend/database connection - an undefined string).

If you have an idea, I would love to know.

ENVIRONMENT:

Docker + NGINX logs seem to be clean.
I have not modified the ‘UI fork’ code.
I have not modified anything on the VPS - only added these Environment Variables in docker-compose.yml (in various combinations):

  environment:
   - LEMMY_UI_LEMMY_INTERNAL_HOST=lemmy:8536
   - LEMMY_UI_LEMMY_EXTERNAL_HOST=ggg.com
   - LEMMY_UI_HTTPS=true
   - LEMMY_UI_DISABLE_CSP=true
   - LEMMY_UI_HOST=0.0.0.0:1234

The install was done by ansible.

Thank you for your time and work. Lemmy is awesome.

[I am learning about drone now.]

[–] [email protected] 1 points 2 years ago (1 children)

I can't help you debug forks, you're on your own there. Its almost certainly because your forked UI is using a wrong version of lemmy-js-client that works with the lemmy backend, so its missing or has incorrect fields in the request JSON.

[–] [email protected] 1 points 2 years ago

1 - I’ve completed your suggestions.

You are correct - I had forked the ‘Main’ branch, which runs a different js-client than UI-16.7.

So I merged 16.7 into my fork... and everything WORKS.

Thank you - that was helpful.

[I also set up Drone. Yes, it builds very fast.]

2 - Perhaps “LEMMY_DATABASE_URL” shows an obsolete value in the config docs:

It is listed as - postgres://lemmy:pw@LEMMY_DB:5432/lemmy
And perhaps should be - postgres://lemmy:pw@POSTGRES:5432/lemmy

That 2nd string worked for me anyway - on an ansible install. (the former gives a 404 fetch error).

Thank you very much again.

Lemmy is running smooth and looking great.

I hope you are doing alright.