✋｜help

Hosting a Directus + NuxtJs project service available

Eemmsii

8/22/2023

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.

Solution:

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

Jump to solution

Eemmsii

8/22/2023

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

Bbrody192

8/22/2023

send the domains for the frontend and backend please

Eemmsii

8/22/2023

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

Bbrody192

8/22/2023

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

Eemmsii

8/22/2023

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

Bbrody192

8/22/2023

sorry you did not read what i said

Bbrody192

8/22/2023

Bbrody192

8/22/2023

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

Solution

Bbrody192

8/22/2023

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

Eemmsii

8/23/2023

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

Bbrody192

8/23/2023

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

Eemmsii

8/23/2023

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.

Bbrody192

8/23/2023

I can't see your frontend at all, I always get 503
can you show me your metrics for the frontend service

Eemmsii

8/23/2023

sure thing

Bbrody192

8/23/2023

is your frontend crashing during the api calls?
well I guess it would technically be the nitro server

Eemmsii

8/23/2023

I've managed to get it working now! There was a typo in the NUXT_DIRECTUS_URL env variable name!

Thanks for your help!