Webpack EnvironmentPlugin在使用`docker-compose build`运行时看不到env变量

blmhpbnm  于 2023-10-19  发布在  Webpack
关注(0)|答案(1)|浏览(144)

如果我在docker之外运行相同的任务,它工作得很好,它可以从webpack构建的.env文件中看到正确的env变量,但在docker中却不行。(尽管我可以在Docker容器检查面板中看到env变量,并且它们在其他容器任务中使用得很好,例如mongo使用env变量来启动副本)
环境文件:

DATABASE_URL="mongodb://root:prisma@mongo:27018/bookmeon?authSource=admin"

MONGO_INITDB_ROOT_USERNAME=root
MONGO_INITDB_ROOT_PASSWORD=prisma
MONGO_REPLICA_HOST=mongo
MONGO_REPLICA_PORT=27018

AUTH0_CLIENT_ID=123
AUTH0_CLIENT_SECRET=456
AUTH0_DOMAIN=789

docker-compose.yml:

name: bookmeon

# For connection urls to the following instances, see
# https://github.com/prisma/prisma/blob/main/TESTING.md#environment-variables
services:
  # Replica Set (required for Prisma Client)
  mongo:
    container_name: mongo
    build:
      dockerfile: ./docker/mongo.Dockerfile
    env_file:
      - .env
    ports:
      - '27018:27018'
  web:
    container_name: web
    build:
      dockerfile: ./docker/app.Dockerfile
    env_file:
      - .env
    ports:
      - '1337:1337'
    depends_on:
      - mongo
  scratch:
    container_name: scratch
    build:
      dockerfile: ./docker/scratch.Dockerfile
    env_file:
      - .env

app.dockerfile:

###################
# base
###################
FROM node:20.5.1-alpine3.18 As base
RUN apk add openssl1.1-compat
RUN apk add musl

RUN npm i -g pnpm

###################
# deps install
###################

FROM base As deps

WORKDIR /my

COPY --chown=node:node ./package.json .

RUN npm i

###################
# build
###################

FROM base As build

WORKDIR /my

COPY --chown=node:node --from=deps ./my/. .
COPY --chown=node:node ./tsconfig* .
COPY --chown=node:node ./webpack.js .

COPY --chown=node:node ./prisma ./prisma
COPY --chown=node:node ./src ./src
COPY --chown=node:node ./aps ./aps

RUN pnpm exec prisma generate
RUN pnpm run build
RUN pnpm run fe-build

USER node

ENTRYPOINT node dist/main.js; /

Webpack环境插件使用:

const plugins = [
  new webpack.EnvironmentPlugin([
    'CLOUDINARY_BUCKET',
    'AUTH0_CLIENT_ID',
    'AUTH0_DOMAIN',
    'NODE_ENV'
  ]),
///....

package.json任务:

"scripts": {
    "webpack": "NODE_ENV=development npx webpack serve --port=1338 -c ./webpack.js",  
    "fe-build": "npx webpack -c ./webpack.js",
    "build": "nest build",

错误代码:

4.005 adding webpack development plugins
28.15 91 assets
28.15 2689 modules
28.15 
28.15 WARNING in DefinePlugin
28.15 Conflicting values for 'process.env.NODE_ENV'
28.15 
28.15 1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
28.15 
28.15 ERROR in EnvironmentPlugin - AUTH0_CLIENT_ID environment variable is undefined.
28.15 
28.15 You can pass an object with default values to suppress this warning.
28.15 See https://webpack.js.org/plugins/environment-plugin for example.
xam8gpfp

xam8gpfp1#

好吧,问题是因为构建阶段无法访问.env文件。
我不得不在docker-compose.yml中添加一个特殊的部分来选择env变量,并标记在app.dockerfile中使用了哪些ARGS
docker-compose.yml添加:

web:
    container_name: web
    build:
      dockerfile: ./docker/app.Dockerfile
      args:
        - NODE_ENV=${NODE_ENV}
        - AUTH0_CLIENT_ID=${AUTH0_CLIENT_ID}
        - AUTH0_DOMAIN=${AUTH0_DOMAIN}
        - CLOUDINARY_BUCKET=${CLOUDINARY_BUCKET}

app.dockerfile添加:

ARG NODE_ENV
ARG AUTH0_CLIENT_ID
ARG AUTH0_DOMAIN
ARG CLOUDINARY_BUCKET

相关问题