Enable compression during build and configure nginx to serve compress…

…ed files

Dockerfile

@@ -1,14 +1,35 @@
 # develop stage
-FROM node:20.11-alpine as node-stage
+
+FROM node:20.11-bullseye as node-stage
 WORKDIR /app
 COPY . .
 RUN npm install
 
 RUN npm run build
 
+FROM nginx:1.25.4-bookworm as nginx-mod-stage
+RUN apt-get update && apt-get install cmake gcc wget git libpcre3-dev zlib1g-dev -y
+RUN wget "http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz" -O nginx.tar.gz && tar -zxC /usr/src -f nginx.tar.gz
+RUN git clone --recurse-submodules -j8 https://github.com/google/ngx_brotli
+RUN cd ngx_brotli/deps/brotli && \
+    mkdir out && \
+    cd out && \
+    cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=OFF \
+        -DCMAKE_C_FLAGS="-Ofast -m64 -march=native -mtune=native -flto -funroll-loops -ffunction-sections -fdata-sections -Wl,--gc-sections" \
+        -DCMAKE_CXX_FLAGS="-Ofast -m64 -march=native -mtune=native -flto -funroll-loops -ffunction-sections -fdata-sections -Wl,--gc-sections" \
+        -DCMAKE_INSTALL_PREFIX=./installed .. && \
+    cmake --build . --config Release --target brotlienc
+RUN CONFARGS=$(nginx -V 2>&1 | sed -n -e 's/^.*arguments: //p') cd /usr/src/nginx-$NGINX_VERSION && \
+  ./configure --with-compat $CONFARGS --add-dynamic-module=/ngx_brotli && \
+  make && make install
+
 # production stage
 FROM nginx:1.25.4-alpine
+COPY --from=nginx-mod-stage /usr/local/nginx/modules/ngx_http_brotli_filter_module.so /etc/nginx/modules/ngx_http_brotli_filter_module.so
+COPY --from=nginx-mod-stage /usr/local/nginx/modules/ngx_http_brotli_static_module.so /etc/nginx/modules/ngx_http_brotli_static_module.so
 COPY --from=node-stage /app/dist /usr/share/nginx/html
 COPY --from=node-stage /app/nginx.conf /etc/nginx/conf.d/default.conf
+RUN (echo "load_module modules/ngx_http_brotli_filter_module.so; "; cat /etc/nginx/nginx.conf) > /tmp/nginx.conf && mv /tmp/nginx.conf /etc/nginx/nginx.conf
+RUN (echo "load_module modules/ngx_http_brotli_static_module.so; "; cat /etc/nginx/nginx.conf) > /tmp/nginx.conf && mv /tmp/nginx.conf /etc/nginx/nginx.conf
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -31,26 +31,9 @@ server {
         root   /usr/share/nginx/html;
     }
 
-    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
-    #
-    #location ~ \.php$ {
-    #    proxy_pass   http://127.0.0.1;
-    #}
+    # gzip
+    gzip_static on;
 
-    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
-    #
-    #location ~ \.php$ {
-    #    root           html;
-    #    fastcgi_pass   127.0.0.1:9000;
-    #    fastcgi_index  index.php;
-    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
-    #    include        fastcgi_params;
-    #}
-
-    # deny access to .htaccess files, if Apache's document root
-    # concurs with nginx's one
-    #
-    #location ~ /\.ht {
-    #    deny  all;
-    #}
+    # brotli
+    brotli_static on;
 }

package.json

@@ -54,6 +54,7 @@
     "prettier": "^3.0.3",
     "typescript": "~5.2.0",
     "vite": "^5.2.2",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-vuetify": "^2.0.3",
     "vue-tsc": "^1.8.19",
     "worker-loader": "^3.0.8"

vite.config.ts

@@ -3,12 +3,16 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vuetify from 'vite-plugin-vuetify'
+import viteCompression from 'vite-plugin-compression';
+
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     vuetify({ autoImport: true }),
+    viteCompression(),
+    viteCompression({algorithm: "brotliCompress"}),
   ],
   resolve: {
     alias: {