| Tabla de contenidos |
|---|
...
Parametrización Portal UI
| Advertencia |
|---|
Para añadir nuevas variables a .env, habrá que consultar a MNCS o Aula Virtual, pues es un archivo global del Portal de Servicios. |
En el proyecto de Portal UI, no debemos cambiar el .env salvo que se de permiso para ello.
Será necesario incluir estas dos variables en un archivo .env.local antes de desplegar nuestro proyecto Portal UI en local:
| Bloque de código |
|---|
VUE_APP_API_ENVIRONMENT=https://micampusdesa.um.es
VUE_LOCAL_URL=atica-67-543.atica.um.es |
La primera corresponde a la dirección por la que se proxyfican las llamadas a /api, como las de login, por ejemplo. En la segunda, tenemos que indicar nuestro dominio .um.es, no se puede utilizar localhost. El que hay es sólo un ejemplo, cada uno tendrá que poner el suyo.
Cómo funciona la parametrización en proyectos Vue
Parámetros independientes del entorno de despliegue
Podemos parametrizar nuestra aplicación utilizando variables de entorno, que podemos añadirlas en el archivo
...
.
...
env en la carpeta raiz del proyecto. El archivo, según su nombre, especificará lo siguiente:
| Bloque de código |
|---|
.env # se carga en todos los casos .env.local # se carga en todos los casos, se ignora por git .env.[modo] # se carga sólo en un modo específico .env.[modo].local # se carga sólo en un modo específico, se ignora por git |
Para cambiar el modo, al ejecutar el comando serve o build, tenemos que añadir la opción –mode [modo]. Si lo hacemos desde Visual Studio Code, lo podemos cambiar en package.json.
En caso de haber varios de estos archivos, se cogerá el que más específico sea, por ejemplo, se usará antes env.development que .env.
Dentro de estos archivos, las variables se definen de la forma nombre=valor, teniendo en cuenta que sólo se incluyen las que empiecen por VUE_APP_ por ejemplo:
| Bloque de código |
|---|
VUE_APP_FOO=bar VUE_APP_ |
...
URL=http://loquesea.com
# Podemos incluir otras variables de entorno con $
# Esto resultaría en http://loquesea.com/bar
VUE_APP_COMBINADA = $VUE_APP_URL/$VUE_APP_FOO |
Para utilizar estas variables, se referencian en el código JavaScript con process.env.NOMBRE_VARIABLE.
Como la imagen de la aplicación que se despliega es la misma en los diferentes entornos, no se pueden incluir parámetros dependientes del entorno en el que nos encontremos.
Parámetros dependientes del entorno de despliegue
Los parámetros que dependan del entorno en el que se encuentra la aplicación debemos obtenerlo a través de llamadas al backend. El backend deberá ofrecer un servicio REST para obtener estos parámetros, que podemos almacenar en una tabla que creemos en base de datos.