Running Docker in Vue.js with Nginx | Dockerize Your Vue.js App |

In this tutorial, we'll guide you through the process of running Docker in a Vue.js project with Nginx. Dockerizing your Vue.js application not only simplifies the deployment process but also ensures consistent and reliable environments across different platforms. By combining the power of Docker containers and the popular Vue.js framework, you can effectively package, ship, and run your Vue.js applications with ease.
Throughout this step-by-step guide, we'll cover the following topics:
Introduction to Docker and its benefits in Vue.js development
Setting up a Vue.js project
Creating a Dockerfile for Vue.js application
Configuring Nginx as a reverse proxy for the Vue.js application
Building and running the Docker container
Deploying the Dockerized Vue.js application to a production environment
Troubleshooting common issues and best practices
Whether you're new to Docker or experienced with Vue.js, this tutorial will provide you with the necessary knowledge and hands-on experience to Dockerize your Vue.js applications and leverage the power of containerization for seamless deployment. Follow along and unlock the full potential of Vue.js development with Docker and Nginx. Let's get started!
github.com/vongkeo/devla_flut...

[@eduardomeireles4693]

very good! Worked at first try

[@devla7368]

That's great to hear! Thanks for letting us know it was effective

[@eugeneeremin]

Thanks!

[@dimwel]

thanks

[@user-sf7uq4nk7w]

I want to know that dockerfile had used nginx why write other nginx config in docker compose file?

[@devla7368]

Think of the Dockerfile as a recipe for building the kitchen (your base image). It includes installing the oven (Nginx). However, the recipe doesn't tell you how to cook a specific dish (specific Nginx configuration). The docker-compose.yml acts like the recipe book where you define the instructions for cooking a particular dish (configuring Nginx for your specific needs).
By separating the Dockerfile and docker-compose.yml configuration, you achieve a more modular and maintainable approach for deploying your application with Nginx.

[@ShutDownXXX7]

You're creating the project in the host right? Why not use docker to make the installation in the container instead of installing node in the host?

[@devla7368]

There are a couple of reasons why I might choose to install Node.js on the host machine instead of using Docker in this project:
Simplicity: For a small project, installing Node directly on the host can be simpler and faster to set up than introducing Docker.
Development Workflow: If I'm actively developing the project and making frequent changes, installing Node on the host might streamline the development process by avoiding the need to rebuild the Docker container every time.

[@ShutDownXXX7]

@@devla7368 I prefer using a Docker image that includes node, this help me to initialize a project instead of installing node in the host, I think is handy. Something like this: docker run --rm -it -v "$(pwd)":/app -w /app node:lts-alpine yarn create vite .

[@xiaoya7087]

great

[@dimwel]

can you explain please, in result we have two containers but i need only one with vue-app so i can delete other one?

[@devla7368]

Not sure which container you want to delete, for this case, Vue app container can’t run without nginx

[@LoVe-iu9rd]

@@devla7368 nginx is used port forwarding reverse proxy, right?

[@irrefl1672]

take this: FROM node:lts-alpine
# install simple http server for serving static content
RUN npm install -g http-server
# make the 'app' folder the current working directory
WORKDIR /app
# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./
# install project dependencies
RUN npm install
# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .
# build app for production with minification
RUN npm run build
EXPOSE 8080
CMD [ "http-server", "dist" ]

[@RuVl_13]

why are you install nginx to both containers??

[@devla7368]

Hi! In the video, it is not explicitly mentioned why Nginx is installed in both containers. Nginx can be used for a variety of purposes in a Dockerized application, such as a reverse proxy, load balancer, or static file server. It's possible that Nginx is being used for one or more of these purposes in both containers in this video.

[@AlbertoRodriguez-yv8ze]

I tried with a domain, but when I wrote the domain on search, show me a nginx default page, this is because the app redirect to port 8080 not 80, so how can I redirect to port 80?

[@devla7368]

It sounds like you're encountering a situation where your application is running on port 8080, but your domain is configured to look for it on port 80 (the standard web server port). This mismatch is causing the default Nginx page to display instead of your application.

[@devla7368]

There are two main approaches to redirect traffic from port 80 to port 8080:
1. Using a Reverse Proxy (Recommended)
2. Modifying Application Configuration (if applicable):

[@amirtec265]

not good