セキュリティ系の勉強・その他開発メモとか雑談. Twitter, ブログカテゴリ一覧
本ブログはあくまでセキュリティに関する情報共有の一環として作成したものであり,公開されているシステム等に許可なく実行するなど、違法な行為を助長するものではありません.

Nuxt.js runtimeConfigの値がundefinedになる

//

あらまし

コンテナ化して、docker-composenuxtjs製のアプリケーションを実行しようとしています。 その際、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が入っているはずなので、この辺りで気がつけるといいかも。

参考

これに助けられました。

github.com

nuxtjsruntimeConfigについて

zenn.dev

原因の元となったファイル

github.com