Change nginx to get env in runtime

.env.example

@@ -1,3 +1,10 @@
+NODE_RELEASE=22
+NGINX_RELEASE=1.27-alpine-slim
+FRONTEND_COMPOSE_NAME=frontend-compose
+API_PORT=3000
+API_HOST=api-host-or-docker-container-name
+DEPLOY_BRANCH=master
+
 VITE_DEPLOY_HOSTNAME=my-domain.com
 VITE_HTTPS=true
 VITE_DEV_API_PROXY_URL=http://localhost:9000

.gitignore

@@ -95,6 +95,7 @@ docs
 # Nuxt.js build / generate output
 .nuxt
 dist
+container-dist
 
 # Gatsby files
 .cache/

.prettierignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+container-dist
 dist-ssr
 *.local
 

.stylintignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+container-dist
 dist-ssr
 *.local
 

docker-deploy/Dockerfile

@@ -1,48 +1,28 @@
 ARG NGINX_RELEASE
 ARG NODE_RELEASE
 
-FROM node:${NODE_RELEASE:-18} as build
+FROM node:${NODE_RELEASE:-22} as build
 ARG DEBIAN_FRONTEND=noninteractive
 USER root
 
 # copy project to workdir
 COPY .. /home/node/front
 WORKDIR /home/node/front
 
-# install envsubst
-RUN apt-get update -y && apt-get install --no-install-recommends -y \
-    gettext-base
+#install anything you want
+#RUN apt-get update -y && apt-get install --no-install-recommends -y \
+#   anything-you-want
 
 # build project - create static dist files
 RUN yarn
-RUN yarn dist
-
-# substitute env variables into nginx.conf
-# you can add any your variables that you need to substitute into nginx.conf
-ARG DOMAIN_URL
-ARG API_HOST
-ARG API_PORT
-RUN export DOMAIN_URL=${DOMAIN_URL} && \
-    export API_HOST=${API_HOST} && \
-    export API_PORT=${API_PORT} && \
-    export DOLLAR="$" && \
-    envsubst < /home/node/front/docker-deploy/nginx/nginx.conf > /home/node/front/docker-deploy/nginx/_nginx-substituted.conf && \
-    cd /home/node/front/docker-deploy/nginx/locations/http && \
-    mkdir /home/node/front/docker-deploy/nginx/locations/_http-substituted && \
-    for file in *; do envsubst < $file > ../_http-substituted/$file; done && \
-    cd /home/node/front/docker-deploy/nginx/locations/https && \
-    mkdir /home/node/front/docker-deploy/nginx/locations/_https-substituted && \
-    for file in *; do envsubst < $file > ../_https-substituted/$file; done
-
+RUN yarn build
 
 # Finally - get only needed files from previous build stage. Static files + config
 FROM nginx:${NGINX_RELEASE:-1.27-alpine-slim}
 
 #install nginx modules
 #RUN apt-get update -y && apt-get install  --no-install-recommends -y \
-#    nginx-plus-module-brotli
+#   nginx-plus-module-brotli
 
 COPY --from=build /home/node/front/dist /frontend-dist
-COPY --from=build /home/node/front/docker-deploy/nginx/_nginx-substituted.conf /etc/nginx/nginx.conf
-COPY --from=build /home/node/front/docker-deploy/nginx/locations/_http-substituted /etc/nginx/include_locations/http
-COPY --from=build /home/node/front/docker-deploy/nginx/locations/_https-substituted /etc/nginx/include_locations/https
+COPY --from=build /home/node/front/docker-deploy/nginx/templates /etc/nginx/templates

docker-deploy/docker-compose.template.yaml

@@ -9,17 +9,18 @@ services:
       args:
         - NGINX_RELEASE
         - NODE_RELEASE
-        - DOMAIN_URL
-        - API_HOST
-        - API_PORT
     volumes:
-      - ./dist:/usr/share/nginx/html:rw
+      - ./container-dist:/frontend-dist:rw
       - ./certbot/www:/var/www/certbot/:ro
       - ./certbot/conf/:/etc/nginx/ssl/:ro
     ports:
       - '80:80'
       - '443:443'
       - '${API_PORT}:${API_PORT}'
