Isabel, parte de nuestro equipo de trabajo, nos ha hecho el favor de escribir esta sección ya que domina perfectamente el tema.
Solución:
crear un archivo config.js con su configuración deseada. Lo usaremos más adelante para crear un mapa de configuración que implementaremos en Kubernetes. Póngalo en su proyecto Vue.js donde están sus otros archivos JavaScript. Aunque lo excluiremos más adelante de la minificación, es útil tenerlo allí para que las herramientas del IDE funcionen con él.
const config = (() =>
return
"VUE_APP_ENV_MyURL": "...",
;
)();
Ahora asegúrese de que su secuencia de comandos esté excluida de la minificación. Para hacer eso, cree un archivo vue.config.js con el siguiente contenido que conserva nuestro archivo de configuración.
const path = require("path");
module.exports =
publicPath: '/',
configureWebpack:
module:
rules: [
test: /config.*config.js$/,
use: [
loader: 'file-loader',
options:
name: 'config.js'
,
]
]
En su index.html, agregue un bloque de script para cargar el archivo de configuración manualmente. Tenga en cuenta que el archivo de configuración no estará allí porque lo excluimos. Posteriormente lo montaremos desde un ConfigMap en nuestro contenedor. En este ejemplo, asumimos que lo montaremos en el mismo directorio que nuestro documento HTML.
Cambie su código para usar nuestra configuración de tiempo de ejecución:
this.displayURL = config.VUE_APP_ENV_MyURL || process.env.VUE_APP_ENV_MyURL
En Kubernetes, cree un mapa de configuración que use el contenido de su archivo de configuración. Por supuesto, desea leer el contenido de su archivo de configuración.
apiVersion: v1
kind: ConfigMap
metadata:
...
data:
config.js: |
var config = (() =>
return
"VUE_APP_ENV_MyURL": "...",
;
)();
Haga referencia al mapa de configuración en su implementación. Esto monta el mapa de configuración como un archivo en su contenedor. los mountPath Ya contiene nuestro index.html minificado. Montamos el archivo de configuración al que hicimos referencia antes.
apiVersion: apps/v1
kind: Deployment
metadata:
...
spec:
...
template:
...
spec:
volumes:
- name: config-volume
configMap:
name: ...
containers:
- ...
volumeMounts:
- name: config-volume
mountPath: /usr/share/nginx/html/config.js
subPath: config.js
Ahora puede acceder al archivo de configuración en
estoy agregando mi solución de trabajo aquí, para aquellos que todavía tienen problemas. Creo que la respuesta de @Hendrik M Halkow es más elegante, aunque no pude resolverlo usando eso, simplemente por mi falta de experiencia en webpack y Vue. Simplemente no pude averiguar dónde poner el archivo de configuración y cómo referirlo.
Mi enfoque es hacer uso de las variables de entorno con constantes (valores ficticios) para construirlo para productionluego reemplace esas constantes en la imagen usando un personalizado entrypoint texto. La solución es así.
He encapsulado todas las configuraciones en un archivo llamado app.config.js
export const clientId = process.env.VUE_APP_CLIENT_ID
export const baseURL = process.env.VUE_APP_API_BASE_URL
export default
clientId,
baseURL,
Esto se usa en el proyecto simplemente buscando el valor del archivo de configuración.
import baseURL from '@/app.config';
Entonces estoy usando estándar .env.[profile] archivos para establecer variables de entorno. por ejemplo, el .env.development
VUE_APP_API_BASE_URL=http://localhost:8085/radar-upload
VUE_APP_CLIENT_ID=test-client
Entonces para producción lo puse string constantes como valores. por ejemplo, el .env.production
VUE_APP_API_BASE_URL=VUE_APP_API_BASE_URL
VUE_APP_CLIENT_ID=VUE_APP_CLIENT_ID
Por favor, no aquí el valor puede ser único. string. Solo para mantener la legibilidad más fácil, solo estoy reemplazando el nombre de la variable de entorno como el valor. Esto solo se compilará y empaquetará de manera similar al modo de desarrollo.
En mi Dockerfileagrego un entrypoint que puede leer esas constantes y reemplazarlas con valores de variables de entorno.
Mi Dockerfile se ve así (esto es bastante estándar)
FROM node:10.16.3-alpine as builder
RUN mkdir /app
WORKDIR /app
COPY package*.json /app/
RUN npm install
COPY . /app/
RUN npm run build --prod
FROM nginx:1.17.3-alpine
# add init script
COPY ./docker/nginx.conf /etc/nginx/nginx.conf
WORKDIR /usr/share/nginx/html
COPY --from=builder /app/dist/ .
COPY ./docker/entrypoint.sh /entrypoint.sh
# expose internal port:80 and run init.sh
EXPOSE 80
ENTRYPOINT ["/entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]
Luego crea un ./docker/punto de entrada.sh archivo como se muestra a continuación.
#!/bin/sh
ROOT_DIR=/usr/share/nginx/html
# Replace env vars in JavaScript files
echo "Replacing env constants in JS"
for file in $ROOT_DIR/js/app.*.js* $ROOT_DIR/index.html $ROOT_DIR/precache-manifest*.js;
do
echo "Processing $file ...";
sed -i 's|VUE_APP_API_BASE_URL|'$VUE_APP_API_BASE_URL'|g' $file
sed -i 's|VUE_APP_CLIENT_ID|'$VUE_APP_CLIENT_ID'|g' $file
done
echo "Starting Nginx"
nginx -g 'daemon off;'
Esto me permite tener una imagen configurable en tiempo de ejecución que puedo ejecutar en muchos entornos. Sé que es un poco un truco. Pero he visto a muchas personas hacerlo de esta manera.
Espero que esto ayude a alguien.
Tuve el mismo problema en mi proyecto actual y descubrí que no es posible acceder a las variables de entorno en tiempo de ejecución en este momento, así que termino con la solución de crear archivos .env o variables de entorno locales que, como dijiste, se utilizan en el momento de la construcción.
Reseñas y puntuaciones de la guía
Si haces scroll puedes encontrar las ilustraciones de otros usuarios, tú igualmente puedes insertar el tuyo si dominas el tema.