Docker Basics and Step‑by‑Step Guide to Deploy Frontend and Node.js Applications

Docker is a lightweight virtualization technology that creates isolated containers by sharing the host kernel, eliminating the need for full virtual machines. Containers run applications in consistent environments, simplifying continuous integration, delivery, and development setup.

The Docker toolset consists of three main parts: a Dockerfile that defines the build instructions, an image that is the immutable snapshot created from the Dockerfile, and a container that is a running instance of an image.

Common Docker commands are grouped by purpose:

Container management: docker run , docker start , docker stop , docker restart , docker rm , docker ps , docker ps -a

Image management: docker images , docker pull , docker push , docker build -t <image> <path> , docker rmi

Logs and exec: docker logs <container> , docker exec -it <container> <command> , docker cp <container>:<path> <local_path>

Network and volume: docker network ls , docker network create <network> , docker network connect <network> <container> , docker port <container> , docker volume ls , docker volume create <volume> , docker volume inspect <volume> , docker volume rm <volume>

Deploying a frontend project

1. Create a Vite React‑TS project: npm create vite@latest my-react-app-docker-1 --template react-ts and build it with npm run build to generate the dist folder.

2. Write an nginx.conf that serves static files from /usr/share/nginx/html and enables gzip compression.

3. Create a Dockerfile :

FROM nginx:stable-alpine3.17
COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

4. Build the image: docker build -t vite-web:v1 .

5. Run the container: docker run -d --name my-web-1 -p 8080:80 vite-web:v1 . Verify with docker ps , curl http://localhost:8080 -v , and by opening the browser.

6. Automate the workflow with a shell script ( bin/setup_host.sh ) that builds the image, removes any existing container with the same name, and starts a new container using timestamped tags.

Deploying a Node.js backend

1. Scaffold an Express app, add a simple server.js that listens on port 8080, and define a start script in package.json .

2. Create a .dockerignore to exclude node_modules and log files.

3. Write a Dockerfile for the backend:

# Use a lightweight Node 18 image
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD ["node", "server.js"]

4. Build and run the backend image:

docker build -t express-app .
docker run -d --name my-express-app -p 3002:8080 express-app

Test with curl -i localhost:3002 . Use docker exec -it my-express-app ash to inspect the container.

Image publishing

Log in to Docker Hub ( docker login ), tag the images ( docker tag vite-web:v1 youruser/vite-web , docker tag express-app youruser/express-app ), and push them ( docker push youruser/vite-web:latest , docker push youruser/express-app:latest ).

Finally, the article summarizes the essential Docker workflow—Dockerfile, build/pull, run, and push—and hints at further topics such as multi‑service composition, data persistence, CI/CD pipelines, cloud deployment, and serverless alternatives.