A while ago, I started a project with Node.js on the back end and Vue.js on the front end. I never saw any difficulties in executing my project in development.
I know that with Vue.js it is possible to generate a dist folder, but I don't understand how to use it.
Now I'm trying to create a docker image with my project and I was in doubt as to how its structure should work, I should create an image for the Back-end and another for the Front-end, and even if it is possible it is recommended to to do? With the docker image I intend to launch the project on Google Cloud.
I also have doubts on the question of the database, whether it should also be in the same docker image or should I separate it from the Back-end?
It depends on your expected traffic. If you expect a higher load, horizontal scaling would suggest to put them in separate images because then you can scale out the frontend and the backend separately.
Whether you use CI/CD or not, when building your frontend image you want to use a web server around the frontend, there are options, pick your best known (Apache httpd or Nginx... etc). Make sure that if you are using vue-router you configure your rewrites to send everything to the index.html, otherwise your routing will not work. To finish up within the dockerfile you copy the dist output to your html root.
Regarding the database, putting it in the same container would mean that if the backend or frontend fails for any reason your database goes down as well. Don’t do that.
Having it within the same image but running as a separate container might work, though probably very tedious to achieve this, I don’t really see the point to be honest. Just use a dedicated database image and deploy it separately.
