How pass dynamically aa env value to proxy library on nuxt config

[viniciuspinatti]

Hey guys!

I'm having some issues with a Nuxt 3 application. I'm migrating an app from Nuxt 2 to Nuxt 3 and I had some problems with websocket. But I solved it using the module @nuxt-alt/proxy. My problem is I can't use the env vars NUXT_PUBLIC_BROWSER_BASE_URL and NUXT_PUBLIC_WS_BASE_URL to set the target in proxy library config. They only work in runtimeConfig, and the code below doesn't work for proxy configuration when I build to prod (I got an empty value for both targets).

export default defineNuxtConfig({
  modules: [
    '@nuxt-alt/proxy',
    ...
  ],
  runtimeConfig: {
    internalApiKey: process.env.NUXT_INTERNAL_API_KEY,
    public: {
      browserBaseURL: process.env.NUXT_PUBLIC_BROWSER_BASE_URL,
      environment: process.env.NUXT_PUBLIC_ENVIRONMENT,
      wsBaseUrl: process.env.NUXT_PUBLIC_WS_BASE_URL,
    },
  },
  proxy: {
    debug: false,
    experimental: {
      listener: true,
    },
    proxies: {
      '/api': {
        target: process.env.NUXT_PUBLIC_BROWSER_BASE_URL,
        changeOrigin: true,
        ws: false,
      },
      '/ws': {
        target: process.env.NUXT_PUBLIC_WS_BASE_URL,
        changeOrigin: true,
        ws: true,
      },
    },
  },
  ...
})

But if I change the target to a literal url string (example below), then both start to work.

  proxy: {
    debug: false,
    experimental: {
      listener: true,
    },
    proxies: {
      '/api': {
        target: 'https://my-api-url.com',
        changeOrigin: true,
        ws: false,
      },
      '/ws': {
        target: 'wss://my-api-url.com',
        changeOrigin: true,
        ws: true,
      },
    },
  },

I cannot use a fixed value. I need to use environment config because I get the values from AWS SSM parameters for each environment (dev, demo, prod) in my AWS container task.
I already tried to use VITE_ vars with import.meta.env but it didn't work.
I also tried to create a module file to get the values from runtime config (example below).

// proxy.ts on modules directory
import { defineNuxtModule, installModule } from '@nuxt/kit'

export default defineNuxtModule({
  async setup(options, nuxt) {
    await installModule(
      '@nuxt-alt/proxy',
      {
        debug: false,
        experimental: {
          listener: true,
        },
        proxies: {
          '/api': {
            target: nuxt.options.runtimeConfig.public.browserBaseURL,
            changeOrigin: false,
            ws: false,
          },
          '/ws': {
            target: nuxt.options.runtimeConfig.public.wsBaseUrl,
            changeOrigin: false,
            ws: true,
          },
        },
      }
    )
  },
})

I didn't have success yet. Then only way that it worked was putting the hard code URL string.
Note: the values are being detected from the environment because I checked that runtimeConfig values are being populated correctly.
I'm open to any solution or idea to avoid put a fixed value there.

[jwhazel]

Where does your application get built (GitHub actions, Jenkins, CodePipeline, etc)?

[viniciuspinatti]

On Gitlab. There is a job in a pipeline that creates the AWS infra and the ECS tasks executing a AWS cloudformation json. The task has the container with the environment variables and secrets. Something like this:

"TaskDefinitionApp": {
    "Type": "AWS::ECS::TaskDefinition",
    "Properties": {
      "ContainerDefinitions": [
        {
          "Cpu": 1024,
          "DisableNetworking": false,
          "Environment": [
            {
              "Name": "NUXT_PUBLIC_ENVIRONMENT",
              "Value": { "Ref": "SecretsEnvironment" }
            }
          ],
          "Secrets": [
            {
              "Name": "NUXT_PUBLIC_BROWSER_BASE_URL",
              "ValueFrom": {"Fn::Sub": "arn:aws:ssm:${AWS::Region}:${AWS::AccountId}:parameter/config/app_${SecretsEnvironment}/api.base.url"}
            },
            {
              "Name": "NUXT_PUBLIC_WS_BASE_URL",
              "ValueFrom": { "Fn::Sub": "arn:aws:ssm:${AWS::Region}:${AWS::AccountId}:parameter/config/app_${SecretsEnvironment}/ws.base.url" }
            }
          ],
          "Essential": true,
          "Image": { "Ref": "MyAppImage" },
          "Memory": 2048,
          "Name": "my-app-name",
          "PortMappings": [{ "ContainerPort": 3000, "Protocol": "tcp" }]
        }
      ],
      "Cpu": "1024",
      "ExecutionRoleArn": { "Ref": "TaskExecutionRoleArn" },
      "Family": {
        "Fn::Sub": "my-app-name-task-${EnvironmentName}"
      },
      "Memory": "2048",
      "NetworkMode": "awsvpc"
    }
  }

[jwhazel]

It looks to me like you’re setting env variables as part of your infrastructure. Nuxt 3 consumes env variables at build time, not at runtime.

[viniciuspinatti]

But how then the runtimeConfig values are being populated correctly? The browserBaseURL, environment and wsBaseUrl are receiving the correct value and there is no .env file with values to populate them. This is what I didn't understand.