英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论