I make heavy use of a similar stack and here are some solutions I’ve come across:
Backend options (option to store frontend with backend):
A platform-as-a-service for Elixir. Very easy to use and I believe they have a free tier.
Their docs point to this helpful sample repo that includes assets that are compiled with Webpack. You can choose to store frontend here or not. I didn’t end up using them as I didn’t like the Python dependency.
A sort of platform-as-a-service for all frameworks. No free tier, but the prices are reasonable. You basically just need to provide a
build.sh file in your repo which handles building your app. If you wanted to store your frontend here, you would just need to add build instructions to the
build.sh file. I tried their service and had no complaints, but in the end I found Kubernetes more flexible and easier for my use-case. I believe they use AWS or Google Cloud themselves.
Kubernetes on Google and Digital Ocean
This is what I use these days for all my projects (all are Vue 3 + Vite + Elixir apps). It’s the most productive recipe for me at the moment. I prefer keeping frontend and backend together as it simplifies deployment and testing. This approach is more complicated, but more flexible. I use Nginx in this setup. I maintain the details of this recipe in this repo.
If you want to host your frontend separately there many many options for that.
Render.com and now Digital Ocean let you host a few static frontends for free. The prices are very low even after the free tier.
Otherwise, there’s obviously Vercel, Netlify and soon Cloudflare Pages and probably a bunch of others.
Additional notes on storing frontend with backend
When storing the frontend with the backend, the Phoenix app serves the frontend content and assets. This Phoenix app may optionally also be behind something like Nginx. When storing the frontend separately with one of the providers listed above, the different services handle the serving of frontend assets for you mostly.