Hosting a Directus + NuxtJs project service available
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.Gist
Dockerfile (Directus)
Dockerfile (Directus). GitHub Gist: instantly share code, notes, and snippets.
Gist
Dockerfile (drontend)
Dockerfile (drontend). GitHub Gist: instantly share code, notes, and snippets.
17 Replies
Project ID:
fabe1d4a-3a95-44c1-ac1c-3e5fc8fe67c9fabe1d4a-3a95-44c1-ac1c-3e5fc8fe67c9
send the domains for the frontend and backend please
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 appWhich 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
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
Solution
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
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
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.
Nuxt
Deployment
Deploy on a Node.js server, pre-render for static hosting and to serverless or edge environments.
I can't see your frontend at all, I always get 503
can you show me your metrics for the frontend service
sure thing
is your frontend crashing during the api calls?
well I guess it would technically be the nitro server
I've managed to get it working now! There was a typo in the NUXT_DIRECTUS_URL env variable name!
Thanks for your help!