Closed
Description
Hey, nice project.
I just saw that in your docker image, you use the image nginx:alpine, that's very nice it's a lightweight image but you download nodejs + npm and you leave them in the final image. This create a heavy docker image with a lot of useless content (nodejs + npm are not used during runtime). You should avoid that. I saw two easy solutions:
- Convert your two node script as shell script and run it without download anything from internet. Any LLM can do the transformation easily.
- Use an intermediary image to run your scripts and copy/past the modified files into a fresh
nginx:alpineimage.
Example for 1:
environment.common.sh
#!/bin/bash
INDEX_PATH="/usr/share/nginx/html/index.html"
SW_PATH="/usr/share/nginx/html/service-worker.js"
[[ ! -f "$INDEX_PATH" ]] && { echo "Error: File not found at $INDEX_PATH"; exit 1; }
INDEX_CONTENT=$(<"$INDEX_PATH")
SW_CONTENT=$(<"$SW_PATH")
VERSION=$(echo "$SW_CONTENT" | grep -oP 'const APP_VERSION = [\x27\x22](.*?)[\x27\x22]' | cut -d\' -f2 | cut -d\" -f2)
[[ -z "$VERSION" ]] && { echo "Error: APP_VERSION not found in $SW_PATH"; exit 1; }
VERSION_TAG="<span>•</span><span>$VERSION</span>"
UPDATED_CONTENT=$(echo "$INDEX_CONTENT" | sed "s|<!-- app-version-placeholder -->|$VERSION_TAG|")
echo "$UPDATED_CONTENT" > "$INDEX_PATH"environment.production.sh
#!/bin/bash
INDEX_PATH="/usr/share/nginx/html/index.html"
[[ ! -f "$INDEX_PATH" ]] && { echo "Error: File not found at $INDEX_PATH"; exit 1; }
INDEX_CONTENT=$(<"$INDEX_PATH")
if [[ "$ENVIRONMENT" == "production" ]]; then
METATAGS=$(cat <<EOF
<meta name="robots" content="index, follow">
<meta name="author" content="MAZANOKE">
<meta property="og:title" content="MAZANOKE | Online Image Optimizer That Runs Privately in Your Browser">
<meta property="og:description" content="Optimize images locally and privately by converting and compressing them offline in your browser. Supports JPG, PNG, WebP, HEIC, AVIF, GIF, SVG.">
<meta property="og:url" content="https://www.mazanoke.com">
<meta property="og:image" content="https://mazanoke.com/assets/images/og-image.jpg">
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:type" content="website">
<meta property="og:site_name" content="MAZANOKE | Online Image Optimizer That Runs Privately in Your Browser">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="MAZANOKE | Online Image Optimizer That Runs Privately in Your Browser">
<meta name="twitter:description" content="Optimize images locally and privately by converting and compressing them offline in your browser. Supports JPG, PNG, WebP, HEIC, AVIF, GIF, SVG.">
<meta name="twitter:image" content="https://mazanoke.com/assets/images/og-image.jpg">
<link rel="canonical" href="https://www.mazanoke.com">
<meta name="keywords" content="online image optimizer, image compression, local image processing, offline image optimizer, private image optimizer, convert svg, convert heic, convert png, convert jpg, convert gif">
EOF
)
INDEX_CONTENT=$(echo "$INDEX_CONTENT" | sed 's|<meta name="robots" content="noindex, nofollow">|'"$METATAGS"'|')
fi
echo "$INDEX_CONTENT" > "$INDEX_PATH"Example for 2:
FROM nginx:alpine AS prepare
COPY ./index.html /usr/share/nginx/html/index.html
COPY ./assets /usr/share/nginx/html/assets
COPY ./favicon.ico /usr/share/nginx/html
COPY ./manifest.json /usr/share/nginx/html
COPY ./service-worker.js /usr/share/nginx/html
RUN apk add --no-cache nodejs npm
WORKDIR /scripts
RUN npm init -y
RUN npm install dotenv
COPY ./scripts /scripts
COPY .env /scripts/.env
RUN node /scripts/environment.common.js
RUN node /scripts/environment.prod.js
FROM nginx:alpine
COPY --from=prepare /usr/share/nginx/html /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
NB: The examples can be broken, I do it from scratch without testing but the base is here.