Nuxt.js runtimeConfigの値がundefinedになる
//
あらまし
コンテナ化して、docker-compose
でnuxtjs
製のアプリケーションを実行しようとしています。
その際、nuxtjs
の機能であるruntimeConfig
を使用して、ランタイムで環境変数を渡そうとした時に、上手く値が渡せずundefined
が渡されていました。
症状
例えば、以下のように環境変数を読ませようとします。
# nuxt.config.js publicRuntimeConfig: { baseURL: process.env.BASE_URL || "https://localhost:3000" },
これをどうにか呼び出した時にundefined
が返ってきます。
const baseURL = context.$config.baseURL ## => undefined
Dockerfile
はこんな感じ
FROM node:16-alpine AS deps RUN apk update && \ apk upgrade && \ apk add --no-cache make gcc g++ py-pip WORKDIR /app COPY package.json yarn.lock ./ RUN yarn install --frozen-lockfile FROM node:16-alpine AS builder WORKDIR /app COPY . . COPY --from=deps /app/node_modules ./node_modules RUN yarn build && yarn install --production --ignore-scripts --prefer-offline FROM node:16-alpine AS runner WORKDIR /app ENV NODE_ENV production ENV NUXT_TELEMETRY_DISABLED 1 ENV HOST_ENV production ENV BASE_URL http://localhost:1212 ENV KUBE_API_SERVER_URL http://localhost:3131 RUN addgroup -g 1001 -S nodejs RUN adduser -S nuxtjs -u 1001 COPY --from=builder ./app/package.json ./ COPY --from=builder ./app/node_modules ./node_modules/ COPY --from=builder ./app/.nuxt ./.nuxt/ COPY --from=builder ./app/static ./static/ USER nuxtjs EXPOSE 3000 CMD ["yarn", "start"]
原因:実行環境にnuxt.config.js
をコピーしていない
上記のDockerfile
はビルドと実行を別環境で行なっています。実行環境にビルドしたものを移す際に、nuxt.config.js
を移していませんでした。おそらく、runtimeConfig
は実行時にnuxt.config.js
を参照してよしなにするのだと思います。
次のようにnuxt.config.js
をコピーする操作を追加して解決します。
... COPY --from=builder /app/nuxt.config.js ./ ## Add COPY --from=builder ./app/package.json ./ COPY --from=builder ./app/node_modules ./node_modules/ COPY --from=builder ./app/.nuxt ./.nuxt/ COPY --from=builder ./app/static ./static/ USER nuxtjs EXPOSE 3000 CMD ["yarn", "start"]
よく考えると、環境変数が上手く読み込めていないのであれば、undefined
ではなく、デフォルト値として設定したhttps://localhost:3000
が入っているはずなので、この辺りで気がつけるといいかも。
参考
これに助けられました。
nuxtjs
のruntimeConfig
について
原因の元となったファイル