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

  1. I made a fresh ansible install, on a fresh ubuntu 20.04 server - the Lemmy instance runs perfectly.
  2. I made a fresh fork of the 16.7 Lemmy-UI.
  3. 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)

  • PicoBlaanketOP
    1•2 years ago

    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).

    • DessalinesMA
      1•2 years ago

      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.

      • PicoBlaanketOP
        1•2 years ago

        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.]

        • DessalinesMA
          1•2 years ago

          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.

          • PicoBlaanketOP
            1•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.