Add Docker support with multi-stage build and nginx configuration (#153)

.dockerignore

@@ -0,0 +1,16 @@
+node_modules
+npm-debug.log
+dist
+.env
+*.local
+coverage
+.DS_Store
+.git
+.gitignore
+.vscode
+*.swp
+*.swo
+*.log
+*.pid
+*.seed
+*.pid.lock

Dockerfile

@@ -1,16 +1,18 @@
-FROM node:lts-alpine
+# syntax=docker/dockerfile:1
-
-RUN npm install -g http-server
-
-WORKDIR /src
 
+# Build stage
+FROM node:lts-alpine AS builder
+WORKDIR /app
 COPY package*.json ./
-
+RUN npm install --frozen-lockfile
-RUN npm install
-
 COPY . .
-
 RUN npm run build
 
+# Production stage
+FROM nginx:alpine AS production
+LABEL org.opencontainers.image.source https://github.com/lyqht/mini-qr
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY --from=builder /app/public /usr/share/nginx/html/public
+COPY --from=builder /app/nginx.conf /etc/nginx/nginx.conf
 EXPOSE 8080
-CMD [ "http-server", "dist" ]
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -111,7 +111,9 @@ https://github.com/lyqht/mini-qr/assets/35736525/991b2d7e-f168-4354-9091-1678d2c
 
 ## Self-hosting with Docker 🐋
 
-Mini-QR can easily be self-hosted. We provide a [docker-compose.yml](docker-compose.yml) file as well as our own images. We are using GitHub's `ghrc.io` Container Registry.
+Mini-QR can easily be self-hosted using Docker. We provide a [docker-compose.yml](docker-compose.yml) file and a production-ready multi-stage [Dockerfile](Dockerfile).
+
+### Quick Start (using prebuilt image)
 
 ```bash
 wget https://github.com/lyqht/mini-qr/raw/main/docker-compose.yml
@@ -119,6 +121,26 @@ wget https://github.com/lyqht/mini-qr/raw/main/docker-compose.yml
 docker compose up -d
 ```
 
+This will pull the latest production image from GitHub Container Registry and start the app at [http://localhost:8081](http://localhost:8081).
+
+### Build and run locally (for development or custom builds)
+
+```bash
+docker compose up -d --build
+```
+
+Or build and run manually:
+
+```bash
+docker build -t mini-qr .
+docker run -d -p 8081:8080 mini-qr
+```
+
+### Customization
+- You can edit `nginx.conf` or mount your own static files by uncommenting the `volumes` section in `docker-compose.yml`.
+- The production image uses Nginx for optimal static file serving.
+- The `.dockerignore` file is included for smaller, faster builds.
+
 ## Contributing
 
 [![All Contributors](https://img.shields.io/github/all-contributors/lyqht/mini-qr?color=ee8449&style=flat-square)](#contributors) [![Crowdin](https://badges.crowdin.net/miniqr/localized.svg)](https://crowdin.com/project/miniqr)

docker-compose.yml

@@ -1,5 +1,4 @@
 ---
-version: "3.8"
 services:
   mini-qr:
     image: ghcr.io/lyqht/mini-qr:latest
@@ -7,3 +6,10 @@ services:
     ports:
       - 8081:8080
     restart: unless-stopped
+    # Uncomment the following lines to build locally instead of pulling from ghcr.io
+    # build:
+    #   context: .
+    #   dockerfile: Dockerfile
+    # volumes:
+    #   - ./public:/usr/share/nginx/html/public:ro
+    #   - ./nginx.conf:/etc/nginx/nginx.conf:ro

nginx.conf

@@ -0,0 +1,32 @@
+user  nginx;
+worker_processes  auto;
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+
+# Events block
+ events {
+    worker_connections  1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+    sendfile        on;
+    keepalive_timeout  65;
+    server {
+        listen       8080;
+        server_name  localhost;
+        root   /usr/share/nginx/html;
+        index  index.html;
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+        location /public/ {
+            alias /usr/share/nginx/html/public/;
+        }
+        error_page   500 502 503 504  /50x.html;
+        location = /50x.html {
+            root   /usr/share/nginx/html;
+        }
+    }
+}