Dockerize Vue.js App | Example docker file with Nginx causes 404 issues

[ashiqsultan]

trafficstars

The Example provided in the page "Dockerize Vue.js App" with Nginx, causes 404 issues for the deployed app. I think we need to add a custom nginx conf file. link: https://vuejs.org/v2/cookbook/dockerize-vuejs-app.html#Real-World-Example

The Nginx 404 is displayed only when directly accessing a route other than '/' So its displayed only when directly accessing the example.com/articles from the browser URL but works fine when going to example.com

[chrisvdp]

I ran into this as well. The example seems to be missing some nginx config to try index.html

https://stackoverflow.com/questions/47655869/how-to-use-vue-js-with-nginx

[maximkrouk]

+1 for @chrisvdp's comment, adding try_files $uri $uri/ /index.html; to default.conf fixes the issue.

I added nginx folder with a default.conf file to my project and copying it to my container using Dockerfile.

Here is my Dockerfile (I'm using Vue3 Vitesse template btw, so Dockerfile uses pnpm to build the project)

.txt extensions are added to files just to upload them to GitHub, remove it after downloading

[SenadK95]

@maximkrouk Thank you!!!! Your conf and dockerfile fixed it for me.