How I set the env variables in vuejs3 at the runtime as non-root user?

Question

i want to set the env variables at the runtime. I want to set my variables if i start my docker nginx-container (I developed the web-app via vuejs3). But i also want to start the nginx container as non-root and if i do that, it´s impossible to start the container because i dont have the permissions. It´s important to set the nginx user as non-root. maybe anybody can help me?

I have a shell script (substitute_environment_variables.sh) in my vuejs3 root directory:

#!/bin/sh

ROOT_DIR=/client

# Replace env vars in files served by NGINX
for file in $ROOT_DIR/js/*.js* $ROOT_DIR/index.html;
do
  sed -i 's|VUE_APP_URL_KEYCLOAK_PLACEHOLDER|'${VUE_APP_URL_KEYCLOAK}'|g' $file
  sed -i 's|VUE_APP_KEYCLOAK_REALM_PLACEHOLDER|'${VUE_APP_KEYCLOAK_REALM}'|g' $file
  sed -i 's|VUE_APP_KEYCLOAK_CLIENT_ID_PLACEHOLDER|'${VUE_APP_KEYCLOAK_CLIENT_ID}'|g' $file
  # Your other variables here...
done
# Starting NGINX
nginx -g 'daemon off;'

And I also have a .env.production file in the vuejs3 root directory:

VUE_APP_URL_KEYCLOAK=VUE_APP_URL_KEYCLOAK_PLACEHOLDER
VUE_APP_KEYCLOAK_REALM=VUE_APP_KEYCLOAK_REALM_PLACEHOLDER
VUE_APP_KEYCLOAK_CLIENT_ID=VUE_APP_KEYCLOAK_CLIENT_ID_PLACEHOLDER

My nginx.conf in the vuejs3 root directory looks like this:

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  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;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       3000;
    server_name  localhost;
    location / {
      root   /client;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

And this is my dockerfile:

FROM node:16.11.1-alpine3.14 as builder
COPY --chown=node src /client/src
COPY --chown=node public /client/public
COPY --chown=node package.json /client/
COPY --chown=node vue.config.js /client/
COPY --chown=node babel.config.js /client/
COPY --chown=node node_modules /client/node_modules/
USER root
WORKDIR /client
COPY package.json /client/package.json
RUN npm install
COPY --chown=node . /client
RUN npm run build
USER node

FROM builder as tester
USER node
COPY --chown=node .eslintrc.json /client/
WORKDIR /client
ENTRYPOINT ["./node_modules/.bin/eslint", "."]

FROM nginx:1.23.4-alpine as publisher
RUN mkdir /client

RUN chown -R nginx:nginx /var/cache/nginx && \
    chown -R nginx:nginx /var/log/nginx && \
    chown -R nginx:nginx /etc/nginx/conf.d

RUN touch /var/run/nginx.pid && \
    chown -R nginx:nginx /var/run/nginx.pid


COPY --from=builder /client/dist /client
COPY nginx.conf /etc/nginx/nginx.conf
# Overriding the default NGINX container behavior
COPY ./substitute_environment_variables.sh /substitute_environment_variables.sh
RUN chmod +x /substitute_environment_variables.sh
ENTRYPOINT ["/substitute_environment_variables.sh"]
# USER nginx

If i set the user to nginx (non-root) it's impossible to set the .env variables at the runtimer or if i start the container. I want to get this env variables in the main.js.

I already read this article, but it was not really helpfully: https://medium.com/js-dojo/vue-js-runtime-environment-variables-807fa8f68665

thanks in advance :)