Search code examples
environment-variablesvuejs3openshiftquasar

Using K8s Secrets for Quasar Vue3 App Values

I am BRAND new to Quasar Vue3 apps(DevOps helping dev team). We use GitLab for our CICD pipelines and our apps run on OpenShift containers. We also use OpenShift secrets for populating the environment variables for each environment(envFrom) when the container starts. However, we are having a hard time figuring out how to do this with a new Quasar Vue3 app. We've gone through various iterations found on "Google University" and Quasar's documentation, but nothing has helped. We've tried the method of using process.env in the quasar.config.js file:

env: { 
        myVar: process.env.VUE_APP_VARIABLE 
      }

However, that seems to be a build-time method and only uses a dummy value we've put into a GitLab CICD variable for testing.

I've also tried the method of using a .js script file defining a function:

export default function getEnv(name) {
    return process.env[name];
}

And then importing and calling that function in the MainLayout.vue file:

import getEnv from '../service/env.js'

return {
  .
  .
  myVar: getEnv("VUE_APP_VARIABLE")
}

That works if I return hard-coded string from the script(eg: return "ValueFromScript";), but if I try to return using process.env at all with varied syntaxes, I get blank/null values

return process.env[name];
return process.env."name";
return process.env.VUE_APP_VARIABLE;
return process.env["VUE_APP_VARIABLE"];
etc.

Lastly, we've experemented with the "dotenv" method described here, but that only reads from a .env file.

Can anyone tell me what I'm missing or if this is even possible? I really want to avoid using .env files, it's really not the best practice for production applications.

Thanks.

Solution

  • Working with our Devs, we came up with a way to setup and use values from OpenShift secrets as environment variables at RUNTIME(should work for K8s in general). I've seen bits and pieces of this in my searches, hopefully I can lay it out in a cohesive format for others that might have the same application requirement.

    PreSetup

    1. Create a .sh script file somewhere in your src directory that defines a "getEnv" function as follows. We created a folder for this at src/service:

    env.js

    export default function getEnv(name) {
    return window?.configs?.[name] || process.env[name];
}
    1. Create another .sh script file that writes a json string to another script file to be used later in your code.
      This will create another script file dynamically when the container starts up as you will see in later steps.

    get-env-vars.sh

    JSON_STRING='window.configs = {
    "ENV_VAR1": "'"${SECRET_VAR1}"'",
    "ENV_VAR2": "'"${SECRET_VAR2}"'"
  }'

  echo $JSON_STRING >> src/service/config_vars.js

    Implementation

    • In your Dockerfile, add a COPY layer to copy the get-env-vars.sh script to the /docker-entrypoint.d folder.
      If you aren't familiar with the docker-entrypoint.d folder; basically, as the container starts up, it will run any .sh file that is located in this folder.

    COPY ./get-config-vars.sh /docker-entrypoint.d

    • Then, in our main index.html file, add the following in the main <head> section to reference/call the script file created by the get-env-vars.sh script at startup:

    <script src="/service/config_vars.js"></script>

    At this point, we now have a "windows.config" JSON object variable ready for the getEnv() function to pull values from when called.

    • Wherever you need to be utilizing any of these variables, import the env.js file created earlier to import getEnv() function.

    import getEnv from "../service/env.js"

    Then simply use the function like you would a variable anywhere else. getEnv("VAR1")

    Summary

    As an overview here is the workflow the container executes when it is scheduled/started in your K8s environment

    1. Container is scheduled and executes the get-env-vars.sh script, which creates the config_vars.js file
    2. Application starts up. The index.html file executes the config_vars.js file, creating the window.configs JSON object variable
    3. Where needed, the code imports the getEnv() function by importing the env.js file
    4. Calling the getEnv(<variable_name>) function retrieves the value for the specified environment variable from the JSON object variable

    When you need to add/update the key-value pairs in your K8s/OpenShift secret, you can delete/restart your POD, which will start the process over, loading in the updated information.

    Hopefully this all makes sense.