Unable to access UI at http://localhost:8080

[mshakeg]

I am encountering an issue where I'm unable to access the safe-wallet-web ui service at http://localhost:8080/, however I am able to access the safe-client-gateway ui service at http://localhost:8000

Despite the containers appearing to run correctly with no apparent errors in the logs, the page at the mentioned URL doesn't load as expected. This issue persists despite various attempts to debug and resolve it.

I followed all the steps detailed here except for step 4 as I did not make any changes to cgw.env and cfg.env.

I'm using a macbook m1, running docker desktop 4.10.0

Here are the Docker Compose logs for the ui service for reference:

yarn run v1.22.19
$ yarn build && yarn export && yarn serve
$ next build
info  - Linting and checking validity of types...
info  - Creating an optimized production build...
> [PWA] Compile client (static)
> [PWA] Auto register service worker with: /app/node_modules/next-pwa/register.js
> [PWA] Service worker: /app/public/sw.js
> [PWA]   url: /sw.js
> [PWA]   scope: /
> [PWA] Fallback to precache routes when fetch failed from cache or network:
> [PWA]   document (page): /_offline
> [PWA] Compile server
> [PWA] Compile server
info  - Compiled successfully
info  - Collecting page data...
info  - Generating static pages (0/35)
info  - Generating static pages (8/35)
info  - Generating static pages (17/35)
info  - Generating static pages (26/35)
info  - Generating static pages (35/35)
info  - Finalizing page optimization...

Page                                           Size     First Load JS
┌ ○ / (1736 ms)                                576 B          1.16 MB
├   /_app                                      0 B            1.16 MB
├ ○ /_offline (597 ms)                         1.12 kB        1.17 MB
├ ○ /404 (587 ms)                              723 B          1.16 MB
├ ○ /address-book (1263 ms)                    20.4 kB        1.19 MB
├   └ css/96748baedd34b84c.css                 840 B
├ ○ /apps (1436 ms)                            634 B          1.21 MB
├   └ css/7e9c63e68b6b2390.css                 1.9 kB
├ ○ /apps/bookmarked (1553 ms)                 497 B          1.21 MB
├ ○ /apps/custom (1740 ms)                     814 B          1.21 MB
├ ○ /apps/open (649 ms)                        14.3 kB        1.22 MB
├   └ css/70da67bddd6844da.css                 2.87 kB
├ ○ /balances (1536 ms)                        8.03 kB        1.18 MB
├   └ css/f8f4f83ca34c275c.css                 1.08 kB
├ ○ /balances/nfts (1111 ms)                   8.12 kB        1.19 MB
├   └ css/90d2d3c86c0d3094.css                 1.19 kB
├ ○ /cookie (462 ms)                           6.26 kB        1.17 MB
├   └ css/d859b0746c8bbeb7.css                 183 B
├ ○ /home (1263 ms)                            18 kB           1.2 MB
├   └ css/ae2d5dd8f138307b.css                 1.61 kB
├ ○ /imprint (2034 ms)                         1.44 kB        1.17 MB
├ ○ /licenses (514 ms)                         2.64 kB        1.17 MB
├ ○ /new-safe/create (553 ms)                  7.9 kB         1.18 MB
├   └ css/140dbc00b1e442f4.css                 867 B
├ ○ /new-safe/load (533 ms)                    3.28 kB        1.17 MB
├   └ css/476ed40cd8023b09.css                 614 B
├ ○ /privacy (2003 ms)                         12.5 kB        1.18 MB
warn  - You have defined experimental feature (modularizeImports) in next.config.mjs that does not exist in this version of Next.js.
warn  - Please remove it from your configuration.

warn  - You have enabled experimental feature (images) in next.config.mjs.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

warn  - You have defined experimental feature (modularizeImports) in next.config.mjs that does not exist in this version of Next.js.
warn  - Please remove it from your configuration.

warn  - You have enabled experimental feature (images) in next.config.mjs.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

warn  - You have defined experimental feature (modularizeImports) in next.config.mjs that does not exist in this version of Next.js.
warn  - Please remove it from your configuration.

warn  - You have enabled experimental feature (images) in next.config.mjs.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

warn  - rewrites, redirects, and headers are not applied when exporting your application, detected (rewrites). See more info here: https://nextjs.org/docs/messages/export-no-custom-routes
├   └ css/5dbb40f835f285f0.css                 128 B
├ ○ /settings (2944 ms)                        453 B          1.16 MB
├ ○ /settings/appearance (1310 ms)             1.83 kB        1.17 MB
├ ○ /settings/cookies (1383 ms)                1.38 kB        1.17 MB
├ ○ /settings/data (660 ms)                    1.29 kB        1.19 MB
├   └ css/39ea4845aad91e17.css                 982 B
├ ○ /settings/environment-variables (1183 ms)  2.65 kB        1.17 MB
├ ○ /settings/modules (828 ms)                 3.49 kB        1.17 MB
├   └ css/748644c08735b71c.css                 745 B
├ ○ /settings/safe-apps (1176 ms)              2.82 kB        1.18 MB
├ ○ /settings/setup (1118 ms)                  10.7 kB        1.19 MB
├   └ css/7ac953e739d1a775.css                 818 B
├ ○ /settings/spending-limits (674 ms)         11.9 kB        1.19 MB
├   └ css/1f6fb4975eca009c.css                 864 B
├ ○ /share/safe-app (529 ms)                   11.3 kB        1.18 MB
├ ○ /terms (1965 ms)                           10.3 kB        1.17 MB
├ ○ /transactions (792 ms)                     296 B          1.23 MB
├ ○ /transactions/history (2304 ms)            264 B          1.23 MB
├ ○ /transactions/messages (1096 ms)           7.52 kB        1.21 MB
├   └ css/bd5672650a7571ea.css                 2.71 kB
├ ○ /transactions/queue (996 ms)               1.77 kB         1.2 MB
├   └ css/0c3881bc451559f6.css                 2.35 kB
├ ○ /transactions/tx (607 ms)                  1.09 kB        1.18 MB
├   └ css/05538e2f08f6c355.css                 2 kB
└ ○ /welcome (449 ms)                          3.38 kB        1.18 MB
    └ css/e70d24a508934d3a.css                 1.01 kB
+ First Load JS shared by all                  1.16 MB
  ├ chunks/framework-ec7578bc3e7e9c78.js       45.3 kB
  ├ chunks/main-0bdfd69a1d734bc0.js            36.8 kB
  ├ chunks/pages/_app-d527d47bc5d9a6c2.js      1.08 MB
  ├ chunks/webpack-fa8170424e7c2dde.js         4.32 kB
  └ css/8ad3f0d4342b2058.css                   9.45 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

$ next export
info  - using build directory: /app/.next
info  - Copying "static build" directory
info  - No "exportPathMap" found in "/app/next.config.mjs". Generating map from "./pages"
info  - Launching 5 workers
info  - Exporting (0/35)
info  - Copying "public" directory
info  - Exporting (8/35)
info  - Exporting (17/35)
info  - Exporting (26/35)
info  - Exporting (35/35)
Export successful. Files written to /app/out
$ npx -y serve out -p ${REVERSE_PROXY_UI_PORT:=8080}
 INFO  Accepting connections at http://localhost:8080

[jacobpdn007]

Did you solve this problem, I met the same issue with you, and I'm wondering if it's because we are using M1, which don't support AMD64 images

[mshakeg]

@jacobpdn007 no I did not.

[0xcuonghx]

Hi, @mshakeg @jacobpdn007 It's happened to me, too. I see a small mistake at the docker port is 8080 not 3000. I also create PR for it