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

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

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:

  1. FROM node:16.13.0 AS build-stage
  2. ARG NUXT_ENV_N_API
  3. ARG NUXT_ENV_SETUP
  4. ARG NUXT_ENV_VR_API
  5. WORKDIR /app
  6. COPY . .
  7. RUN npm install
  8. RUN npm run generate
  9. FROM nginx AS runner-stage
  10. COPY --from=build-stage /app/dist /usr/share/nginx/html
  11. COPY --from=build-stage /app/default.conf /etc/nginx/conf.d/default.conf
  12. EXPOSE 80

This is my docker-compose-staging.yml:

  1. version: '3'
  2. services:
  3. frontend:
  4. container_name: frontend
  5. build:
  6. context: .
  7. dockerfile: Dockerfile
  8. ports:
  9. - "3005:80"
  10. volumes:
  11. - /app/node_modules
  12. - .:/app
  13. environment:
  14. NUXT_ENV_SETUP: "staging"
  15. NUXT_ENV_N_API: "staging-url/api"
  16. NUXT_ENV_VR_API: "staging-v-url/api"

This is my docker-compose.yml:

  1. version: '3'
  2. services:
  3. frontend:
  4. container_name: frontend
  5. build:
  6. context: .
  7. dockerfile: Dockerfile
  8. ports:
  9. - "3005:80"
  10. volumes:
  11. - /app/node_modules
  12. - .:/app
  13. environment:
  14. NUXT_ENV_SETUP: "production"
  15. NUXT_ENV_N_API: "production-url/api"
  16. 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:

  1. import packageJSON from './package.json';
  2. export default defineNuxtConfig({
  3. ssr: false,
  4. app: {
  5. head: {
  6. charset: 'utf-8',
  7. viewport: 'width=device-width, initial-scale=1',
  8. link: [
  9. { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  10. ]
  11. }
  12. },
  13. runtimeConfig: {
  14. public: {
  15. baseURL: process.env.NUXT_ENV_N_API || 'production-url/api',
  16. vrUrl: process.env.NUXT_ENV_VR_API || 'production-v-url/api',
  17. setup: process.env.NUXT_ENV_SETUP || 'production',
  18. version: packageJSON.version
  19. }
  20. }
  21. // ...
  22. })

If I log the environment variables using:

  1. console.log('config.public.setup', config.public.setup);
  2. console.log('config.public.baseURL', config.public.baseURL);
  3. 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:

  1. FROM node:16.13.0 AS build-stage
  2. ARG NUXT_ENV_N_API
  3. ARG NUXT_ENV_SETUP
  4. ARG NUXT_ENV_VR_API
  5. WORKDIR /app
  6. COPY . .
  7. RUN npm install
  8. RUN npm run generate
  9. FROM nginx AS runner-stage
  10. COPY --from=build-stage /app/dist /usr/share/nginx/html
  11. COPY --from=build-stage /app/default.conf /etc/nginx/conf.d/default.conf
  12. EXPOSE 80

This is my docker-compose-staging.yml:

  1. version: '3'
  2. services:
  3. frontend:
  4. container_name: frontend
  5. build:
  6. context: .
  7. dockerfile: Dockerfile
  8. ports:
  9. - "3005:80"
  10. volumes:
  11. - /app/node_modules
  12. - .:/app
  13. environment:
  14. NUXT_ENV_SETUP: "staging"
  15. NUXT_ENV_N_API: "staging-url/api"
  16. NUXT_ENV_VR_API: "staging-v-url/api"

This is my docker-compose.yml:

  1. version: '3'
  2. services:
  3. frontend:
  4. container_name: frontend
  5. build:
  6. context: .
  7. dockerfile: Dockerfile
  8. ports:
  9. - "3005:80"
  10. volumes:
  11. - /app/node_modules
  12. - .:/app
  13. environment:
  14. NUXT_ENV_SETUP: "production"
  15. NUXT_ENV_N_API: "production-url/api"
  16. 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:

  1. import packageJSON from './package.json';
  2. export default defineNuxtConfig({
  3. ssr: false,
  4. app: {
  5. head: {
  6. charset: 'utf-8',
  7. viewport: 'width=device-width, initial-scale=1',
  8. link: [
  9. { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  10. ]
  11. }
  12. },
  13. runtimeConfig: {
  14. public: {
  15. baseURL: process.env.NUXT_ENV_N_API || 'production-url/api',
  16. vrUrl: process.env.NUXT_ENV_VR_API || 'production-v-url/api',
  17. setup: process.env.NUXT_ENV_SETUP || 'production',
  18. version: packageJSON.version
  19. }
  20. }
  21. // ...
  22. })

If I log the environment variables using:

  1. console.log('config.public.setup', config.public.setup);
  2. console.log('config.public.baseURL', config.public.baseURL);
  3. 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 被改成了:

  1. ARG NUXT_ENV_N_API
  2. ARG NUXT_ENV_SETUP
  3. ARG NUXT_ENV_VR_API

docker-compose 也被改成了:

  1. build:
  2. context: .
  3. dockerfile: Dockerfile
  4. args:
  5. NUXT_ENV_SETUP: staging
  6. NUXT_ENV_N_API: staging-url/api
  7. 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:

  1. ARG NUXT_ENV_N_API
  2. ARG NUXT_ENV_SETUP
  3. ARG NUXT_ENV_VR_API

and the docker-compose was changed to:

  1. build:
  2. context: .
  3. dockerfile: Dockerfile
  4. args:
  5. NUXT_ENV_SETUP: staging
  6. NUXT_ENV_N_API: staging-url/api
  7. 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:

确定