gpt4 book ai didi

typescript - NextJS 和环境变量 - 向客户端获取值

转载 作者:行者123 更新时间:2023-12-02 19:01:09 26 4
gpt4 key购买 nike

如果之前已经回答过这个问题,我深表歉意,但我在这里用一些应该很简单的东西撞墙......

我的项目正在运行 server模式。我们需要能够在 处传递环境变量运行时间 并在 上提供它们两者 服务器端和客户端

我正在使用 publicRuntimeConfig docs 中描述的方法我没有做任何不寻常的事情(要遵循的代码)

问题是在开发模式( yarn dev )下运行时一切正常,但是当我构建项目并将其 dockerize (或将其移动到 kubernetes 进行部署)时,它无法正常工作。

这是代码:next.config.js

const nextConfig = {
publicRuntimeConfig: {
PARAM_A: process.env.PARAM_A || "defaultA",
PARAM_B: process.env.PARAM_B || "defaultB"
}
};

module.exports = nextConfig;
_app.tsx
import React from "react";
import App, { AppContext } from "next/app";
import Head from "next/head";
import { Menu } from "../src/components/menu";


class CustomApp extends App {
static async getInitialProps({ Component, ctx }: AppContext) {
let pageProps = {};

if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
console.log("[_app.tsx] pageProps", pageProps);
}

return { pageProps };
}

render() {
const { Component, pageProps } = this.props;

return (
<>
<Head>
<title>Testing Area</title>
</Head>
<Menu />
<Component {...pageProps} />
</>
);
}
}

export default CustomApp;
index.tsx , otherpage.tsxhelp.tsx除了措辞之外完全相同,所以我只会放下 index.tsx节省空间:

import React, { Component } from "react";
import getConfig from "next/config";
import { NextPageContext } from "next";

class Index extends Component {
static async getInitialProps(ctx: NextPageContext) {
const nextConfig = getConfig();
const clientConfig = (nextConfig && nextConfig.publicRuntimeConfig) || {};
const settings = Object.keys(process.env).length > 1 ? process.env : clientConfig;
console.log("[INDEX PAGE] - nextConfig", nextConfig);
console.log("[INDEX PAGE] - clientConfig", nextConfig.publicRuntimeConfig);
console.log("[INDEX PAGE] - settings", settings);
console.log("[INDEX PAGE] - process.env", process.env);

return { settings };
}

render() {
return <div>INDEX Page</div>;
}
}

export default Index;

当我跑 yarn dev ,此行在浏览器开发工具中的输出 console.log("[INDEX PAGE] - nextConfig", nextConfig);符合预期(注意 PARAM_APARAM_B ):
[INDEX PAGE] - nextConfig 
{serverRuntimeConfig: {…}, publicRuntimeConfig: {…}}
serverRuntimeConfig: {}
publicRuntimeConfig:
PARAM_A: "mycustomAvalue"
PARAM_B: "mycustomBvalue"
__proto__: Object
__proto__: Object

当我对项目进行 dockerize 并提供 env 变量时,所有页面的输出如下所示,并且没有任何内容从服务器端传递到客户端 publicRuntimeConfig :
[INDEX PAGE] - nextConfig 
{serverRuntimeConfig: {…}, publicRuntimeConfig: {…}}
serverRuntimeConfig: {}
publicRuntimeConfig: {}
__proto__: Object

第一个页面获取值(因为 getInitialProps 在 _app.tsx 中执行)但是每当我导航到任何其他页面(使用 next/link)时,我都会丢失变量。
我需要在我的应用程序的所有页面中使用这些值。请告诉我我遗漏了一些明显的东西。

最佳答案

publicRuntimeConfig将在您构建应用程序时进行捆绑。

当您构建 Docker 镜像时,您的应用程序构建就会发生。但是,您的环境变量此时不可用。

当您启动容器时,您提供环境变量,以便您的服务器端代码可以使用它们,但您的客户端代码不能。

一种解决方案是在容器启动时构建您的应用程序,因为构建将可以访问您提供的 env 变量。不过,我不会真正推荐这种方法。

另一种解决方案是使用 Docker 构建参数在构建时设置环境变量:

文件

ARG PARAM_A
ARG PARAM_B

ENV PARAM_A=$PARAM_A
ENV PARAM_B=$PARAM_B

# ...

然后将 env 变量作为构建参数传递:
docker build --build-arg PARAM_A=something --build-arg PARAM_B=something ...

这允许您为每个环境传递不同的构建参数。

但是,这确实意味着您的每个环境都有一个单独的镜像。

我希望这有帮助。

关于typescript - NextJS 和环境变量 - 向客户端获取值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59877588/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com