Example Voting App with Docker Compose

In this tutorial, we’ll guide you through the process of creating a voting app using Docker Compose. We’ll cover the architecture, technologies involved, and provide step-by-step instructions on how to set up and run the application. By the end of this tutorial, you’ll have a fully functional voting app up and running using Docker Compose.

Architecture:

The voting app will consist of three main components:

1. Frontend: Responsible for displaying the voting interface to the users. It will be built using React.js.
2. Backend: Handles the logic of the voting process. It will be built using Node.js and Express.js.
3. Database: Stores the votes and other relevant data. We’ll be using MongoDB for this purpose.

Technologies Used:

• Frontend: React.js
• Backend: Node.js, Express.js
• Database: MongoDB
• Containerization: Docker, Docker Compose

Deployment Steps:

Step 1: Set up the project
First, make sure you have Node.js and npm installed on your machine. Then, create a new directory for your project and initialize a new Node.js project by running the following commands:

mkdir voting-app
cd voting-app
npm init -y

Step 2: Install dependencies
Next, install the necessary dependencies by running the following command:

npm install express react react-dom axios mongoose body-parser cors

Step 3: Set up Docker Compose
Create a docker-compose.yml file in the project directory and add the following content:

version: '3'
services:
  frontend:
    build: ./frontend
    ports:
      - 3000:3000
  backend:
    build: ./backend
    ports:
      - 8080:8080
  database:
    image: mongo:latest
    volumes:
      - ./data:/data/db

This configuration sets up three services: frontend, backend, and database. The frontend and backend services will be built from the respective directories (frontend and backend) in the project. The database service uses the official MongoDB image from Docker Hub. The ./data directory is used to store the MongoDB data持久化数据。./data:/data/db 是将主机上的./data目录挂载到容器内的/data/db目录。这样，即使容器被删除，数据仍然会被保留。3000:3000 和 8080:8080 是端口映射，分别将容器的3000端口映射到主机的3000端口，将容器的8080端口映射到主机的8080端口。这样，我们就可以通过访问主机的相应端口来访问前端和后端服务。mongo:latest 是使用的MongoDB镜像版本。 当你需要升级MongoDB版本时，只需更改此镜像版本即可。](https://www.cnblogs.com/constantin77/p/14115765.html)