Hosting a Directus + NuxtJs project service available

[true venture]

I'm trying to host a Directus service and NuxtJs service but I'm having some trouble getting the frontend Nuxt service to make API calls to Directus.

I'm using the following dockerfile to run the Directus service: https://gist.github.com/matt-clegg/2ab36ff500e490ee25b17ceed1910e9e

And the following dockerfile to run the Nuxt frontend: https://gist.github.com/matt-clegg/8595a5573a1c24752026cbfd0571fa0e

I am able to deploy each service to my project successfully. I can access the Directus admin and edit collections completely fine. The Nuxt frontend is barebones at the moment, the only dependency it has is the nuxt-directus module. I've attached an image of the main .vue file, if I comment out the code to make an API call to Directus, it run's fine. However when I make the call to load a Directus collection, the frontend fails with the Railway Application failed to respond 503 error.

I've tried setting the NUXT_DIRECTUS_URL variable to both the public and private domains of the Directus service and neither work. I've also tried running just the frontend locally setting the NUXT_DIRECTUS_URL variable to the hosted public Directus service and that works fine, it just when the frontend is hosted is when it errors.

[solid plank]

Project ID: fabe1d4a-3a95-44c1-ac1c-3e5fc8fe67c9

[slate prawn]

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

[true venture]

fabe1d4a-3a95-44c1-ac1c-3e5fc8fe67c9

[lusty girder]

send the domains for the frontend and backend please

[true venture]

Frontend: https://frontend-production-c1ea.up.railway.app
Directus: https://directus-production-f09a.up.railway.app

[lusty girder]

your frontend needs to listen on process.env.PORT this PORT is automatically assigned to your service, if you dont listen on it railway has no way of knowing how to proxy requests to your app

[true venture]

Which service are you talking about? I've set PORT=3000 in my frontend service variables and PORT=8055 in my directus service variables. I can see directus running at :8055 in the deployment logs and the frontend running at :3000

Edit: Sorry, misread your message. The frontend should be listening on the port I set

[lusty girder]

sorry you did not read what i said

if you had done this your log would contain some random 4 digit number instead of 3000

since railway assigns your service a random PORT variable that you must listen on

https://docs.railway.app/troubleshoot/fixing-common-errors

[slate prawn]

Thank you for marking this question as solved!

Learn more

https://answeroverflow.com

[true venture]

Yeah I've already tried this, I thought hard coding port 3000 in the dockerfile and railway would help.

I've changed my dockerfile to only expose the port that is passed in, I can see in the logs the random port railway has assigned, but when I access the frontend domain it still errors with Application failed to respond

[lusty girder]

you don't need to do anything with the port in your dockerfile, you can remove that stuff

https://github.com/railwayapp-templates/nuxtjs/blob/main/nuxt.config.ts#L37-L40

[true venture]

so I removed the ARG PORT, ENV PORT ${PORT}, ENV NITRO_PORT ${PORT} and EXPOSE ${PORT} lines from the dockerfile and still no luck, it's still failing to respond.

it looks like that template is using an older version of nuxt, the way to set the port at runtime is by setting the PORT or NITRO_PORT env variables: https://nuxt.com/docs/getting-started/deployment#configuring-defaults-at-runtime

I don't think this is the issue though, as previously I have been able to access the frontend and see my changes in the browser. The issue is when the frontend tries to make an API call to the directus service.

[lusty girder]

I can't see your frontend at all, I always get 503

can you show me your metrics for the frontend service

[true venture]

sure thing

[lusty girder]

is your frontend crashing during the api calls?

well I guess it would technically be the nitro server