+    environment:
+      - DOMAIN_URL=${VITE_DEPLOY_HOSTNAME}
+      - API_PORT
+      - API_HOST
     networks:
       - external-front-back
       - default

docker-deploy/nginx/nginx.conf → docker-deploy/nginx/templates/default.conf.template

@@ -14,9 +14,9 @@ events {
 }
 
 http {
-    log_format  main  '${DOLLAR}remote_addr - ${DOLLAR}remote_user [${DOLLAR}time_local] "${DOLLAR}request" '
-                      '${DOLLAR}status ${DOLLAR}body_bytes_sent "${DOLLAR}http_referer" '
-                      '"${DOLLAR}http_user_agent" "${DOLLAR}http_x_forwarded_for"';
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
 
     access_log  /var/log/nginx/access.log  main;
 
@@ -39,7 +39,7 @@ http {
 
         include /etc/nginx/include_locations/http/*.conf;
 
-        return 301 https://${DOLLAR}host${DOLLAR}request_uri;  # redirect on https
+        return 301 https://$host$request_uri;  # redirect on https
     }
 
     server {

docker-deploy/nginx/locations/https/frontend.conf → docker-deploy/nginx/templates/locations/https/frontend.conf.template

@@ -5,15 +5,15 @@ location ~* ^/api(/.*)? {  # proxy to API
     proxy_pass http://${API_HOST}:${API_PORT};
 }
 location / {  # try files for SPA
-    try_files ${DOLLAR}uri ${DOLLAR}uri/ ${DOLLAR}uri.html /index.html;
+    try_files $uri $uri/ $uri.html /index.html;
 }
 
-location ~* \.(?:css|js)${DOLLAR} {  # 1h storing on client for CSS+JS
+location ~* \.(?:css|js)$ {  # 1h storing on client for CSS+JS
     expires 1h;
     add_header Cache-Control "public";
 }
 
-location ~* \.(?:json|png|jpg|jpeg|gif|svg|ico|ttf|otf)${DOLLAR} {  # 7d storing on client for static images+fonts
+location ~* \.(?:json|png|jpg|jpeg|gif|svg|ico|ttf|otf)$ {  # 7d storing on client for static images+fonts
     expires 7d;
     add_header Cache-Control "public";
 }

docker-deploy/scripts/setup-env-file.sh

@@ -1,12 +1,12 @@
-cp --no-clobber ./docker-deploy/.env.example ./docker-deploy/.env
+cp --no-clobber .env.example .env
 echo ""
 echo "Edit .env file."
-echo "Write right DOMAIN_URL without https:// and url paths!"
+echo "Write right VITE_DEPLOY_HOSTNAME without https:// and url paths!"
 echo "Set right API_HOST - it's host of backend. If backend deployed in local docker - it's the name of docker container"
 echo "Set right API_PORT - it's port of backend"
 echo "[press Enter...]"
 read ENTER
-nano ./docker-deploy/.env
+nano .env
 
 echo ""
 echo "Is your backend deployed on this computer or docker-cluster in docker container? (y/N): "

docker-deploy/scripts/update-deploy.sh

@@ -1,8 +1,8 @@
 git fetch --all
-git reset --hard "origin/$(. "docker-deploy/.env"; echo "$DEPLOY_BRANCH")"
+git reset --hard "origin/$(. ".env"; echo "$DEPLOY_BRANCH")"
 echo "Deploying last commit:"
 git log --oneline -1
 cd docker-deploy || exit
-docker compose down
-docker compose up -d nginx --build
+docker compose --env-file ../.env down
+docker compose --env-file ../.env up -d nginx --build
 echo "Frontend updated successfully"

eslint.config.mjs

@@ -45,7 +45,7 @@ export default [
 
   {
     name: 'Global ignores',
-    ignores: ['dist/', 'coverage/', 'docs/'],
+    ignores: ['dist/', 'container-dist/', 'certbot/', 'coverage/', 'docs/'],
   },
 
   // Custom setup