README.md

Dockerize static application (React, Angular, Vue + Nginx)

This project is a template for deploying static applications with Docker and Nginx. It is intended to be used as a starting point for deploying React, Angular, or Vue applications.

Table of Contents

1. Installation
2. Usage
3. Explanation
   1. Dockerfile
   2. nginx.conf
4. Contributing
5. License

1. Installation

Clone the repository. You can run npm install to install the dependencies and npn run dev to start the development server.

Requirements:

• Docker
• Node.js

2. Usage

# Build the image
docker build -t <image-name> .

# Run the container
docker run -d -p <host-port>:80 <image-name>

3. Explanation

3.1. Dockerfile

# Multi-stage build
# https://docs.docker.com/develop/develop-images/multistage-build/

# Build stage
FROM node:20-alpine as build-stage # Use node:alpine as base image
WORKDIR /app # Set working directory
COPY package*.json ./ # Copy package.json and package-lock.json
RUN npm ci && npm cache clean --force # Install dependencies
COPY . .
RUN npm run build # Build application

# Production stage
FROM nginx:stable-alpine as production-stage # Use nginx:alpine as base image
COPY nginx.conf /etc/nginx/conf.d/default.conf # Copy nginx configuration
WORKDIR /usr/share/nginx/html # Set working directory
RUN rm -rf ./* # Remove default nginx files
COPY --from=build-stage /app/dist . # Copy built application
EXPOSE 80 # Expose port 80
CMD ["nginx", "-g", "daemon off;"] # Start nginx

3.2. nginx.conf

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html index.htm;

    # Make site accessible from http://localhost/
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Cache static files
    location ~* \.(jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
      expires 1M;
      access_log off;
      add_header Cache-Control "public";
    }

    # Cache CSS and JS files
    location ~* \.(css|js)$ {
        try_files $uri =404;
        expires 1y;
        access_log off;
        add_header Cache-Control "public";
    }

    # Handle requests for files and return a 404 if they do not exist
    location ~ ^.+\..+$ {
        try_files $uri =404;
    }

    # Not found handler with custom 404 page
    error_page 404 /404.html;
    location = /40x.html {
    }

    # Error handler with custom 50x page
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
}

4. Contributing

To contribute to this project, please see the contributing guidelines.

5. License

This project is open and does not have a specific license. You may use this project as you wish.