首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >NextJS process.env.NEXT_PUBLIC变量在生产中为空

NextJS process.env.NEXT_PUBLIC变量在生产中为空
EN

Stack Overflow用户
提问于 2021-10-28 09:46:52
回答 4查看 8.2K关注 0票数 2

我有一个NextJS "^11.1.2“应用程序,它可以在Dockerfile中构建并通过CI/CD部署到生产中。但我的process.env 变量没有呈现

在我的客户端代码中有这样的内容,应该在运行时呈现:

const PublicApiUrl = process.env.NEXT_PUBLIC_API_URL;

在我的(Gitlab) CI/CD管道中,我通过AUTO_DEVOPS_BUILD_IMAGE_EXTRA_ARGS添加了一些--build-args,以及ENVARG

代码语言:javascript
运行
复制
AUTO_DEVOPS_BUILD_IMAGE_EXTRA_ARGS --build-arg=NEXT_PUBLIC_API_URL=https://my.api.com --build-arg=NEXT_PUBLIC_API_URL=https://my.api.com --build-arg=NEXT_PUBLIC_BUILDER_KEY=XXXXXX
NEXT_PUBLIC_API_URL=https://my.api.com
API_URL=https://my.api.com

Dockerfile

代码语言:javascript
运行
复制
ARG API_URL
ENV API_URL=$API_URL
ARG NEXT_PUBLIC_API_URL
ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
ARG NEXT_PUBLIC_BUILDER_KEY
ENV NEXT_PUBLIC_BUILDER_KEY=$NEXT_PUBLIC_BUILDER_KEY
RUN npm run build # which resolves in "build": "next build"

下面的值肯定会被选中(我做了一个RUN env,可以看到变量在那里)。

这是我在Kubernetes的configMap,它将.env.local文件挂载到容器中:

代码语言:javascript
运行
复制
apiVersion: v1
kind: ConfigMap
metadata:
  name: frontend-env-local
  annotations:
    "helm.sh/resource-policy": keep
data:
  .env: |-
    NEXT_PUBLIC_API_URL=https://my.api.url
    API_URL=https://my.api.url

这是我的部署,它将configMap作为.env.local挂载到容器中。

代码语言:javascript
运行
复制
apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend
  labels:
    app: frontend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      volumes:
      - configMap:
          defaultMode: 420
          items:
          - key: .env
            path: .env.local
          name: frontend-env-local
        name: frontend-env-local
      imagePullSecrets: 
        - name: gitlab-credentials
      containers:
        - name: frontend
          image: "registry.gitlab.com/myapp:latest"
          imagePullPolicy: Always
          ports:
            - name: http
              containerPort: 5000
              protocol: TCP
          volumeMounts:
          - mountPath: /app/.env.local
            name: frontend-env-local
            readOnly: true
            subPath: .env.local

当我在本地构建next build时,它可以工作,并且呈现我的变量。

但是,当我推送、构建和部署它并运行该应用程序时,它是一个空字符串:

代码语言:javascript
运行
复制
const PublicApiUrl = "";

为什么NextJS不能识别变量?

我登录生产(Kubernetes pod)终端并运行env。变量也是存在的。

知道为什么会这样吗?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2021-10-28 16:40:05

我还必须在next.config.js中定义变量,如下所示:

代码语言:javascript
运行
复制
module.exports = {
    serverRuntimeConfig: {
        API_URL: process.env.API_URL,
    },
    // Will be available on both server and client
    publicRuntimeConfig: {
        NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
    }
}

在改变之后,似乎不需要configMap或安装的卷.只有我的CI/CD中的--build-argDockerfile中的ARGENV

票数 5
EN

Stack Overflow用户

发布于 2021-10-29 16:38:02

您不需要在next.config.js中定义变量--糟糕的实践。

分别定义env文件

本地的

您需要创建environments文件夹,然后在该文件夹中创建.env.local;在这里定义本地变量。完成此操作后,在package.json文件中填充scripts部分:

代码语言:javascript
运行
复制
"scripts": {
    //you need to add this line - defining your .env.local file inside 
    "local": "env-cmd -f environments/.env.local node server.js",
    "build": "next build",
  },

因此,在以npm命令作为local server启动npm run local之后

服务器的

您需要在服务器上以某种方式定义environment variables。关于vercel,在settings/environment variables

由于process.env.NEXT_PUBLIC_API_URL文件通常被GitHub忽略,所以您“丢失”了GitHub的值--新的GitHub公开了环境变量。您的文件process.env.NEXT_PUBLIC_API_URL丢失在服务器上,这就是为什么您有null值。

票数 0
EN

Stack Overflow用户

发布于 2022-03-19 16:13:04

如果使用Docker,在进行项目构建之前,请检查.env文件是否在DockerFile中。

代码语言:javascript
运行
复制
Example DockerFile:
FROM node:16.14.0-alpine3.14 as build

WORKDIR /app

# Copy in only the parts needed to install dependencies
# (This avoids rebuilds if the package.json hasn’t changed)
COPY package.json  .
COPY package-lock.json .
COPY .env.production .

# Install dependencies (including dev dependencies)
RUN npm install

# Copy in the rest of the project
# (include node_modules in a .dockerignore file)
COPY . .

# Build the project
RUN npm run build

# Second stage: runtime
FROM node:16.14.0-alpine3.14

WORKDIR /app

ENV NODE_ENV=production

# Again get dependencies, but this time only install
# runtime dependencies
COPY package.json  .
COPY package-lock.json .
RUN npm install --only=production

# Get the built application from the first stage
COPY --from=build /app/.next/ /app/.next/

# Set runtime metadata
ENV PORT 3000
EXPOSE 3000
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69751831

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档