在一个VueJs3 + Nuxt3应用中使用环境变量时出现的问题。

huangapple go评论127阅读模式
英文:

Problem using environment variables in a VueJs3 + Nuxt3 application

问题

I have a Vue.js 3 + Nuxt.js 3 app built, and we have 2 environments: STAGING and PRODUCTION. I am trying to set things up so that our pipeline can build the app every time we push changes to the Staging or Main branches.

I have the following Dockerfile:

FROM node:16.13.0 AS build-stage

ARG NUXT_ENV_N_API
ARG NUXT_ENV_SETUP
ARG NUXT_ENV_VR_API

WORKDIR /app

COPY . .

RUN npm install
RUN npm run generate

FROM nginx AS runner-stage

COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY --from=build-stage /app/default.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

This is my docker-compose-staging.yml:

version: '3'
services:
  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3005:80"
    volumes:
      - /app/node_modules
      - .:/app
    environment:
      NUXT_ENV_SETUP: "staging"
      NUXT_ENV_N_API: "staging-url/api"
      NUXT_ENV_VR_API: "staging-v-url/api"

This is my docker-compose.yml:

version: '3'
services:
  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3005:80"
    volumes:
      - /app/node_modules
      - .:/app
    environment:
      NUXT_ENV_SETUP: "production"
      NUXT_ENV_N_API: "production-url/api"
      NUXT_ENV_VR_API: "production-v-url/api"

According to our DevOps guy, these are our environment variables on AWS:

STAGING:

  • NUXT_ENV_N_API: staging-url/api
  • NUXT_ENV_SETUP: staging
  • NUXT_ENV_VR_API: staging-v-url/api

PRODUCTION:

  • NUXT_ENV_N_API: production-url/api
  • NUXT_ENV_SETUP: production
  • NUXT_ENV_VR_API: production-v-url/api

In my nuxt.config.ts file:

import packageJSON from './package.json';

export default defineNuxtConfig({
  ssr: false,
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      ]
    }
  },
  runtimeConfig: {
    public: {
      baseURL: process.env.NUXT_ENV_N_API || 'production-url/api',
      vrUrl: process.env.NUXT_ENV_VR_API || 'production-v-url/api',
      setup: process.env.NUXT_ENV_SETUP || 'production',
      version: packageJSON.version
    }
  }
  // ...
})

If I log the environment variables using:

console.log('config.public.setup', config.public.setup);
console.log('config.public.baseURL', config.public.baseURL);
console.log('config.public.vrUrl', config.public.vrUrl);

Only the default values declared in the nuxt.config.ts file are shown, and not the environment variables.

Do I need to do any other setup to fix this?

英文:

I have a Vue.js 3 + Nuxt.js 3 app built, and we have 2 environments: STAGING and PRODUCTION. I am trying to set things up so that our pipeline can build the app every time we push changes to the Staging or Main branches.

I have the following Dockerfile:

FROM node:16.13.0 AS build-stage

ARG NUXT_ENV_N_API
ARG NUXT_ENV_SETUP
ARG NUXT_ENV_VR_API

WORKDIR /app

COPY . .

RUN npm install
RUN npm run generate

FROM nginx AS runner-stage

COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY --from=build-stage /app/default.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

This is my docker-compose-staging.yml:

version: '3'
services:
  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3005:80"
    volumes:
      - /app/node_modules
      - .:/app
    environment:
      NUXT_ENV_SETUP: "staging"
      NUXT_ENV_N_API: "staging-url/api"
      NUXT_ENV_VR_API: "staging-v-url/api"

This is my docker-compose.yml:

version: '3'
services:
  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3005:80"
    volumes:
      - /app/node_modules
      - .:/app
    environment:
      NUXT_ENV_SETUP: "production"
      NUXT_ENV_N_API: "production-url/api"
      NUXT_ENV_VR_API: "production-v-url/api"

According to our DevOps guy, these are our environment variables on AWS:

STAGING:

  • NUXT_ENV_N_API: staging-url/api
  • NUXT_ENV_SETUP: staging
  • NUXT_ENV_VR_API: staging-v-url/api

PRODUCTION:

  • NUXT_ENV_N_API: production-url/api
  • NUXT_ENV_SETUP: production
  • NUXT_ENV_VR_API: production-v-url/api

In my nuxt.config.ts file:

import packageJSON from './package.json';

export default defineNuxtConfig({
  ssr: false,
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      ]
    }
  },
  runtimeConfig: {
    public: {
      baseURL: process.env.NUXT_ENV_N_API || 'production-url/api',
      vrUrl: process.env.NUXT_ENV_VR_API || 'production-v-url/api',
      setup: process.env.NUXT_ENV_SETUP || 'production',
      version: packageJSON.version
    }
  }
  // ...
})

If I log the environment variables using:

console.log('config.public.setup', config.public.setup);
console.log('config.public.baseURL', config.public.baseURL);
console.log('config.public.vrUrl', config.public.vrUrl);

Only the default values declared in the nuxt.config.ts file are shown, and not the environment variables.

Do I need to do any other setup to fix this?

答案1

得分: 0

我觉得我刚刚找到了解决方案。Nuxt 使用 ARG 而不是 ENV。所以我的 Dockerfile 被改成了:

ARG NUXT_ENV_N_API 
ARG NUXT_ENV_SETUP 
ARG NUXT_ENV_VR_API 

docker-compose 也被改成了:

build: 
  context: . 
  dockerfile: Dockerfile 
  args: 
    NUXT_ENV_SETUP: staging 
    NUXT_ENV_N_API: staging-url/api 
    NUXT_ENV_VERUM_API: staging-v-url ... 

然后 "environment:" 声明被移除。

英文:

I think I've just found the solution. Nuxt uses ARG instead of ENV. So my Dockerfile was changed to:

ARG NUXT_ENV_N_API 
ARG NUXT_ENV_SETUP 
ARG NUXT_ENV_VR_API 

and the docker-compose was changed to:

build: 
  context: . 
  dockerfile: Dockerfile 
  args: 
    NUXT_ENV_SETUP: staging 
    NUXT_ENV_N_API: staging-url/api 
    NUXT_ENV_VERUM_API: staging-v-url ... 

and the "environment:" declaration was removed.

huangapple
  • 本文由 发表于 2023年8月10日 23:16:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76877120.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定